I did all kinds of bullshit to make this mother fucker post a project…

…. I finally got it to work. I learned some shit, but mother fucker that was frustrating

package.json

@@ -7,14 +7,19 @@
     "@emotion/styled": "^11.10.5",
     "@mui/icons-material": "^5.11.0",
     "@mui/material": "^5.11.3",
+    "@mui/x-date-pickers": "^5.0.14",
     "@react-google-maps/api": "^2.17.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.2.2",
     "cookie": "^0.5.0",
+    "date-fns": "^2.29.3",
+    "dayjs": "^1.11.7",
     "google-map-react": "^2.2.0",
+    "moment": "^2.29.4",
     "react": "^18.2.0",
+    "react-datepicker": "^4.8.0",
     "react-dom": "^18.2.0",
     "react-geocode": "^0.2.3",
     "react-redux": "^8.0.5",

src/Router.js

@@ -6,6 +6,7 @@ import Login from './containers/Login';
 import Dashboard from './containers/Dashboard';
 import NewUser from './containers/NewUser';
 import newOrganization from './containers/NewOrganization';
+import newProject from './containers/NewProject';
 
 //Todo: Write checkAuth function here
 //Todo: Check the cookies for a cookie called "loggedIn"
@@ -43,6 +44,10 @@ const Router = () => {
         path='/newOrganization'
         element={<ProtectedRoute component={newOrganization} />}
       />
+      <Route
+        path='/newProject'
+        element={<ProtectedRoute component={newProject} />}
+      />
       {/* <Route path='/map' element={<Map />} /> */}
     </Routes>
   );

src/components/Dashboard.js

@@ -16,8 +16,17 @@ const Dashboard = (props) => {
   console.log(props);
   const [projects, setProjects] = useState([]);
 
+  let USDollar = new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+  });
+
   const totalExpense = (array) => {
-    return array.reduce((acc, cur) => acc + cur, 0);
+    return array.reduce((acc, cur) => +acc + +cur, 0);
+  };
+
+  const formatDate = (date) => {
+    return date;
   };
   useEffect(() => {
     const bearToken = props.token[0];
@@ -29,14 +38,13 @@ const Dashboard = (props) => {
       })
       .then(
         (response) => {
-          console.log(response.data);
-          setProjects(response.data);
+          console.log(response.data.rows);
+          setProjects(response.data.rows);
         },
         [props.token]
       );
     props.getProjects(bearToken);
-    setProjects(props.projects);
-    console.log(projects);
+    // console.log(projects);
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.token[0]]);
@@ -59,31 +67,41 @@ const Dashboard = (props) => {
         </TableHead>
         <TableBody>
           {projects.map((project) => {
+            const formattedESD = formatDate(project.estimated_start_date);
+            const formattedECD = formatDate(project.estimated_complete_date);
             return (
               <TableRow key={`${project.id}__row`}>
                 <TableCell>{project.project_name}</TableCell>
                 <TableCell>{project.project_status}</TableCell>
                 <TableCell>
-                  {!project.original_revenue ? 'TBD' : project.original_revenue}
+                  {!project.original_revenue
+                    ? 'TBD'
+                    : `${USDollar.format(project.original_revenue)}`}
                 </TableCell>
                 <TableCell>
-                  {!project.adjusted_revenue ? 'TBD' : project.adjusted_revenue}
+                  {!project.adjusted_revenue
+                    ? 'TBD'
+                    : `${USDollar.format(project.adjusted_revenue)}`}
                 </TableCell>
                 <TableCell>
-                  {totalExpense([
-                    project.budgeted_labor_expense,
-                    project.budgeted_material_expense,
-                    project.budgeted_miscellaneous_expense,
-                    project.budgeted_subcontractor_expense,
-                  ])}
+                  {`${USDollar.format(
+                    totalExpense([
+                      project.budgeted_labor_expense,
+                      project.budgeted_material_expense,
+                      project.budgeted_miscellaneous_expense,
+                      project.budgeted_subcontractor_expense,
+                    ])
+                  )}`}
                 </TableCell>
                 <TableCell>
-                  {totalExpense([
-                    project.actual_labor_expense,
-                    project.actual_material_expense,
-                    project.actual_miscellaneous_expense,
-                    project.actual_subcontractor_expense,
-                  ])}
+                  {`${USDollar.format(
+                    totalExpense([
+                      project.actual_labor_expense,
+                      project.actual_material_expense,
+                      project.actual_miscellaneous_expense,
+                      project.actual_subcontractor_expense,
+                    ])
+                  )}`}
                 </TableCell>
                 <TableCell>
                   {isNaN(
@@ -98,15 +116,17 @@ const Dashboard = (props) => {
                       100
                   )
                     ? 'TBD'
-                    : ((project.original_revenue -
-                        totalExpense([
-                          project.budgeted_labor_expense,
-                          project.budgeted_material_expense,
-                          project.budgeted_miscellaneous_expense,
-                          project.budgeted_subcontractor_expense,
-                        ])) /
-                        project.original_revenue) *
-                      100}
+                    : `${parseFloat(
+                        ((project.original_revenue -
+                          totalExpense([
+                            project.budgeted_labor_expense,
+                            project.budgeted_material_expense,
+                            project.budgeted_miscellaneous_expense,
+                            project.budgeted_subcontractor_expense,
+                          ])) /
+                          project.original_revenue) *
+                          100
+                      ).toFixed(2)} %`}
                 </TableCell>
                 <TableCell>
                   {isNaN(
@@ -131,8 +151,8 @@ const Dashboard = (props) => {
                         project.original_revenue) *
                       100}
                 </TableCell>
-                <TableCell>{project.estimated_start_date}</TableCell>
-                <TableCell>{project.estimated_complete_date}</TableCell>
+                <TableCell>{formattedESD}</TableCell>
+                <TableCell>{formattedECD}</TableCell>
               </TableRow>
             );
           })}

src/components/DatePicker.js

@@ -0,0 +1,38 @@
+// import React, { useState } from 'react';
+// import dayjs, { Dayjs } from 'dayjs';
+// import TextField from '@mui/material/TextField';
+// import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+// import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+// import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+// import MomentUtils from '@date-io/moment';
+
+// export default function BasicDatePicker(props) {
+//   console.log('DatePicker props:', props);
+//   const [value, setValue] = useState(dayjs());
+//   const [esd, setEsd] = useState(null);
+//   const [ecd, setEcd] = useState(null);
+
+//   const handleDateChange = (newValue) => {
+//     setValue(newValue);
+//     if (props.label === 'Est. Start Date') {
+//       setEsd(newValue.$d);
+//       let payload = esd;
+//       props.addESD(payload);
+//     } else if (props.label === 'Est. Complete Date') {
+//       setEcd(newValue.$d);
+//       let payload = ecd;
+//       props.addECD(payload);
+//     }
+//   };
+
+//   return (
+//     <LocalizationProvider dateAdapter={AdapterDayjs}>
+//       <DatePicker
+//         label={props.label}
+//         value={value}
+//         onChange={handleDateChange}
+//         renderInput={(params) => <TextField {...params} />}
+//       />
+//     </LocalizationProvider>
+//   );
+// }

src/components/Dropdown.js

@@ -23,7 +23,7 @@ export default function Dropdown(props) {
 
   useEffect(() => {
     axios
-      .get('https://pm-cinch-backend.vercel.app/organizations')
+      .post('https://pm-cinch-backend.vercel.app/projects')
       .then((response) => {
         console.log(response.data);
         setOrgs(response.data);

src/components/Login.js

@@ -49,11 +49,16 @@ const Login = (props) => {
         //? Setting token using props from app.js
         console.log(response.data.token);
         const payload = response.data.token;
+        const userInfo = response.data;
+        console.log(userInfo);
         props.addToken(payload);
+        props.addUser(user.info);
         // # If successful...
         //? set cookie here
         //? set loggedIn = true and max-age = 60*1000 (one minute)
-        document.cookie = 'loggedIn=true;max-age=60*1000';
+        response.data.token
+          ? (document.cookie = 'loggedIn=true;max-age=60*1000')
+          : response.send('Invalid Username or Password');
         navigate('/');
       });
     document.cookie = 'loggedIn=true;max-age=60*1000';

src/components/Navigation.js

@@ -25,7 +25,9 @@ const Navigation = () => {
             </Link>
           </li>
           <li className='nav-list-item'>
-            <Typography style={{ color: 'white' }}>New Project</Typography>
+            <Link to='/newProject'>
+              <Typography style={{ color: 'white' }}>New Project</Typography>
+            </Link>
           </li>
           <li
             className='nav-list-item'