Add Auth Index page (#323)

front/package.json

@@ -14,6 +14,7 @@
     "@types/node": "^16.18.4",
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.9",
+    "@types/react-modal": "^3.16.0",
     "apollo-link-rest": "^0.9.0",
     "cmdk": "^0.2.0",
     "date-fns": "^2.30.0",
@@ -25,6 +26,7 @@
     "react-datepicker": "^4.11.0",
     "react-dom": "^18.2.0",
     "react-hotkeys-hook": "^4.4.0",
+    "react-modal": "^3.16.1",
     "react-router-dom": "^6.4.4",
     "react-textarea-autosize": "^8.4.1",
     "react-tooltip": "^5.13.1",

front/src/App.tsx

@@ -3,7 +3,8 @@ import { Navigate, Route, Routes } from 'react-router-dom';
 import { DefaultLayout } from '@/ui/layout/DefaultLayout';
 
 import { RequireAuth } from './modules/auth/components/RequireAuth';
-import { AuthCallback } from './pages/auth/AuthCallback';
+import { Callback } from './pages/auth/Callback';
+import { Index } from './pages/auth/Index';
 import { Login } from './pages/auth/Login';
 import { Companies } from './pages/companies/Companies';
 import { Opportunities } from './pages/opportunities/Opportunities';
@@ -23,6 +24,14 @@ export function App() {
                 <Route path="people" element={<People />} />
                 <Route path="companies" element={<Companies />} />
                 <Route path="opportunities" element={<Opportunities />} />
+                <Route
+                  path="settings/*"
+                  element={
+                    <Routes>
+                      <Route path="profile" element={<SettingsProfile />} />
+                    </Routes>
+                  }
+                />
               </Routes>
             </RequireAuth>
           }
@@ -31,19 +40,12 @@ export function App() {
           path="auth/*"
           element={
             <Routes>
-              <Route path="callback" element={<AuthCallback />} />
+              <Route path="" element={<Index />} />
+              <Route path="callback" element={<Callback />} />
               <Route path="login" element={<Login />} />
             </Routes>
           }
         />
-        <Route
-          path="settings/*"
-          element={
-            <Routes>
-              <Route path="profile" element={<SettingsProfile />} />
-            </Routes>
-          }
-        />
       </Routes>
     </DefaultLayout>
   );

front/src/modules/auth/hooks/useMockData.ts

@@ -0,0 +1,27 @@
+import { graphql, setupWorker } from 'msw';
+
+import { mockedCompaniesData } from '~/testing/mock-data/companies';
+import { mockedUsersData } from '~/testing/mock-data/users';
+
+export function useMockData() {
+  const worker = setupWorker(...graphqlMocks);
+  worker.start({ quiet: true, onUnhandledRequest: 'bypass' });
+}
+
+const graphqlMocks = [
+  graphql.query('GetCompanies', (req, res, ctx) => {
+    return res(
+      ctx.data({
+        companies: mockedCompaniesData,
+      }),
+    );
+  }),
+
+  graphql.query('GetCurrentUser', (req, res, ctx) => {
+    return res(
+      ctx.data({
+        users: [mockedUsersData[0]],
+      }),
+    );
+  }),
+];

front/src/modules/ui/components/modal/Modal.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import ReactModal from 'react-modal';
+import { useTheme } from '@emotion/react';
+
+export function Modal({ children }: { children: React.ReactNode }) {
+  const theme = useTheme();
+  return (
+    <ReactModal
+      isOpen
+      style={{
+        overlay: {
+          backgroundColor: theme.modalBackgroundTransparent,
+          zIndex: 2,
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+        },
+        content: { zIndex: 1000, minWidth: 200, inset: 'auto' },
+      }}
+    >
+      {children}
+    </ReactModal>
+  );
+}

front/src/modules/ui/layout/styles/colors/transparent.ts

@@ -5,6 +5,7 @@ export const transparentColorsLight = {
   mediumBackgroundTransparent: 'rgba(0, 0, 0, 0.08)',
   lightBackgroundTransparent: 'rgba(0, 0, 0, 0.04)',
   lighterBackgroundTransparent: 'rgba(0, 0, 0, 0.02)',
+  modalBackgroundTransparent: 'rgba(23, 23, 23, 0.8)',
 };
 
 export const transparentColorsDark = {
@@ -14,4 +15,5 @@ export const transparentColorsDark = {
   mediumBackgroundTransparent: 'rgba(255, 255, 255, 0.06)',
   lightBackgroundTransparent: 'rgba(255, 255, 255, 0.03)',
   lighterBackgroundTransparent: 'rgba(255, 255, 255, 0.02)',
+  modalBackgroundTransparent: 'rgba(23, 23, 23, 0.8)',
 };

front/src/pages/auth/Callback.tsx

@@ -3,7 +3,7 @@ import { useNavigate, useSearchParams } from 'react-router-dom';
 
 import { getTokensFromLoginToken } from '@/auth/services/AuthService';
 
-export function AuthCallback() {
+export function Callback() {
   const [searchParams] = useSearchParams();
   const [isLoading, setIsLoading] = useState(false);
 

front/src/pages/auth/Index.tsx

@@ -0,0 +1,26 @@
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { useMockData } from '@/auth/hooks/useMockData';
+import { hasAccessToken } from '@/auth/services/AuthService';
+import { Modal } from '@/ui/components/modal/Modal';
+
+import { Companies } from '../companies/Companies';
+
+export function Index() {
+  const navigate = useNavigate();
+  useMockData();
+
+  useEffect(() => {
+    if (hasAccessToken()) {
+      navigate('/');
+    }
+  }, [navigate]);
+
+  return (
+    <>
+      <Companies />
+      <Modal>Welcome to Twenty</Modal>
+    </>
+  );
+}

front/src/pages/auth/__stories__/Index.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { graphqlMocks } from '~/testing/graphqlMocks';
+import { getRenderWrapperForPage } from '~/testing/renderWrappers';
+
+import { Index } from '../Index';
+
+const meta: Meta<typeof Index> = {
+  title: 'Pages/Auth/Index',
+  component: Index,
+};
+
+export default meta;
+
+export type Story = StoryObj<typeof Index>;
+
+export const Default: Story = {
+  render: getRenderWrapperForPage(<Index />, '/auth'),
+  parameters: {
+    msw: graphqlMocks,
+  },
+};

front/yarn.lock

@@ -4761,6 +4761,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-modal@^3.16.0":
+  version "3.16.0"
+  resolved "https://registry.yarnpkg.com/@types/react-modal/-/react-modal-3.16.0.tgz#b8d6be10de894139a2ea9f4a2505b1b5d02023df"
+  integrity sha512-iphdqXAyUfByLbxJn5j6d+yh93dbMgshqGP0IuBeaKbZXx0aO+OXsvEkt6QctRdxjeM9/bR+Gp3h9F9djVWTQQ==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*", "@types/react@>=16", "@types/react@^18.0.25":
   version "18.2.12"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.12.tgz#95d584338610b78bb9ba0415e3180fb03debdf97"
@@ -8861,6 +8868,11 @@ execa@^5.0.0, execa@^5.1.1:
     signal-exit "^3.0.3"
     strip-final-newline "^2.0.0"
 
+exenv@^1.2.0:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
+  integrity sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw==
+
 exit@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
@@ -14056,6 +14068,21 @@ react-is@^18.0.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
+react-lifecycles-compat@^3.0.0:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
+  integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
+
+react-modal@^3.16.1:
+  version "3.16.1"
+  resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-3.16.1.tgz#34018528fc206561b1a5467fc3beeaddafb39b2b"
+  integrity sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==
+  dependencies:
+    exenv "^1.2.0"
+    prop-types "^15.7.2"
+    react-lifecycles-compat "^3.0.0"
+    warning "^4.0.3"
+
 react-onclickoutside@^6.12.2:
   version "6.13.0"
   resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-6.13.0.tgz#e165ea4e5157f3da94f4376a3ab3e22a565f4ffc"
@@ -16410,7 +16437,7 @@ walker@^1.0.7, walker@^1.0.8:
   dependencies:
     makeerror "1.0.12"
 
-warning@^4.0.2:
+warning@^4.0.2, warning@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
   integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==