plane/web/contexts/profile-issues-context.tsx
sriram veeraghanta 1e152c666c
New Directory Setup (#2065)
* chore: moved app & space from apps to root

* chore: modified workspace configuration

* chore: modified dockerfiles for space and web

* chore: modified icons for space

* feat: updated files for new svg icons supported by next-images

* chore: added /spaces base path for next

* chore: added compose config for space

* chore: updated husky configuration

* chore: updated workflows for new configuration

* chore: changed app name to web

* fix: resolved build errors with web

* chore: reset file tracing root for both projects

* chore: added nginx config for deploy

* fix: eslint and tsconfig settings for space app

* husky setup fixes based on new dir

* eslint fixes

* prettier formatting

---------

Co-authored-by: Henit Chobisa <chobisa.henit@gmail.com>
2023-09-03 18:50:30 +05:30

316 lines
6.7 KiB
TypeScript

import { createContext, useCallback, useReducer } from "react";
// components
import ToastAlert from "components/toast-alert";
// types
import {
IIssueFilterOptions,
TIssueViewOptions,
TIssueGroupByOptions,
TIssueOrderByOptions,
Properties,
} from "types";
export const profileIssuesContext = createContext<ContextType>({} as ContextType);
type IssueViewProps = {
issueView: TIssueViewOptions;
groupByProperty: TIssueGroupByOptions;
orderBy: TIssueOrderByOptions;
showEmptyGroups: boolean;
showSubIssues: boolean;
filters: IIssueFilterOptions;
properties: Properties;
};
type ReducerActionType = {
type:
| "SET_ISSUE_VIEW"
| "SET_ORDER_BY_PROPERTY"
| "SET_SHOW_EMPTY_STATES"
| "SET_FILTERS"
| "SET_PROPERTIES"
| "SET_GROUP_BY_PROPERTY"
| "RESET_TO_DEFAULT"
| "SET_SHOW_SUB_ISSUES";
payload?: Partial<IssueViewProps>;
};
type ContextType = IssueViewProps & {
setGroupByProperty: (property: TIssueGroupByOptions) => void;
setOrderBy: (property: TIssueOrderByOptions) => void;
setShowEmptyGroups: (property: boolean) => void;
setShowSubIssues: (value: boolean) => void;
setFilters: (filters: Partial<IIssueFilterOptions>) => void;
setProperties: (key: keyof Properties) => void;
setIssueView: (property: TIssueViewOptions) => void;
};
type StateType = {
issueView: TIssueViewOptions;
groupByProperty: TIssueGroupByOptions;
orderBy: TIssueOrderByOptions;
showEmptyGroups: boolean;
showSubIssues: boolean;
filters: IIssueFilterOptions;
properties: Properties;
};
type ReducerFunctionType = (state: StateType, action: ReducerActionType) => StateType;
export const initialState: StateType = {
issueView: "list",
groupByProperty: null,
orderBy: "-created_at",
showEmptyGroups: true,
showSubIssues: true,
filters: {
type: null,
priority: null,
assignees: null,
labels: null,
state: null,
state_group: null,
subscriber: null,
created_by: null,
start_date: null,
target_date: null,
},
properties: {
assignee: true,
start_date: true,
due_date: true,
key: true,
labels: true,
priority: true,
state: true,
sub_issue_count: true,
attachment_count: true,
link: true,
estimate: true,
created_on: true,
updated_on: true,
},
};
export const reducer: ReducerFunctionType = (state, action) => {
const { type, payload } = action;
switch (type) {
case "SET_ISSUE_VIEW": {
const newState = {
...state,
issueView: payload?.issueView || "list",
};
return {
...state,
...newState,
};
}
case "SET_GROUP_BY_PROPERTY": {
const newState = {
...state,
groupByProperty: payload?.groupByProperty || null,
};
return {
...state,
...newState,
};
}
case "SET_ORDER_BY_PROPERTY": {
const newState = {
...state,
orderBy: payload?.orderBy || "-created_at",
};
return {
...state,
...newState,
};
}
case "SET_SHOW_EMPTY_STATES": {
const newState = {
...state,
showEmptyGroups: payload?.showEmptyGroups || true,
};
return {
...state,
...newState,
};
}
case "SET_SHOW_SUB_ISSUES": {
const newState = {
...state,
showSubIssues: payload?.showSubIssues || true,
};
return {
...state,
...newState,
};
}
case "SET_FILTERS": {
const newState = {
...state,
filters: {
...state.filters,
...payload?.filters,
},
};
return {
...state,
...newState,
};
}
case "SET_PROPERTIES": {
const newState = {
...state,
properties: {
...state.properties,
...payload?.properties,
},
};
return {
...state,
...newState,
};
}
default: {
return state;
}
}
};
export const ProfileIssuesContextProvider: React.FC<{ children: React.ReactNode }> = ({
children,
}) => {
const [state, dispatch] = useReducer(reducer, initialState);
const setIssueView = useCallback(
(property: TIssueViewOptions) => {
dispatch({
type: "SET_ISSUE_VIEW",
payload: {
issueView: property,
},
});
if (property === "kanban" && state.groupByProperty === null) {
dispatch({
type: "SET_GROUP_BY_PROPERTY",
payload: {
groupByProperty: "state_detail.group",
},
});
}
},
[state]
);
const setGroupByProperty = useCallback((property: TIssueGroupByOptions) => {
dispatch({
type: "SET_GROUP_BY_PROPERTY",
payload: {
groupByProperty: property,
},
});
}, []);
const setOrderBy = useCallback((property: TIssueOrderByOptions) => {
dispatch({
type: "SET_ORDER_BY_PROPERTY",
payload: {
orderBy: property,
},
});
}, []);
const setShowEmptyGroups = useCallback((property: boolean) => {
dispatch({
type: "SET_SHOW_EMPTY_STATES",
payload: {
showEmptyGroups: property,
},
});
}, []);
const setShowSubIssues = useCallback((property: boolean) => {
dispatch({
type: "SET_SHOW_SUB_ISSUES",
payload: {
showSubIssues: property,
},
});
}, []);
const setFilters = useCallback(
(property: Partial<IIssueFilterOptions>) => {
Object.keys(property).forEach((key) => {
if (property[key as keyof typeof property]?.length === 0)
property[key as keyof typeof property] = null;
});
dispatch({
type: "SET_FILTERS",
payload: {
filters: {
...state.filters,
...property,
},
},
});
},
[state]
);
const setProperties = useCallback(
(key: keyof Properties) => {
dispatch({
type: "SET_PROPERTIES",
payload: {
properties: {
...state.properties,
[key]: !state.properties[key],
},
},
});
},
[state]
);
return (
<profileIssuesContext.Provider
value={{
issueView: state.issueView,
setIssueView,
groupByProperty: state.groupByProperty,
setGroupByProperty,
orderBy: state.orderBy,
setOrderBy,
showEmptyGroups: state.showEmptyGroups,
setShowEmptyGroups,
showSubIssues: state.showSubIssues,
setShowSubIssues,
filters: state.filters,
setFilters,
properties: state.properties,
setProperties,
}}
>
<ToastAlert />
{children}
</profileIssuesContext.Provider>
);
};