admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

chore(front): Refactor the SnackBar component to use the new scope architecture (#2578)

Browse Source 
* chore(front): Refactor the SnackBar component to use the new scope architecture

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>

* Rename useSnackBarManager

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>
Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
gitstart-twenty
2023-11-22 06:42:38 +08:00
committed by GitHub
parent ff42526a09
commit ee8f6899fc
27 changed files with 238 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
front/src/modules/ui/feedback/snack-bar/components/SnackBar.tsx → front/src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx
View File

18
front/src/modules/ui/feedback/snack-bar/components/SnackBarProvider.tsx → front/src/modules/ui/feedback/snack-bar-manager/components/SnackBarProvider.tsx
View File

@ -1,11 +1,10 @@
import styled from '@emotion/styled';
import { motion, useReducedMotion } from 'framer-motion';
import { useRecoilState } from 'recoil';
import { snackBarInternalState } from '../states/snackBarState';
import { useSnackBarManagerScopedStates } from '@/ui/feedback/snack-bar-manager/hooks/internal/useSnackBarManagerScopedStates';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { SnackBar } from './SnackBar';
const StyledSnackBarContainer = styled.div`
display: flex;
flex-direction: column;
@ -53,17 +52,8 @@ const reducedVariants = {
export const SnackBarProvider = ({ children }: React.PropsWithChildren) => {
const reducedMotion = useReducedMotion();
const [snackBarInternal, setSnackBarInternal] = useRecoilState(
snackBarInternalState,
);
// Handle snackbar close event
const handleSnackBarClose = (id: string) => {
setSnackBarInternal((prevState) => ({
...prevState,
queue: prevState.queue.filter((snackBar) => snackBar.id !== id),
}));
};
const { snackBarInternal } = useSnackBarManagerScopedStates();
const { handleSnackBarClose } = useSnackBar();
return (
<>

24
front/src/modules/ui/feedback/snack-bar-manager/hooks/internal/useSnackBarManagerScopedStates.ts Normal file
View File

@ -0,0 +1,24 @@
import { SnackBarManagerScopeInternalContext } from '@/ui/feedback/snack-bar-manager/scopes/scope-internal-context/SnackBarManagerScopeInternalContext';
import { snackBarInternalScopedState } from '@/ui/feedback/snack-bar-manager/states/snackBarInternalScopedState';
import { useRecoilScopedStateV2 } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedStateV2';
import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
type useSnackBarManagerScopedStatesProps = {
snackBarManagerScopeId?: string;
};
export const useSnackBarManagerScopedStates = (
props?: useSnackBarManagerScopedStatesProps,
) => {
const scopeId = useAvailableScopeIdOrThrow(
SnackBarManagerScopeInternalContext,
props?.snackBarManagerScopeId,
);
const [snackBarInternal, setSnackBarInternal] = useRecoilScopedStateV2(
snackBarInternalScopedState,
scopeId,
);
return { snackBarInternal, setSnackBarInternal };
};

0
front/src/modules/ui/feedback/snack-bar/hooks/usePausableTimeout.ts → front/src/modules/ui/feedback/snack-bar-manager/hooks/usePausableTimeout.ts
View File

53
front/src/modules/ui/feedback/snack-bar-manager/hooks/useSnackBar.tsx Normal file
View File

@ -0,0 +1,53 @@
import { useRecoilCallback } from 'recoil';
import { v4 as uuidv4 } from 'uuid';
import { SnackBarManagerScopeInternalContext } from '@/ui/feedback/snack-bar-manager/scopes/scope-internal-context/SnackBarManagerScopeInternalContext';
import {
snackBarInternalScopedState,
SnackBarOptions,
} from '@/ui/feedback/snack-bar-manager/states/snackBarInternalScopedState';
import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
export const useSnackBar = () => {
const scopeId = useAvailableScopeIdOrThrow(
SnackBarManagerScopeInternalContext,
);
const handleSnackBarClose = useRecoilCallback(({ set }) => (id: string) => {
set(snackBarInternalScopedState({ scopeId }), (prevState) => ({
...prevState,
queue: prevState.queue.filter((snackBar) => snackBar.id !== id),
}));
});
const setSnackBarQueue = useRecoilCallback(
({ set }) =>
(newValue) =>
set(snackBarInternalScopedState({ scopeId }), (prev) => {
if (prev.queue.length >= prev.maxQueue) {
return {
...prev,
queue: [...prev.queue.slice(1), newValue] as SnackBarOptions[],
};
}
return {
...prev,
queue: [...prev.queue, newValue] as SnackBarOptions[],
};
}),
);
const enqueueSnackBar = (
message: string,
options?: Omit<SnackBarOptions, 'message' | 'id'>,
) => {
setSnackBarQueue({
id: uuidv4(),
message,
...options,
});
};
return { handleSnackBarClose, enqueueSnackBar };
};

23
front/src/modules/ui/feedback/snack-bar-manager/scopes/SnackBarProviderScope.tsx Normal file
View File

@ -0,0 +1,23 @@
import { ReactNode } from 'react';
import { SnackBarManagerScopeInternalContext } from './scope-internal-context/SnackBarManagerScopeInternalContext';
type SnackBarProviderScopeProps = {
children: ReactNode;
snackBarManagerScopeId: string;
};
export const SnackBarProviderScope = ({
children,
snackBarManagerScopeId,
}: SnackBarProviderScopeProps) => {
return (
<SnackBarManagerScopeInternalContext.Provider
value={{
scopeId: snackBarManagerScopeId,
}}
>
{children}
</SnackBarManagerScopeInternalContext.Provider>
);
};

7
front/src/modules/ui/feedback/snack-bar-manager/scopes/scope-internal-context/SnackBarManagerScopeInternalContext.ts Normal file
View File

@ -0,0 +1,7 @@
import { ScopedStateKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/ScopedStateKey';
import { createScopeInternalContext } from '@/ui/utilities/recoil-scope/scopes-internal/utils/createScopeInternalContext';
type SnackBarManagerScopeInternalContextProps = ScopedStateKey;
export const SnackBarManagerScopeInternalContext =
createScopeInternalContext<SnackBarManagerScopeInternalContextProps>();

20
front/src/modules/ui/feedback/snack-bar-manager/states/snackBarInternalScopedState.ts Normal file
View File

@ -0,0 +1,20 @@
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
import { SnackBarProps } from '../components/SnackBar';
export type SnackBarOptions = SnackBarProps & {
id: string;
};
type SnackBarState = {
maxQueue: number;
queue: SnackBarOptions[];
};
export const snackBarInternalScopedState = createScopedState<SnackBarState>({
key: 'snackBarState',
defaultValue: {
maxQueue: 3,
queue: [],
},
});

24
front/src/modules/ui/feedback/snack-bar/hooks/useSnackBar.ts
View File

@ -1,24 +0,0 @@
import { useSetRecoilState } from 'recoil';
import { v4 as uuidv4 } from 'uuid';
import {
SnackBarOptions,
snackBarSetQueueState,
} from '../states/snackBarState';
export const useSnackBar = () => {
const setSnackBarQueue = useSetRecoilState(snackBarSetQueueState);
const enqueueSnackBar = (
message: string,
options?: Omit<SnackBarOptions, 'message' | 'id'>,
) => {
setSnackBarQueue({
id: uuidv4(),
message,
...options,
});
};
return { enqueueSnackBar };
};

40
front/src/modules/ui/feedback/snack-bar/states/snackBarState.ts
View File

@ -1,40 +0,0 @@
import { atom, selector } from 'recoil';
import { SnackBarProps } from '../components/SnackBar';
export type SnackBarOptions = SnackBarProps & {
id: string;
};
type SnackBarState = {
maxQueue: number;
queue: SnackBarOptions[];
};
export const snackBarInternalState = atom<SnackBarState>({
key: 'snackBarState',
default: {
maxQueue: 3,
queue: [],
},
});
// TODO: use a recoil callback
export const snackBarSetQueueState = selector<SnackBarOptions | null>({
key: 'snackBarQueueState',
get: ({ get: _get }) => null, // We don't care about getting the value
set: ({ set }, newValue) =>
set(snackBarInternalState, (prev) => {
if (prev.queue.length >= prev.maxQueue) {
return {
...prev,
queue: [...prev.queue.slice(1), newValue] as SnackBarOptions[],
};
}
return {
...prev,
queue: [...prev.queue, newValue] as SnackBarOptions[],
};
}),
});

2
front/src/modules/ui/layout/board/components/BoardColumnMenu.tsx
View File

@ -8,7 +8,7 @@ import {
IconPencil,
IconPlus,
} from '@/ui/display/icon';
import { useSnackBar } from '@/ui/feedback/snack-bar/hooks/useSnackBar';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { relationPickerSearchFilterScopedState } from '@/ui/input/relation-picker/states/relationPickerSearchFilterScopedState';
import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect';
import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope';