diff --git a/packages/tupaia-web/README.md b/packages/tupaia-web/README.md index b58ad7ae6e..c86f2e406d 100644 --- a/packages/tupaia-web/README.md +++ b/packages/tupaia-web/README.md @@ -1,3 +1,15 @@ # @tupaia/tupaia-web Main [Tupaia](https://tupaia.org/) application. + +## App Directory Structure + +- `api`: API layer abstractions such as react-query queries and mutations. +- `components`: Reusable components that are used throughout the app such as Button, Table, etc. +- `constants`: App wide constants such as colors, fonts, etc. Some constants are also defined in the components files or directories. +- `features`: Specific one-off react components that relate to features of the app such as maps, charts etc. +- `layout`: App wide layout components such as Header, Footer etc. +- `theme`: @material-ui theme configuration. +- `utils`: App wide utils such as navigation utils etc. +- `views`: Top level templates that map to router paths. These might contain components that are specific to the view but are not substantial enough to be a feature such as a one-off form. + diff --git a/packages/tupaia-web/src/pages/ModalRoutes.tsx b/packages/tupaia-web/src/ModalRoutes.tsx similarity index 51% rename from packages/tupaia-web/src/pages/ModalRoutes.tsx rename to packages/tupaia-web/src/ModalRoutes.tsx index a4d00cc0de..c5408dd234 100644 --- a/packages/tupaia-web/src/pages/ModalRoutes.tsx +++ b/packages/tupaia-web/src/ModalRoutes.tsx @@ -1,36 +1,36 @@ /* * Tupaia - * Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd + * Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd */ import React from 'react'; -import { MODAL_ROUTES, URL_SEARCH_PARAMS } from '../constants'; +import { MODAL_ROUTES, URL_SEARCH_PARAMS } from './constants'; import { - Projects, - Login, - Register, - VerifyEmailResend, - RequestProjectAccess, - RequestCountryAccess, - ForgotPassword, - ResetPassword, -} from '.'; -import { Modal } from '../components'; -import { useModal } from '../utils'; + ProjectsModal, + LoginModal, + RegisterModal, + VerifyEmailResendModal, + RequestProjectAccessModal, + RequestCountryAccessModal, + ForgotPasswordModal, + ResetPasswordModal, +} from './views'; +import { Modal } from './components'; +import { useModal } from './utils'; /** * This is the wrapper to handle any search param routes that should be modals */ const modalViews = { - [MODAL_ROUTES.PROJECTS]: Projects, - [MODAL_ROUTES.LOGIN]: Login, - [MODAL_ROUTES.REGISTER]: Register, - [MODAL_ROUTES.REQUEST_COUNTRY_ACCESS]: RequestCountryAccess, - [MODAL_ROUTES.REQUEST_PROJECT_ACCESS]: RequestProjectAccess, - [MODAL_ROUTES.FORGOT_PASSWORD]: ForgotPassword, - [MODAL_ROUTES.RESET_PASSWORD]: ResetPassword, - [MODAL_ROUTES.VERIFY_EMAIL_RESEND]: VerifyEmailResend, + [MODAL_ROUTES.PROJECTS]: ProjectsModal, + [MODAL_ROUTES.LOGIN]: LoginModal, + [MODAL_ROUTES.REGISTER]: RegisterModal, + [MODAL_ROUTES.REQUEST_COUNTRY_ACCESS]: RequestCountryAccessModal, + [MODAL_ROUTES.REQUEST_PROJECT_ACCESS]: RequestProjectAccessModal, + [MODAL_ROUTES.FORGOT_PASSWORD]: ForgotPasswordModal, + [MODAL_ROUTES.RESET_PASSWORD]: ResetPasswordModal, + [MODAL_ROUTES.VERIFY_EMAIL_RESEND]: VerifyEmailResendModal, }; const modalParams = { diff --git a/packages/tupaia-web/src/Routes.tsx b/packages/tupaia-web/src/Routes.tsx index 14c24f0e0e..c331b5c2c3 100644 --- a/packages/tupaia-web/src/Routes.tsx +++ b/packages/tupaia-web/src/Routes.tsx @@ -4,9 +4,10 @@ */ import React from 'react'; import { Navigate, Route, Routes as RouterRoutes, useLocation } from 'react-router-dom'; -import { ModalRoutes, LandingPage, Project } from './pages'; +import { LandingPage, ProjectPage } from './views'; +import { ModalRoutes } from './ModalRoutes'; import { MODAL_ROUTES, DEFAULT_URL } from './constants'; -import { Layout } from './layout'; +import { MainLayout } from './layout'; /** * This Router is using [version 6.3]{@link https://reactrouter.com/en/v6.3.0}, as later versions are not supported by our TS setup. See [this issue here]{@link https://github.com/remix-run/react-router/discussions/8364} @@ -22,7 +23,7 @@ export const Routes = () => { {/* This is the layout for the entire app, so needs to be wrapped around the rest of the routes so that we can access params in top bar etc */} - }> + }> } /> {/* Email verification links redirect to the login page where the verification happens */} { /> } /> {/** Because react-router v 6.3 doesn't support optional url segments, we need to handle dashboardCode with a splat/catch-all instead */} - } /> + } /> diff --git a/packages/tupaia-web/src/layout/Sidebar/Breadcrumbs.tsx b/packages/tupaia-web/src/features/Dashboard/Breadcrumbs.tsx similarity index 100% rename from packages/tupaia-web/src/layout/Sidebar/Breadcrumbs.tsx rename to packages/tupaia-web/src/features/Dashboard/Breadcrumbs.tsx diff --git a/packages/tupaia-web/src/layout/Sidebar/Sidebar.tsx b/packages/tupaia-web/src/features/Dashboard/Dashboard.tsx similarity index 99% rename from packages/tupaia-web/src/layout/Sidebar/Sidebar.tsx rename to packages/tupaia-web/src/features/Dashboard/Dashboard.tsx index 77a8ded84d..d0ca69bb8b 100644 --- a/packages/tupaia-web/src/layout/Sidebar/Sidebar.tsx +++ b/packages/tupaia-web/src/features/Dashboard/Dashboard.tsx @@ -99,7 +99,7 @@ const Chart = styled.div` padding: 1rem 1rem 75%; `; -export const Sidebar = () => { +export const Dashboard = () => { const { projectCode, entityCode, '*': dashboardCode } = useParams(); const [isExpanded, setIsExpanded] = useState(false); const { data: entityData } = useEntity(entityCode); diff --git a/packages/tupaia-web/src/layout/Sidebar/DashboardMenu.tsx b/packages/tupaia-web/src/features/Dashboard/DashboardMenu.tsx similarity index 100% rename from packages/tupaia-web/src/layout/Sidebar/DashboardMenu.tsx rename to packages/tupaia-web/src/features/Dashboard/DashboardMenu.tsx diff --git a/packages/tupaia-web/src/layout/Sidebar/ExpandButton.tsx b/packages/tupaia-web/src/features/Dashboard/ExpandButton.tsx similarity index 100% rename from packages/tupaia-web/src/layout/Sidebar/ExpandButton.tsx rename to packages/tupaia-web/src/features/Dashboard/ExpandButton.tsx diff --git a/packages/tupaia-web/src/layout/Sidebar/Media.tsx b/packages/tupaia-web/src/features/Dashboard/Media.tsx similarity index 100% rename from packages/tupaia-web/src/layout/Sidebar/Media.tsx rename to packages/tupaia-web/src/features/Dashboard/Media.tsx diff --git a/packages/tupaia-web/src/layout/Sidebar/Photo.tsx b/packages/tupaia-web/src/features/Dashboard/Photo.tsx similarity index 100% rename from packages/tupaia-web/src/layout/Sidebar/Photo.tsx rename to packages/tupaia-web/src/features/Dashboard/Photo.tsx diff --git a/packages/tupaia-web/src/layout/Sidebar/StaticMap.tsx b/packages/tupaia-web/src/features/Dashboard/StaticMap.tsx similarity index 100% rename from packages/tupaia-web/src/layout/Sidebar/StaticMap.tsx rename to packages/tupaia-web/src/features/Dashboard/StaticMap.tsx diff --git a/packages/tupaia-web/src/layout/Sidebar/index.ts b/packages/tupaia-web/src/features/Dashboard/index.ts similarity index 66% rename from packages/tupaia-web/src/layout/Sidebar/index.ts rename to packages/tupaia-web/src/features/Dashboard/index.ts index a1ac18fc21..05a442e59c 100644 --- a/packages/tupaia-web/src/layout/Sidebar/index.ts +++ b/packages/tupaia-web/src/features/Dashboard/index.ts @@ -3,4 +3,4 @@ * Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd */ -export { Sidebar } from './Sidebar'; +export { Dashboard } from './Dashboard'; diff --git a/packages/tupaia-web/src/layout/Map/Map.tsx b/packages/tupaia-web/src/features/Map/Map.tsx similarity index 100% rename from packages/tupaia-web/src/layout/Map/Map.tsx rename to packages/tupaia-web/src/features/Map/Map.tsx diff --git a/packages/tupaia-web/src/layout/Map/MapLegend/DesktopMapLegend.tsx b/packages/tupaia-web/src/features/Map/MapLegend/DesktopMapLegend.tsx similarity index 100% rename from packages/tupaia-web/src/layout/Map/MapLegend/DesktopMapLegend.tsx rename to packages/tupaia-web/src/features/Map/MapLegend/DesktopMapLegend.tsx diff --git a/packages/tupaia-web/src/layout/Map/MapLegend/MapLegend.tsx b/packages/tupaia-web/src/features/Map/MapLegend/MapLegend.tsx similarity index 100% rename from packages/tupaia-web/src/layout/Map/MapLegend/MapLegend.tsx rename to packages/tupaia-web/src/features/Map/MapLegend/MapLegend.tsx diff --git a/packages/tupaia-web/src/layout/Map/MapLegend/MobileMapLegend.tsx b/packages/tupaia-web/src/features/Map/MapLegend/MobileMapLegend.tsx similarity index 100% rename from packages/tupaia-web/src/layout/Map/MapLegend/MobileMapLegend.tsx rename to packages/tupaia-web/src/features/Map/MapLegend/MobileMapLegend.tsx diff --git a/packages/tupaia-web/src/layout/Map/MapLegend/index.ts b/packages/tupaia-web/src/features/Map/MapLegend/index.ts similarity index 100% rename from packages/tupaia-web/src/layout/Map/MapLegend/index.ts rename to packages/tupaia-web/src/features/Map/MapLegend/index.ts diff --git a/packages/tupaia-web/src/layout/Map/MapOverlaySelector/DesktopMapOverlaySelector.tsx b/packages/tupaia-web/src/features/Map/MapOverlaySelector/DesktopMapOverlaySelector.tsx similarity index 100% rename from packages/tupaia-web/src/layout/Map/MapOverlaySelector/DesktopMapOverlaySelector.tsx rename to packages/tupaia-web/src/features/Map/MapOverlaySelector/DesktopMapOverlaySelector.tsx diff --git a/packages/tupaia-web/src/layout/Map/MapOverlaySelector/MapOverlaySelector.tsx b/packages/tupaia-web/src/features/Map/MapOverlaySelector/MapOverlaySelector.tsx similarity index 100% rename from packages/tupaia-web/src/layout/Map/MapOverlaySelector/MapOverlaySelector.tsx rename to packages/tupaia-web/src/features/Map/MapOverlaySelector/MapOverlaySelector.tsx diff --git a/packages/tupaia-web/src/layout/Map/MapOverlaySelector/MobileMapOverlaySelector.tsx b/packages/tupaia-web/src/features/Map/MapOverlaySelector/MobileMapOverlaySelector.tsx similarity index 100% rename from packages/tupaia-web/src/layout/Map/MapOverlaySelector/MobileMapOverlaySelector.tsx rename to packages/tupaia-web/src/features/Map/MapOverlaySelector/MobileMapOverlaySelector.tsx diff --git a/packages/tupaia-web/src/layout/Map/MapOverlaySelector/index.ts b/packages/tupaia-web/src/features/Map/MapOverlaySelector/index.ts similarity index 100% rename from packages/tupaia-web/src/layout/Map/MapOverlaySelector/index.ts rename to packages/tupaia-web/src/features/Map/MapOverlaySelector/index.ts diff --git a/packages/tupaia-web/src/layout/Map/MapWatermark.tsx b/packages/tupaia-web/src/features/Map/MapWatermark.tsx similarity index 100% rename from packages/tupaia-web/src/layout/Map/MapWatermark.tsx rename to packages/tupaia-web/src/features/Map/MapWatermark.tsx diff --git a/packages/tupaia-web/src/layout/Map/index.ts b/packages/tupaia-web/src/features/Map/index.ts similarity index 100% rename from packages/tupaia-web/src/layout/Map/index.ts rename to packages/tupaia-web/src/features/Map/index.ts diff --git a/packages/tupaia-web/src/features/index.ts b/packages/tupaia-web/src/features/index.ts index 652a972fc4..c57eb32a4c 100644 --- a/packages/tupaia-web/src/features/index.ts +++ b/packages/tupaia-web/src/features/index.ts @@ -2,3 +2,5 @@ * Tupaia * Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd */ +export { Map } from './Map'; +export { Dashboard } from './Dashboard'; diff --git a/packages/tupaia-web/src/layout/Layout.tsx b/packages/tupaia-web/src/layout/MainLayout.tsx similarity index 96% rename from packages/tupaia-web/src/layout/Layout.tsx rename to packages/tupaia-web/src/layout/MainLayout.tsx index a197494f99..9d1076d3fa 100644 --- a/packages/tupaia-web/src/layout/Layout.tsx +++ b/packages/tupaia-web/src/layout/MainLayout.tsx @@ -31,7 +31,7 @@ const Container = styled.div` } `; -export const Layout = () => { +export const MainLayout = () => { return ( diff --git a/packages/tupaia-web/src/layout/index.ts b/packages/tupaia-web/src/layout/index.ts index cf14727a1d..9c4fbd9a85 100644 --- a/packages/tupaia-web/src/layout/index.ts +++ b/packages/tupaia-web/src/layout/index.ts @@ -2,9 +2,5 @@ * Tupaia * Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd */ -export { DesktopLayout } from './DesktopLayout'; -export { Layout } from './Layout'; -export { Map } from './Map'; +export { MainLayout } from './MainLayout'; export * from './ProjectCardList'; -export { Sidebar } from './Sidebar'; -export { MobileTabLayout } from './MobileTabLayout'; diff --git a/packages/tupaia-web/src/pages/index.ts b/packages/tupaia-web/src/pages/index.ts deleted file mode 100644 index 95aed6605f..0000000000 --- a/packages/tupaia-web/src/pages/index.ts +++ /dev/null @@ -1,16 +0,0 @@ -/** - * Tupaia - * Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd - */ -export { LandingPage } from './LandingPage'; -export { Login } from './Login'; -export { ResetPassword } from './ResetPassword/ResetPassword'; -export { Project } from './Project'; -export { Register } from './Register'; -export { Projects } from './Projects'; -export { RequestCountryAccess } from './RequestCountryAccess'; -export { RequestProjectAccess } from './RequestProjectAccess'; -export { ForgotPassword } from './ForgotPassword'; -export { EmailVerification } from './EmailVerification'; -export { VerifyEmailResend } from './VerifyEmailResend'; -export { ModalRoutes } from './ModalRoutes'; diff --git a/packages/tupaia-web/src/pages/EmailVerification.tsx b/packages/tupaia-web/src/views/EmailVerificationModal.tsx similarity index 93% rename from packages/tupaia-web/src/pages/EmailVerification.tsx rename to packages/tupaia-web/src/views/EmailVerificationModal.tsx index ab401aa4fc..ffec9ed5b4 100644 --- a/packages/tupaia-web/src/pages/EmailVerification.tsx +++ b/packages/tupaia-web/src/views/EmailVerificationModal.tsx @@ -15,7 +15,7 @@ const Error = styled(Typography)` color: ${({ theme }) => theme.palette.error.main}; `; -export const EmailVerification = () => { +export const EmailVerificationModal = () => { const { isSuccess, isError } = useEmailVerification(); if (isSuccess) return Your e-mail was successfully verified; diff --git a/packages/tupaia-web/src/pages/ForgotPassword.tsx b/packages/tupaia-web/src/views/ForgotPasswordModal.tsx similarity index 98% rename from packages/tupaia-web/src/pages/ForgotPassword.tsx rename to packages/tupaia-web/src/views/ForgotPasswordModal.tsx index 989f0594d6..3b6d823759 100644 --- a/packages/tupaia-web/src/pages/ForgotPassword.tsx +++ b/packages/tupaia-web/src/views/ForgotPasswordModal.tsx @@ -37,7 +37,7 @@ const CheckEmailMessage = styled.p` padding: 0 0.9375rem; `; -export const ForgotPassword = () => { +export const ForgotPasswordModal = () => { const formContext = useForm({ mode: 'onChange', }); diff --git a/packages/tupaia-web/src/pages/LandingPage/LandingPage.tsx b/packages/tupaia-web/src/views/LandingPage/LandingPage.tsx similarity index 100% rename from packages/tupaia-web/src/pages/LandingPage/LandingPage.tsx rename to packages/tupaia-web/src/views/LandingPage/LandingPage.tsx diff --git a/packages/tupaia-web/src/pages/LandingPage/LandingPageFooter.tsx b/packages/tupaia-web/src/views/LandingPage/LandingPageFooter.tsx similarity index 100% rename from packages/tupaia-web/src/pages/LandingPage/LandingPageFooter.tsx rename to packages/tupaia-web/src/views/LandingPage/LandingPageFooter.tsx diff --git a/packages/tupaia-web/src/pages/LandingPage/MultiProjectLandingPage.tsx b/packages/tupaia-web/src/views/LandingPage/MultiProjectLandingPage.tsx similarity index 100% rename from packages/tupaia-web/src/pages/LandingPage/MultiProjectLandingPage.tsx rename to packages/tupaia-web/src/views/LandingPage/MultiProjectLandingPage.tsx diff --git a/packages/tupaia-web/src/pages/LandingPage/SingleProjectLandingPage.tsx b/packages/tupaia-web/src/views/LandingPage/SingleProjectLandingPage.tsx similarity index 100% rename from packages/tupaia-web/src/pages/LandingPage/SingleProjectLandingPage.tsx rename to packages/tupaia-web/src/views/LandingPage/SingleProjectLandingPage.tsx diff --git a/packages/tupaia-web/src/pages/LandingPage/index.ts b/packages/tupaia-web/src/views/LandingPage/index.ts similarity index 100% rename from packages/tupaia-web/src/pages/LandingPage/index.ts rename to packages/tupaia-web/src/views/LandingPage/index.ts diff --git a/packages/tupaia-web/src/pages/Login.tsx b/packages/tupaia-web/src/views/LoginModal.tsx similarity index 88% rename from packages/tupaia-web/src/pages/Login.tsx rename to packages/tupaia-web/src/views/LoginModal.tsx index 31a3f5008f..03bf2406df 100644 --- a/packages/tupaia-web/src/pages/Login.tsx +++ b/packages/tupaia-web/src/views/LoginModal.tsx @@ -9,7 +9,7 @@ import Typography from '@material-ui/core/Typography'; import { useLogin } from '../api/mutations'; import { AuthModalBody, AuthModalButton, TextField, RouterLink, Form } from '../components'; import { FORM_FIELD_VALIDATION, MODAL_ROUTES } from '../constants'; -import { EmailVerification } from './EmailVerification'; +import { EmailVerificationModal } from './EmailVerificationModal'; const ModalBody = styled(AuthModalBody)` width: 38rem; @@ -42,13 +42,17 @@ const ForgotPasswordText = styled(LinkText)` text-align: right; `; -export const Login = () => { +export const LoginModal = () => { const formContext = useForm(); const { mutate: login, isLoading, isError, error } = useLogin(); return ( - {isError ? {error.message} : } + {isError ? ( + {error.message} + ) : ( + + )} } formContext={formContext}> { return ( - + ); }; diff --git a/packages/tupaia-web/src/layout/MobileTabLayout/Footer.tsx b/packages/tupaia-web/src/views/ProjectPage/MobileTabLayout/Footer.tsx similarity index 100% rename from packages/tupaia-web/src/layout/MobileTabLayout/Footer.tsx rename to packages/tupaia-web/src/views/ProjectPage/MobileTabLayout/Footer.tsx diff --git a/packages/tupaia-web/src/layout/MobileTabLayout/MobileTabLayout.tsx b/packages/tupaia-web/src/views/ProjectPage/MobileTabLayout/MobileTabLayout.tsx similarity index 91% rename from packages/tupaia-web/src/layout/MobileTabLayout/MobileTabLayout.tsx rename to packages/tupaia-web/src/views/ProjectPage/MobileTabLayout/MobileTabLayout.tsx index 7eb97022e6..d5968e5514 100644 --- a/packages/tupaia-web/src/layout/MobileTabLayout/MobileTabLayout.tsx +++ b/packages/tupaia-web/src/views/ProjectPage/MobileTabLayout/MobileTabLayout.tsx @@ -9,10 +9,9 @@ import { Typography, Tabs as MuiTabs, Tab as MuiTab } from '@material-ui/core'; import { TabContext, TabPanel as MuiTabPanel } from '@material-ui/lab'; import { useParams } from 'react-router'; import { useSearchParams } from 'react-router-dom'; -import { useEntity } from '../../api/queries'; -import { MOBILE_BREAKPOINT, TABS, URL_SEARCH_PARAMS } from '../../constants'; -import { Map } from '../Map'; -import { Sidebar } from '..'; +import { useEntity } from '../../../api/queries'; +import { MOBILE_BREAKPOINT, TABS, URL_SEARCH_PARAMS } from '../../../constants'; +import { Dashboard, Map } from '../../../features'; import { Footer } from './Footer'; const Wrapper = styled.div` @@ -72,7 +71,7 @@ export const MobileTabLayout = () => { const selectedTab = urlSearchParams.get(URL_SEARCH_PARAMS.TAB) || TABS.DASHBOARD; - const setSelectedTab = (e: ChangeEvent<{}>, value: `${TABS}`) => { + const setSelectedTab = (_event: ChangeEvent<{}>, value: `${TABS}`) => { urlSearchParams.set(URL_SEARCH_PARAMS.TAB, value); setUrlSearchParams(urlSearchParams); }; @@ -86,7 +85,7 @@ export const MobileTabLayout = () => { {data && {data.name}} - +