Update deadline picker

client/package.json

@@ -1,51 +1,54 @@
-{
-  "name": "client",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "@material-ui/core": "^4.1.3",
-    "@material-ui/icons": "^4.9.1",
-    "@stripe/react-stripe-js": "^1.1.2",
-    "@stripe/stripe-js": "^1.11.0",
-    "axios": "^0.21.0",
-    "clsx": "^1.1.1",
-    "d3-format": "^2.0.0",
-    "date-fns": "^2.16.1",
-    "dayjs": "^1.9.6",
-    "immutable": "^4.0.0-rc.12",
-    "is-empty": "^1.2.0",
-    "react": "^16.13.1",
-    "react-countup": "^4.3.3",
-    "react-dom": "^16.13.1",
-    "react-dropzone": "^11.2.4",
-    "react-material-ui-carousel": "^2.1.1",
-    "react-router-dom": "^5.1.2",
-    "react-scripts": "^4.0.0",
-    "socket.io-client": "^3.0.3"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
-  "proxy": "http://127.0.0.1:3001/",
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "devDependencies": {
-    "prettier": "^2.1.2"
-  }
-}
+{
+  "name": "client",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@date-io/dayjs": "^1.3.13",
+    "@material-ui/core": "^4.1.3",
+    "@material-ui/icons": "^4.9.1",
+    "@material-ui/pickers": "^3.2.10",
+    "@stripe/react-stripe-js": "^1.1.2",
+    "@stripe/stripe-js": "^1.11.0",
+    "axios": "^0.21.0",
+    "clsx": "^1.1.1",
+    "d3-format": "^2.0.0",
+    "date-fns": "^2.16.1",
+    "dayjs": "^1.9.6",
+    "immutable": "^4.0.0-rc.12",
+    "is-empty": "^1.2.0",
+    "react": "^16.13.1",
+    "react-countup": "^4.3.3",
+    "react-datepicker": "^3.3.0",
+    "react-dom": "^16.13.1",
+    "react-dropzone": "^11.2.4",
+    "react-material-ui-carousel": "^2.1.1",
+    "react-router-dom": "^5.1.2",
+    "react-scripts": "^4.0.0",
+    "socket.io-client": "^3.0.3"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "proxy": "http://127.0.0.1:3001/",
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "prettier": "^2.1.2"
+  }
+}

client/src/components/IndividualProject.js

@@ -12,6 +12,7 @@ import {
 import Carousel from 'react-material-ui-carousel';
 import CountUp from 'react-countup';
 import { format as d3format } from 'd3-format';
+import dayjs from 'dayjs';
 
 //components
 import Button from '../components/Button';
@@ -30,6 +31,9 @@ import { userState } from '../provider/UserContext';
 //react router
 import { useHistory } from 'react-router-dom';
 
+import relativeTime from 'dayjs/plugin/relativeTime';
+dayjs.extend(relativeTime);
+
 const useStyles = makeStyles((theme) => ({
   avatar: {
     height: '70px',
@@ -57,6 +61,9 @@ const useStyles = makeStyles((theme) => ({
     margin: theme.spacing(2, 2),
     padding: theme.spacing(2, 2),
   },
+  deadline: {
+    fontSize: '22px'
+  },
   divider: {
     width: '1px',
     height: '100px',
@@ -129,6 +136,7 @@ const IndividualProject = ({ project }) => {
     title,
     subtitle,
     description,
+    deadline,
     images,
     fundingGoal,
     investors,
@@ -153,7 +161,7 @@ const IndividualProject = ({ project }) => {
     // create a new conversation or load the existing conversation
     const res = await createOrLoadConversation(user._id, owner, payload);
     if (res === true) {
-      history.push({ pathname: `/messages`, state: { owner } });
+      history.push({ pathname: `/messages` });
     } else {
       console.log(res);
     }
@@ -248,7 +256,7 @@ const IndividualProject = ({ project }) => {
               </Grid>
               <Grid item xs={5} className={classes.stats}>
                 <Typography component="h1" variant="h4">
-                  44
+                  {dayjs(deadline).diff(new Date(), 'day')}
                 </Typography>
                 <Typography variant="subtitle1">days to go</Typography>
               </Grid>
@@ -261,12 +269,12 @@ const IndividualProject = ({ project }) => {
                 alt="User"
                 src={avatar}
                 className={classes.avatar}
-                onClick={() => history.push(`/users/${owner}`)}
+                onClick={() => history.push(`/users/${owner._id}`)}
               />
               <Typography
                 element="h1"
                 className={classes.userName}
-                onClick={() => history.push(`/users/${owner}`)}
+                onClick={() => history.push(`/users/${owner._id}`)}
               >
                 {owner.name}
               </Typography>

client/src/components/Project.js

@@ -1,86 +1,90 @@
-import React from 'react';
-import { Box, makeStyles, Typography } from '@material-ui/core';
-import { format as d3Format } from 'd3-format';
-import CountUp from 'react-countup';
-
-import TextBubble from './TextBubble';
-
-const useStyles = makeStyles((theme) => ({
-  container: {
-    backgroundColor: '#fff',
-    marginBottom: theme.spacing(4),
-    boxShadow:
-      '0 0px 16.5px rgba(0, 0, 0, 0.08), 0 0px 132px rgba(0, 0, 0, 0.16)',
-  },
-  footer: {
-    color: '#ccc',
-    fontSize: '14px',
-    marginTop: theme.spacing(1),
-  },
-  funding: {
-    fontSize: '18px',
-    fontWeight: '600',
-    margin: theme.spacing(1, 0),
-  },
-  goal: {
-    fontSize: '16px',
-    fontWeight: '400',
-    color: '#ccc',
-  },
-  img: {
-    backgroundSize: 'cover',
-    backgroundPosition: 'center',
-    height: '220px',
-    padding: theme.spacing(1.5),
-  },
-  meta: {
-    padding: theme.spacing(2.5, 3.5),
-  },
-  metaHeader: {
-    fontSize: '22px',
-    fontWeight: '600',
-  },
-}));
-const Project = ({ data, gridSize }) => {
-  const format = d3Format(',');
-  const classes = useStyles();
-  const { fundingGoal, images, industry, title, investors } = data;
-  const totalFunds = investors
-    .map((a) => a.amountFunded)
-    .reduce((acc, amountFunded) => acc + amountFunded, 0);
-  return (
-    <Box className={classes.container}>
-      <div
-        style={{ backgroundImage: `url(${images[0]})` }}
-        className={classes.img}
-      >
-        <TextBubble>{industry}</TextBubble>
-      </div>
-      <Box className={classes.meta}>
-        <Typography element="h2" className={classes.metaHeader}>
-          {title}
-        </Typography>
-        <Typography element="h3" className={classes.funding}>
-          {totalFunds ? (
-            <CountUp
-              start={0}
-              end={totalFunds / 100}
-              duration={1}
-              separator=","
-            />
-          ) : (
-            0
-          )}
-          <span className={classes.goal}> / {format(fundingGoal)}</span>
-        </Typography>
-        <Typography element="h4" className={classes.footer}>
-          Equity exchange: 10%
-          <span style={{ margin: '0 16px' }}>|</span>
-          12 days to go
-        </Typography>
-      </Box>
-    </Box>
-  );
-};
-
-export default Project;
+import React from 'react';
+import { Box, makeStyles, Typography } from '@material-ui/core';
+import { format as d3Format } from 'd3-format';
+import CountUp from 'react-countup';
+import dayjs from 'dayjs';
+
+import TextBubble from './TextBubble';
+
+import relativeTime from 'dayjs/plugin/relativeTime';
+dayjs.extend(relativeTime);
+
+const useStyles = makeStyles((theme) => ({
+  container: {
+    backgroundColor: '#fff',
+    marginBottom: theme.spacing(4),
+    boxShadow:
+      '0 0px 16.5px rgba(0, 0, 0, 0.08), 0 0px 132px rgba(0, 0, 0, 0.16)',
+  },
+  footer: {
+    color: '#ccc',
+    fontSize: '14px',
+    marginTop: theme.spacing(1),
+  },
+  funding: {
+    fontSize: '18px',
+    fontWeight: '600',
+    margin: theme.spacing(1, 0),
+  },
+  goal: {
+    fontSize: '16px',
+    fontWeight: '400',
+    color: '#ccc',
+  },
+  img: {
+    backgroundSize: 'cover',
+    backgroundPosition: 'center',
+    height: '220px',
+    padding: theme.spacing(1.5),
+  },
+  meta: {
+    padding: theme.spacing(2.5, 3.5),
+  },
+  metaHeader: {
+    fontSize: '22px',
+    fontWeight: '600',
+  },
+}));
+const Project = ({ data, gridSize }) => {
+  const format = d3Format(',');
+  const classes = useStyles();
+  const { fundingGoal, images, industry, title, investors, deadline } = data;
+  const totalFunds = investors
+    .map((a) => a.amountFunded)
+    .reduce((acc, amountFunded) => acc + amountFunded, 0);
+  return (
+    <Box className={classes.container}>
+      <div
+        style={{ backgroundImage: `url(${images[0]})` }}
+        className={classes.img}
+      >
+        <TextBubble>{industry}</TextBubble>
+      </div>
+      <Box className={classes.meta}>
+        <Typography element="h2" className={classes.metaHeader}>
+          {title}
+        </Typography>
+        <Typography element="h3" className={classes.funding}>
+          {totalFunds ? (
+            <CountUp
+              start={0}
+              end={totalFunds / 100}
+              duration={1}
+              separator=","
+            />
+          ) : (
+            0
+          )}
+          <span className={classes.goal}> / {format(fundingGoal)}</span>
+        </Typography>
+        <Typography element="h4" className={classes.footer}>
+          Equity exchange: 10%
+          <span style={{ margin: '0 16px' }}>|</span>
+          {dayjs(deadline).diff(new Date(), 'day')} days to go
+        </Typography>
+      </Box>
+    </Box>
+  );
+};
+
+export default Project;