From 58b2c06d7d81e2fc35498898277e29cb6c7bc1f2 Mon Sep 17 00:00:00 2001 From: Sidney Alcantara Date: Tue, 3 May 2022 01:20:34 +1000 Subject: [PATCH] move @src/atoms/* to standardize imports --- src/App.tsx | 3 +- src/analytics.ts | 3 +- src/atoms/{ => globalScope}/auth.ts | 0 .../{globalScope.ts => globalScope/index.ts} | 0 src/atoms/{ => globalScope}/project.ts | 4 +- src/atoms/{ => globalScope}/rowyRun.ts | 0 src/atoms/globalScope/ui.ts | 126 ++++++++++++++++++ src/atoms/{ => globalScope}/user.ts | 4 +- src/atoms/tableScope/index.ts | 4 + src/atoms/{ => tableScope}/table.ts | 0 src/atoms/ui.ts | 77 ----------- src/components/FirebaseUi.tsx | 3 +- src/components/RowyRunModal.tsx | 2 +- .../Settings/UserManagement/InviteUser.tsx | 8 +- .../Settings/UserManagement/UserItem.tsx | 4 +- .../Settings/UserSettings/Account.tsx | 2 +- src/components/Setup/SetupLayout.tsx | 3 +- src/components/Setup/Steps/StepFinish.tsx | 3 +- src/components/Setup/Steps/StepRules.tsx | 3 +- .../Setup/Steps/StepStorageRules.tsx | 3 +- src/components/Setup/Steps/StepWelcome.tsx | 3 +- src/constants/routes.tsx | 1 - src/layouts/AuthLayout.tsx | 3 +- src/layouts/Navigation/UserMenu.tsx | 2 +- src/layouts/RequireAuth.tsx | 3 +- src/test/testUtils.tsx | 2 +- src/theme/RowyThemeProvider.tsx | 4 +- 27 files changed, 157 insertions(+), 113 deletions(-) rename src/atoms/{ => globalScope}/auth.ts (100%) rename src/atoms/{globalScope.ts => globalScope/index.ts} (100%) rename src/atoms/{ => globalScope}/project.ts (96%) rename src/atoms/{ => globalScope}/rowyRun.ts (100%) create mode 100644 src/atoms/globalScope/ui.ts rename src/atoms/{ => globalScope}/user.ts (94%) create mode 100644 src/atoms/tableScope/index.ts rename src/atoms/{ => tableScope}/table.ts (100%) delete mode 100644 src/atoms/ui.ts diff --git a/src/App.tsx b/src/App.tsx index 8b62793d..bb379166 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -10,8 +10,7 @@ import NotFound from "@src/pages/NotFound"; import RequireAuth from "@src/layouts/RequireAuth"; import Navigation from "@src/layouts/Navigation"; -import { globalScope } from "@src/atoms/globalScope"; -import { currentUserAtom } from "@src/atoms/auth"; +import { globalScope, currentUserAtom } from "@src/atoms/globalScope"; import { ROUTES } from "@src/constants/routes"; import JotaiTestPage from "@src/pages/JotaiTest"; diff --git a/src/analytics.ts b/src/analytics.ts index 1b2855ff..e72e629a 100644 --- a/src/analytics.ts +++ b/src/analytics.ts @@ -1,5 +1,5 @@ import { initializeApp } from "firebase/app"; -import { getAnalytics } from "firebase/analytics"; +import { getAnalytics, logEvent } from "firebase/analytics"; const firebaseConfig = { apiKey: "AIzaSyArABiYGK7dZgwSk0pw_6vKbOt6U1ZRPpc", @@ -13,3 +13,4 @@ const firebaseConfig = { const rowyServiceApp = initializeApp(firebaseConfig, "rowy-service"); export const analytics = getAnalytics(rowyServiceApp); +export { logEvent }; diff --git a/src/atoms/auth.ts b/src/atoms/globalScope/auth.ts similarity index 100% rename from src/atoms/auth.ts rename to src/atoms/globalScope/auth.ts diff --git a/src/atoms/globalScope.ts b/src/atoms/globalScope/index.ts similarity index 100% rename from src/atoms/globalScope.ts rename to src/atoms/globalScope/index.ts diff --git a/src/atoms/project.ts b/src/atoms/globalScope/project.ts similarity index 96% rename from src/atoms/project.ts rename to src/atoms/globalScope/project.ts index 57dd393e..59f2c438 100644 --- a/src/atoms/project.ts +++ b/src/atoms/globalScope/project.ts @@ -1,9 +1,9 @@ -import { atom, PrimitiveAtom } from "jotai"; +import { atom } from "jotai"; import { sortBy } from "lodash-es"; import { ThemeOptions } from "@mui/material"; import { userRolesAtom } from "./auth"; -import { UpdateDocFunction, UpdateCollectionFunction } from "./types"; +import { UpdateDocFunction, UpdateCollectionFunction } from "@src/atoms/types"; import { UserSettings } from "./user"; export const projectIdAtom = atom(""); diff --git a/src/atoms/rowyRun.ts b/src/atoms/globalScope/rowyRun.ts similarity index 100% rename from src/atoms/rowyRun.ts rename to src/atoms/globalScope/rowyRun.ts diff --git a/src/atoms/globalScope/ui.ts b/src/atoms/globalScope/ui.ts new file mode 100644 index 00000000..bbfb096c --- /dev/null +++ b/src/atoms/globalScope/ui.ts @@ -0,0 +1,126 @@ +import { atom } from "jotai"; +import { atomWithStorage } from "jotai/utils"; + +import { DialogProps, ButtonProps } from "@mui/material"; +import { TableSettings } from "./project"; + +/** Nav open state stored in local storage. */ +export const navOpenAtom = atomWithStorage("__ROWY__NAV_OPEN", false); +/** Nav pinned state stored in local storage. */ +export const navPinnedAtom = atomWithStorage("__ROWY__NAV_PINNED", false); + +/** View for tables page */ +export const tablesViewAtom = atomWithStorage<"grid" | "list">( + "__ROWY__HOME_VIEW", + "grid" +); + +export type ConfirmDialogProps = { + open: boolean; + + title?: string; + /** Pass a string to display basic styled text */ + body?: React.ReactNode; + + /** Callback called when user clicks confirm */ + handleConfirm?: () => void; + /** Optionally override confirm button text */ + confirm?: string | JSX.Element; + /** Optionally require user to type this string to enable the confirm button */ + confirmationCommand?: string; + /** Optionally set confirm button color */ + confirmColor?: ButtonProps["color"]; + + /** Callback called when user clicks cancel */ + handleCancel?: () => void; + /** Optionally override cancel button text */ + cancel?: string; + /** Optionally hide cancel button */ + hideCancel?: boolean; + + /** Optionally set dialog max width */ + maxWidth?: DialogProps["maxWidth"]; +}; +/** + * Open a confirm dialog + * + * @example Basic usage: + * ``` + * const confirm = useSetAtom(confirmDialogAtom, globalScope); + * confirm({ handleConfirm: () => ... }); + * ``` + */ +export const confirmDialogAtom = atom( + { open: false } as ConfirmDialogProps, + (get, set, update: Partial) => { + set(confirmDialogAtom, { + ...get(confirmDialogAtom), + open: true, // Don’t require this to be set explicitly + ...update, + }); + } +); + +export type RowyRunModalState = { + open: boolean; + feature: string; + version: string; +}; +/** + * Open global Rowy Run modal if feature not available. + * Calling the set function resets props. + * + * @example Basic usage: + * ``` + * const openRowyRunModal = useSetAtom(rowyRunModalAtom, globalScope); + * openRowyRunModal({ feature: ... , version: ... }); + * ``` + * + * @example Close dialog: + * ``` + * openRowyRunModal({ open: false }) + * ``` + */ +export const rowyRunModalAtom = atom( + { open: false, feature: "", version: "" } as RowyRunModalState, + (_, set, update?: Partial) => { + set(rowyRunModalAtom, { + open: true, + feature: "", + version: "", + ...update, + }); + } +); + +export type TableSettingsDialogState = { + open: boolean; + mode: "create" | "update"; + data: TableSettings | null; +}; +/** + * Open table settings dialog. + * Calling the set function resets props. + * + * @example Basic usage: + * ``` + * const openTableSettingsDialog = useSetAtom(tableSettingsDialogAtom, globalScope); + * openTableSettingsDialog({ data: ... }); + * ``` + * + * @example Clear dialog: + * ``` + * openTableSettingsDialog({ open: false }) + * ``` + */ +export const tableSettingsDialogAtom = atom( + { open: false, mode: "create", data: null } as TableSettingsDialogState, + (_, set, update?: Partial) => { + set(tableSettingsDialogAtom, { + open: true, + mode: "create", + data: null, + ...update, + }); + } +); diff --git a/src/atoms/user.ts b/src/atoms/globalScope/user.ts similarity index 94% rename from src/atoms/user.ts rename to src/atoms/globalScope/user.ts index e6db5dd8..ee3e4367 100644 --- a/src/atoms/user.ts +++ b/src/atoms/globalScope/user.ts @@ -5,8 +5,8 @@ import { ThemeOptions } from "@mui/material"; import themes from "@src/theme"; import { publicSettingsAtom } from "./project"; -import { TableFilter } from "./table"; -import { UpdateDocFunction } from "./types"; +import { TableFilter } from "@src/atoms/tableScope/table"; +import { UpdateDocFunction } from "@src/atoms/types"; /** User info and settings */ export type UserSettings = Partial<{ diff --git a/src/atoms/tableScope/index.ts b/src/atoms/tableScope/index.ts new file mode 100644 index 00000000..e5e34cac --- /dev/null +++ b/src/atoms/tableScope/index.ts @@ -0,0 +1,4 @@ +/** Scope for atoms stored at the table level */ +export const tableScope = Symbol("tableScope"); + +export * from "./table"; diff --git a/src/atoms/table.ts b/src/atoms/tableScope/table.ts similarity index 100% rename from src/atoms/table.ts rename to src/atoms/tableScope/table.ts diff --git a/src/atoms/ui.ts b/src/atoms/ui.ts deleted file mode 100644 index 8ed44cbb..00000000 --- a/src/atoms/ui.ts +++ /dev/null @@ -1,77 +0,0 @@ -import { atom } from "jotai"; -import { atomWithStorage } from "jotai/utils"; - -import { DialogProps, ButtonProps } from "@mui/material"; - -/** Nav open state stored in local storage. */ -export const navOpenAtom = atomWithStorage("__ROWY__NAV_OPEN", false); -/** Nav pinned state stored in local storage. */ -export const navPinnedAtom = atomWithStorage("__ROWY__NAV_PINNED", false); - -export type ConfirmDialogProps = { - open: boolean; - - title?: string; - /** Pass a string to display basic styled text */ - body?: React.ReactNode; - - /** Callback called when user clicks confirm */ - handleConfirm?: () => void; - /** Optionally override confirm button text */ - confirm?: string | JSX.Element; - /** Optionally require user to type this string to enable the confirm button */ - confirmationCommand?: string; - /** Optionally set confirm button color */ - confirmColor?: ButtonProps["color"]; - - /** Callback called when user clicks cancel */ - handleCancel?: () => void; - /** Optionally override cancel button text */ - cancel?: string; - /** Optionally hide cancel button */ - hideCancel?: boolean; - - /** Optionally set dialog max width */ - maxWidth?: DialogProps["maxWidth"]; -}; -/** - * Open a confirm dialog - * - * @example Basic usage: - * ``` - * const confirm = useSetAtom(confirmDialogAtom, globalScope); - * confirm({ - * open: true, - * handleConfirm: () => ... - * }); - * ``` - */ -export const confirmDialogAtom = atom({ open: false }); - -/** - * Open global Rowy Run modal if feature not available - * {@link openRowyRunModalAtom | Use `openRowyRunModalAtom` to open} - */ -export const rowyRunModalAtom = atom({ open: false, feature: "", version: "" }); -/** - * Helper atom to open Rowy Run Modal - * - * @example Basic usage: - * ``` - * const openRowyRun = useSetAtom(openRowyRunModalAtom, globalScope); - * openRowyRun({ - * feature: ... - * version: ... - * }); - * ``` - */ -export const openRowyRunModalAtom = atom( - null, - (_, set, update?: Partial>) => { - set(rowyRunModalAtom, { - open: true, - feature: update?.feature || "", - version: update?.version || "", - }); - } -); diff --git a/src/components/FirebaseUi.tsx b/src/components/FirebaseUi.tsx index e8c32604..ceda7035 100644 --- a/src/components/FirebaseUi.tsx +++ b/src/components/FirebaseUi.tsx @@ -9,9 +9,8 @@ import { makeStyles } from "tss-react/mui"; import { Typography } from "@mui/material"; import { alpha } from "@mui/material/styles"; -import { globalScope } from "@src/atoms/globalScope"; +import { globalScope, publicSettingsAtom } from "@src/atoms/globalScope"; import { firebaseAuthAtom } from "@src/sources/ProjectSourceFirebase"; -import { publicSettingsAtom } from "@src/atoms/project"; import { defaultUiConfig, getSignInOptions } from "@src/config/firebaseui"; const ELEMENT_ID = "firebaseui_container"; diff --git a/src/components/RowyRunModal.tsx b/src/components/RowyRunModal.tsx index 01a6c1b4..fb2757ad 100644 --- a/src/components/RowyRunModal.tsx +++ b/src/components/RowyRunModal.tsx @@ -34,7 +34,7 @@ export default function RowyRunModal() { globalScope ); - const handleClose = () => setRowyRunModal((s) => ({ ...s, open: false })); + const handleClose = () => setRowyRunModal({ ...rowyRunModal, open: false }); const showUpdateModal = rowyRunModal.version && projectSettings?.rowyRunUrl; diff --git a/src/components/Settings/UserManagement/InviteUser.tsx b/src/components/Settings/UserManagement/InviteUser.tsx index 0f662054..370eaa37 100644 --- a/src/components/Settings/UserManagement/InviteUser.tsx +++ b/src/components/Settings/UserManagement/InviteUser.tsx @@ -20,16 +20,16 @@ import { rolesAtom, projectSettingsAtom, rowyRunAtom, - openRowyRunModalAtom, + rowyRunModalAtom, } from "@src/atoms/globalScope"; -import routes from "@src/constants/routes"; +import { ROUTES } from "@src/constants/routes"; import { runRoutes } from "@src/constants/runRoutes"; export default function InviteUser() { const [projectRoles] = useAtom(rolesAtom, globalScope); const [projectSettings] = useAtom(projectSettingsAtom, globalScope); const [rowyRun] = useAtom(rowyRunAtom, globalScope); - const openRowyRunModal = useSetAtom(openRowyRunModalAtom, globalScope); + const openRowyRunModal = useSetAtom(rowyRunModalAtom, globalScope); const { enqueueSnackbar } = useSnackbar(); const [open, setOpen] = useState(false); @@ -86,7 +86,7 @@ export default function InviteUser() { They can sign up with any of the sign-in options{" "} you have enabled diff --git a/src/components/Settings/UserManagement/UserItem.tsx b/src/components/Settings/UserManagement/UserItem.tsx index 38177f01..5bf40b42 100644 --- a/src/components/Settings/UserManagement/UserItem.tsx +++ b/src/components/Settings/UserManagement/UserItem.tsx @@ -21,7 +21,7 @@ import { rolesAtom, projectSettingsAtom, rowyRunAtom, - openRowyRunModalAtom, + rowyRunModalAtom, UserSettings, updateUserAtom, confirmDialogAtom, @@ -36,7 +36,7 @@ export default function UserItem({ }: UserSettings) { const { enqueueSnackbar, closeSnackbar } = useSnackbar(); const confirm = useSetAtom(confirmDialogAtom, globalScope); - const openRowyRunModal = useSetAtom(openRowyRunModalAtom, globalScope); + const openRowyRunModal = useSetAtom(rowyRunModalAtom, globalScope); const [projectRoles] = useAtom(rolesAtom, globalScope); const [projectSettings] = useAtom(projectSettingsAtom, globalScope); diff --git a/src/components/Settings/UserSettings/Account.tsx b/src/components/Settings/UserSettings/Account.tsx index a1c1e16f..d417145b 100644 --- a/src/components/Settings/UserSettings/Account.tsx +++ b/src/components/Settings/UserSettings/Account.tsx @@ -3,7 +3,7 @@ import { Link } from "react-router-dom"; import { Grid, Avatar, Typography, Button } from "@mui/material"; -import ROUTES from "@src/constants/routes"; +import { ROUTES } from "@src/constants/routes"; export default function Account({ settings }: IUserSettingsChildProps) { return ( diff --git a/src/components/Setup/SetupLayout.tsx b/src/components/Setup/SetupLayout.tsx index afd0b72f..9d7a6b18 100644 --- a/src/components/Setup/SetupLayout.tsx +++ b/src/components/Setup/SetupLayout.tsx @@ -1,7 +1,6 @@ import React, { useState, createElement } from "react"; import { use100vh } from "react-div-100vh"; import { SwitchTransition } from "react-transition-group"; -import { logEvent } from "firebase/analytics"; import type { ISetupStep } from "./SetupStep"; import { @@ -26,7 +25,7 @@ import Logo from "@src/assets/Logo"; import ScrollableDialogContent from "@src/components/Modal/ScrollableDialogContent"; import { SlideTransition } from "@src/components/Modal/SlideTransition"; -import { analytics } from "@src/analytics"; +import { analytics, logEvent } from "@src/analytics"; const BASE_WIDTH = 1024; diff --git a/src/components/Setup/Steps/StepFinish.tsx b/src/components/Setup/Steps/StepFinish.tsx index e6f0145a..b5ee5c10 100644 --- a/src/components/Setup/Steps/StepFinish.tsx +++ b/src/components/Setup/Steps/StepFinish.tsx @@ -2,7 +2,6 @@ import { useState, useEffect } from "react"; import { useAtom } from "jotai"; import { useSnackbar } from "notistack"; import { Link } from "react-router-dom"; -import { logEvent } from "firebase/analytics"; import { doc, updateDoc } from "firebase/firestore"; import type { ISetupStep } from "@src/components/Setup/SetupStep"; @@ -19,7 +18,7 @@ import ThumbUpOffIcon from "@mui/icons-material/ThumbUpOffAlt"; import ThumbDownIcon from "@mui/icons-material/ThumbDownAlt"; import ThumbDownOffIcon from "@mui/icons-material/ThumbDownOffAlt"; -import { analytics } from "@src/analytics"; +import { analytics, logEvent } from "@src/analytics"; import { globalScope } from "@src/atoms/globalScope"; import { firebaseDbAtom } from "@src/sources/ProjectSourceFirebase"; import { ROUTES } from "@src/constants/routes"; diff --git a/src/components/Setup/Steps/StepRules.tsx b/src/components/Setup/Steps/StepRules.tsx index 5430a952..3b963d76 100644 --- a/src/components/Setup/Steps/StepRules.tsx +++ b/src/components/Setup/Steps/StepRules.tsx @@ -19,8 +19,7 @@ import DoneIcon from "@mui/icons-material/Done"; import SetupItem from "@src/components/Setup/SetupItem"; -import { globalScope } from "@src/atoms/globalScope"; -import { projectIdAtom } from "@src/atoms/project"; +import { globalScope, projectIdAtom } from "@src/atoms/globalScope"; import { CONFIG } from "@src/config/dbPaths"; import { RULES_START, diff --git a/src/components/Setup/Steps/StepStorageRules.tsx b/src/components/Setup/Steps/StepStorageRules.tsx index 4f31de3f..c4f2dff2 100644 --- a/src/components/Setup/Steps/StepStorageRules.tsx +++ b/src/components/Setup/Steps/StepStorageRules.tsx @@ -12,8 +12,7 @@ import DoneIcon from "@mui/icons-material/Done"; import SetupItem from "@src/components/Setup/SetupItem"; -import { globalScope } from "@src/atoms/globalScope"; -import { projectIdAtom } from "@src/atoms/project"; +import { globalScope, projectIdAtom } from "@src/atoms/globalScope"; import { RULES_START, RULES_END, diff --git a/src/components/Setup/Steps/StepWelcome.tsx b/src/components/Setup/Steps/StepWelcome.tsx index 6f049512..dfabf8e8 100644 --- a/src/components/Setup/Steps/StepWelcome.tsx +++ b/src/components/Setup/Steps/StepWelcome.tsx @@ -13,8 +13,7 @@ import { } from "@mui/material"; import { EXTERNAL_LINKS } from "@src/constants/externalLinks"; -import { globalScope } from "@src/atoms/globalScope"; -import { projectIdAtom } from "@src/atoms/project"; +import { globalScope, projectIdAtom } from "@src/atoms/globalScope"; export default { id: "welcome", diff --git a/src/constants/routes.tsx b/src/constants/routes.tsx index 7d5d8796..41eea614 100644 --- a/src/constants/routes.tsx +++ b/src/constants/routes.tsx @@ -25,7 +25,6 @@ export enum ROUTES { userManagement = "/settings/userManagement", rowyRunTest = "/rrTest", } -export default ROUTES; export const ROUTE_TITLES = { [ROUTES.home]: { diff --git a/src/layouts/AuthLayout.tsx b/src/layouts/AuthLayout.tsx index ece07598..c5551d1b 100644 --- a/src/layouts/AuthLayout.tsx +++ b/src/layouts/AuthLayout.tsx @@ -13,8 +13,7 @@ import BrandedBackground, { Wrapper } from "@src/assets/BrandedBackground"; import Logo from "@src/assets/Logo"; import { EXTERNAL_LINKS } from "@src/constants/externalLinks"; -import { globalScope } from "@src/atoms/globalScope"; -import { projectIdAtom } from "@src/atoms/project"; +import { globalScope, projectIdAtom } from "@src/atoms/globalScope"; export interface IAuthLayoutProps { hideLogo?: boolean; diff --git a/src/layouts/Navigation/UserMenu.tsx b/src/layouts/Navigation/UserMenu.tsx index 5ea78ad7..7cd77859 100644 --- a/src/layouts/Navigation/UserMenu.tsx +++ b/src/layouts/Navigation/UserMenu.tsx @@ -26,7 +26,7 @@ import { themeAtom, themeOverriddenAtom, } from "@src/atoms/globalScope"; -import ROUTES from "@src/constants/routes"; +import { ROUTES } from "@src/constants/routes"; export default function UserMenu(props: IconButtonProps) { const anchorEl = useRef(null); diff --git a/src/layouts/RequireAuth.tsx b/src/layouts/RequireAuth.tsx index 1885fe35..07d56e8b 100644 --- a/src/layouts/RequireAuth.tsx +++ b/src/layouts/RequireAuth.tsx @@ -3,8 +3,7 @@ import { useLocation, Navigate } from "react-router-dom"; import Loading from "@src/components/Loading"; -import { globalScope } from "@src/atoms/globalScope"; -import { currentUserAtom } from "@src/atoms/auth"; +import { globalScope, currentUserAtom } from "@src/atoms/globalScope"; import { ROUTES } from "@src/constants/routes"; export interface IRequireAuthProps { diff --git a/src/test/testUtils.tsx b/src/test/testUtils.tsx index a473fa8f..6d26da95 100644 --- a/src/test/testUtils.tsx +++ b/src/test/testUtils.tsx @@ -13,7 +13,7 @@ import { envConfig, firebaseAuthAtom, } from "@src/sources/ProjectSourceFirebase"; -import { currentUserAtom } from "@src/atoms/auth"; +import { currentUserAtom } from "@src/atoms/globalScope"; /** * Render with Jotai `globalScope` providers diff --git a/src/theme/RowyThemeProvider.tsx b/src/theme/RowyThemeProvider.tsx index c308694a..3ca5bf83 100644 --- a/src/theme/RowyThemeProvider.tsx +++ b/src/theme/RowyThemeProvider.tsx @@ -5,12 +5,12 @@ import { Helmet } from "react-helmet-async"; import { useMediaQuery, ThemeProvider, CssBaseline } from "@mui/material"; import Favicon from "@src/assets/Favicon"; -import { globalScope } from "@src/atoms/globalScope"; import { + globalScope, themeAtom, themeOverriddenAtom, customizedThemesAtom, -} from "@src/atoms/user"; +} from "@src/atoms/globalScope"; /** * Injects the MUI theme with customizations from project and user settings.