Merge pull request #4 from ckhawks/jan24-again

ENCHANGED PAGE ROUTING AND COMPONENT LOADING (WITH ANIMATIONS/RIZZ) A…

Author: ckhawks

backend/package.json

@@ -2,10 +2,10 @@
   "name": "backend",
   "version": "1.0.0",
   "description": "",
-  "main": "index.js",
+  "main": "src/index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "nodemon --exec babel-node index.js"
+    "start": "nodemon --exec babel-node src/index.js"
   },
   "author": "",
   "license": "ISC",

backend/index.js renamed to backend/src/index.js

@@ -1,13 +1,38 @@
+const { createServer } = require('http');
 const express = require('express');
 const cors = require('cors');
 const app = express();
 const port = 5500;
 
+
+
+const server = createServer(app);
+
 app.use(express.urlencoded({ extended: true }));
 app.use(express.json());
 
 app.use(cors());
 
+// const corsOptions = {
+//   origin: (origin, callback) => {
+//     if (
+//       process.env.DEPLOYMENT_ENV === 'development' ||
+//       process.env.NODE_ENV === 'test' ||
+//       knownDomains.indexOf(origin) !== -1
+//     ) {
+//       callback(null, true);
+//     } else {
+//       console.error('Request submitted from unknown origin', origin);
+//       callback(new Error('Not allowed'));
+//     }
+//   }
+// };
+// // enable CORS - Cross Origin Resource Sharing
+// app.use('*', cors(corsOptions));
+
+const routes = require('./routes/');
+app.use('/v1', routes);
+
 // https://dev.to/richienabuk/setting-up-express-js-rest-api-postgres-and-sequelize-orm-with-es6-4m08
 
 app.get('/', (req, res) => {
@@ -52,6 +77,8 @@ app.get('/people', (req, res) => {
   res.json(data);
 });
 
-app.listen(port, () => {
+server.listen(port, () => {
   console.log(`Example app listening on port ${port}`);
-});
+});
+
+module.exports = server;

backend/src/routes/index.js

@@ -0,0 +1,17 @@
+// import { BaseRoute } from 'av-common';
+import express, { Request, Response } from 'express';
+
+const userRoutes = require('./user.route');
+
+const router = express.Router();
+
+router
+  .route('/status')  
+  // .get(useAuth, (req: Request, res: Response) =>
+  .get((req, res) =>
+    res.json({ message: 'Success!' })
+);
+
+router.use('/users', userRoutes);
+
+module.exports = router;

backend/src/routes/user.route.js

@@ -0,0 +1,64 @@
+const express = require('express');
+// const { GetCompanyCategoriesRoute } = require('av-common');
+
+// const controller = require('../../controllers/companyCategory.controller');
+
+// const { checkAuth0Token } = require('../../middlewares/auth');
+
+const router = express.Router();
+
+// router.use(checkAuth0Token);
+
+// const { CompanyCategory } = require('../models');
+// const {
+//   getCompanyCategories
+// } = require('../services/companyHierarchy/companyCategory/getCompanyCategories');
+// const { captureError } = require('../utils/logs');
+// const { buildErrorMsg } = require('../utils/methods');
+
+router
+    .route('/users')
+    .get(async (req, res) => {
+        try {
+            const response = await getCompanyCategories();
+        
+            res.json(response);
+        } catch (error) {
+            captureError(error);
+            console.error('getCompanyCategories', error);
+            res.status(500).send({
+              message: buildErrorMsg('getting company categories'),
+              errorType: error.message
+            });
+        }
+    });
+
+router
+    .route('/users')
+    .post(async (req, res) => {
+        try {
+            const { name } = req.body;
+        
+            const [companyCategory, created] = await CompanyCategory.findOrCreate({
+              where: { name: name.toUpperCase().trim() },
+              attributes: ['id', 'name']
+            });
+        
+            if (!created) {
+              res.status(500).send({
+                message: `${req.query.name} already exists`,
+                created
+              });
+            }
+        
+            res.json({ companyCategory, created });
+        } catch (error) {
+            captureError(error);
+            console.error('createAssignee', error);
+            res.status(500).send({
+              message: buildErrorMsg('creating a company category')
+            });
+        }
+    });
+
+module.exports = router;

frontend/src/App.css

@@ -47,6 +47,7 @@
     padding: 0px 20px;
     display: flex;
     flex-direction: column;
+    transition: max-width 0.15s ease-in-out;
 }
 
 .container-wide {
@@ -55,6 +56,7 @@
     padding: 0px 20px;
     display: flex;
     flex-direction: column;
+    transition: max-width 0.15s ease-in-out;
 }
 
 .vertical-center {

frontend/src/App.js

@@ -20,21 +20,34 @@ import GeistTestPage from './pages/GeistTest/GeistTestPage';
 import LoginPage from './pages/Authentication/LoginPage';
 import RegisterPage from "./pages/Authentication/RegisterPage";
 import GalleryPage from "./pages/Gallery/GalleryPage";
+import OrganizePage from "./pages/Organize/OrganizePage";
 
+import BaseLayout from "./pages/BaseLayout";
 
 function App() {
   return (
 
     <div className="App">
       <BrowserRouter>
         <Routes>
-          <Route path="*" element={<NotFoundPage/>} /> 
-          <Route path="/" element={<HomePage/>} />
-          <Route path="/geist-test" element={<GeistTestPage />} />
-          <Route path="/login" element={<LoginPage/>} />
-          <Route path="register" element={<RegisterPage />}/>
-          <Route path="/gallery" element={<GalleryPage/>}/>
 
+
+          {/* could refactor this to use contexts to inform the layout https://reactjs.org/docs/context.html */}
+          <Route element={<BaseLayout/>}>
+            <Route path="*" element={<NotFoundPage/>} />
+            <Route path="/" element={<HomePage/>} />
+            <Route path="geist-test" element={<GeistTestPage />} />
+          </Route>
+          <Route element={<BaseLayout centered/>}>
+            <Route path="login" element={<LoginPage/>} />
+            <Route path="register" element={<RegisterPage />}/>
+          </Route>
+          <Route element={<BaseLayout wide/>}>
+            <Route path="gallery" element={<GalleryPage/>}/>
+            <Route path="organize" element={<OrganizePage/>}/>
+          </Route>
+
+          {/* Legacy routes */}
           <Route path="old" element={<Layout />}>
             <Route index element={<Home />} />
             <Route path="about" element={<About />} />
@@ -47,12 +60,7 @@ function App() {
             <Route path="test" element={<Testing />} />
             <Route path="*" element={<NotFound />} />
           </Route>
-          {/* <Route path="/" element={<Layout />}>
-            
-          </Route>
-          <Route path="geist-test" element={<GeistTestContainer />} />
-          <Route path="register" element={<RegisterPage />}/>
-          <Route path="gallery" element={<GalleryPage/>}/> */}
+
         </Routes>
       </BrowserRouter>
     </div>

frontend/src/components/NavbarMenu/NavbarMenu.css

@@ -67,11 +67,14 @@
     display: flex;
     align-items: center;
     justify-content: flex-start;
-    
 }
 
-.navbar-logo:hover {
-    transform: translate3d(0px,-1px,0px);
+.navbar-logo>.tabs {
+    max-height: 46px;
+}
+
+.navbar-logo>a>.image:hover {
+    transform: translate3d(0px,-2px,0px);
 }
 
 .navbar-middle {

frontend/src/components/NavbarMenu/NavbarMenu.jsx

@@ -35,14 +35,17 @@ const NavbarMenu = (props) => {
                 <div className="navbar-center">
                     <div className={"navbar " + (props.wide ? "container-wide" : "container-regular")}>
                         <div className="navbar-logo">
-                            <a href="/">
+                            <Link to="/">
                                 <Image height="32px" mr={.5} src={StellectionLogo} draggable={false} title="Logo" alt="Stellection"/>
-                            </a>
+                            </Link>
+                            <Tabs initialValue={url} hideDivider hideBorder onChange={navTabsChangeHandler} value={url}>
+                                <Tabs.Item label="Geist Test" value="geist-test" />
+                            </Tabs>
 
                         </div>
                         <div className="navbar-middle">
                             <Tabs initialValue={url} hideDivider hideBorder onChange={navTabsChangeHandler} value={url}>
-                                <Tabs.Item label="Collect" value="geist-test" />
+                                <Tabs.Item label="Collect" value="collect" />
                                 <Tabs.Item label="Organize" value="organize" /> 
                                 <Tabs.Item label="Browse" value="gallery" />
                             </Tabs>

frontend/src/hooks/useApi.js

@@ -12,10 +12,10 @@ const swrApi = async (payload) => {
       body,
       contentType: contentTypeSent,
       header,
-      token,
+      // token,
       params,
       formData,
-      showError = true
+      // showError = true
     } = payload;
     let url = `${BASE_URL}/${path}`;
     if (params) {

frontend/src/hooks/useApi.ts.disabled

@@ -0,0 +1,117 @@
+// import { useSelector } from 'react-redux';
+// import { toast } from 'react-toastify';
+import useSWR, { SWRResponse, useSWRConfig } from 'swr';
+import ScopedMutator from 'swr';
+// import { TOAST_OPTIONS } from '../constants/toast';
+// import { getTokenSelector } from '../selectors/auth';
+// import { getCompanyTemp } from '../utils/company';
+// import { logoutRedirect } from '../utils/general';
+
+// const BASE_URL = process.env.BACKEND_API_URL;
+const BASE_URL = "http://127.0.0.1:5500/v1";
+
+const defaultContentType = 'application/json';
+
+interface ApiParams<U> {
+  path: string;
+  method: string;
+  body?: U;
+  contentType?: string;
+  header?: Record<string, string>;
+  params?: Record<string, string>;
+  formData?: FormData;
+  showError?: boolean;
+}
+
+type ApiFunctionParams<U> = ApiParams<U> & {
+  token?: string;
+};
+
+const swrApi = async <T, U>(payload: ApiFunctionParams<U>): Promise<T> => {
+  const {
+    path,
+    method,
+    body,
+    contentType: contentTypeSent,
+    header,
+    token,
+    params,
+    formData,
+    showError = true
+  } = payload;
+  let url = `${BASE_URL}/v1/${path}`;
+  if (params) {
+    const query = Object.keys(params)
+      .map((k) => `${encodeURIComponent(k)}=${encodeURIComponent(params[k])}`)
+      .join('&');
+    url = `${url}?${query}`;
+  }
+  const contentType = contentTypeSent || defaultContentType;
+
+  const headers: {
+    'Content-Type'?: string;
+    Authorization: string;
+    // CompanyId: string;
+  } = {
+    ...header,
+    'Content-Type': `${contentType}`,
+    Authorization: token ? `Bearer ${token}` : '',
+    // CompanyId: getCompanyTemp()
+  };
+
+  // TODO: we shoul figure out how to do this better.
+  if (formData) delete headers['Content-Type'];
+
+  try {
+    const response = await fetch(url, {
+      method,
+      headers,
+      body: body ? JSON.stringify(body) : formData ?? undefined
+    });
+    const responseBody = await response.json();
+    responseBody.ok = true;
+
+    if (response.status !== 200 && response.status !== 201) {
+      const { message } = await responseBody;
+      // Token has expired errors
+      if (
+        message === 'jwt expired' ||
+        message === 'No authorization token was found'
+      ) {
+        // logoutRedirect();
+        responseBody.ok = true;
+      } else {
+        // if (showError) toast.error(message, TOAST_OPTIONS);
+        responseBody.ok = false;
+      }
+    }
+    return responseBody;
+  } catch (error) {
+    throw Error(error as string);
+  }
+};
+
+/**
+ * Hook for making server calls.
+ * First generic is for the response type, second is for the body type.
+ * @param params
+ * @returns
+ */
+export function useApi<T, U>(params: ApiParams<U>): SWRResponse<T> {
+  // const token = useSelector(getTokenSelector);
+
+  const response = useSWR(
+    {
+      // token,
+      ...params
+    },
+    (...args) => swrApi<T, U>(...args)
+  );
+
+  return response;
+}
+
+// export function useApiRefetch(): typeof ScopedMutator {
+//   const { mutate } = useSWRConfig();
+//   return mutate;
+// }