Post duration Component was created and addition nav pages are created for share a need and make an offer

client/package.json

@@ -1,86 +1,87 @@
 {
-	"name": "client",
-	"version": "0.1.0",
-	"private": true,
-	"dependencies": {
-		"@emotion/react": "^11.11.0",
-		"@emotion/styled": "^11.11.0",
-		"@hookform/resolvers": "^2.9.7",
-		"@mui/base": "^5.0.0-beta.2",
-		"@mui/icons-material": "^5.11.16",
-		"@mui/material": "^5.13.2",
-		"@testing-library/jest-dom": "^5.11.4",
-		"@testing-library/react": "^11.1.0",
-		"@testing-library/user-event": "^12.1.10",
-		"@types/jest": "^26.0.23",
-		"@types/jsonwebtoken": "^8.5.4",
-		"@types/node": "^15.6.0",
-		"@types/react-dom": "^18.2.0",
-		"@types/react-router-dom": "^5.1.7",
-		"axios": "^0.26.1",
-		"classname": "^0.0.0",
-		"classnames": "^2.5.1",
-		"jest": "26.6.0",
-		"jsonwebtoken": "^9.0.0",
-		"react": "^18.2.0",
-		"react-dom": "^18.2.0",
-		"react-error-boundary": "^4.0.10",
-		"react-hook-form": "^7.34.0",
-		"react-input-mask": "^3.0.0-alpha.2",
-		"react-query": "^3.39.3",
-		"react-router-dom": "^5.2.0",
-		"socket.io-client": "^4.5.1",
-		"tss-react": "^4.8.4",
-		"typescript": "^4.2.4",
-		"web-vitals": "^1.0.1",
-		"yup": "^0.32.11"
-	},
-	"proxy": "http://localhost:3001",
-	"scripts": {
-		"start": "react-scripts start",
-		"build": "react-scripts build",
-		"test": "react-scripts test --watchAll=false",
-		"eject": "react-scripts eject",
-		"lint": "eslint ./src/**/*.{ts,tsx}",
-		"checks": "npm run test && npm run lint",
-		"format": "prettier --write './src/**/*.{ts,tsx}' --config ../.prettierrc",
-		"prepare": "cd .. && husky install && cd client"
-	},
-	"browserslist": {
-		"production": [
-			">0.2%",
-			"not dead",
-			"not op_mini all"
-		],
-		"development": [
-			"last 1 chrome version",
-			"last 1 firefox version",
-			"last 1 safari version"
-		]
-	},
-	"devDependencies": {
-		"@types/classnames": "^2.3.1",
-		"@types/jest": "^26.0.23",
-		"@types/jsonwebtoken": "^8.5.4",
-		"@types/node": "^15.6.0",
-		"@types/react": "^18.2.0",
-		"@types/react-dom": "^18.2.0",
-		"@types/react-input-mask": "^3.0.2",
-		"@types/react-router-dom": "^5.1.7",
-		"@typescript-eslint/eslint-plugin": "^5.5.0",
-		"@typescript-eslint/parser": "^5.5.0",
-		"eslint": "^8.0.0",
-		"eslint-config-prettier": "^8.3.0",
-		"eslint-config-react-app": "^7.0.1",
-		"eslint-plugin-prettier": "^4.0.0",
-		"husky": "^7.0.4",
-		"lint-staged": "^12.1.4",
-		"prettier": "^2.5.1",
-		"react-scripts": "^5.0.1"
-	},
-	"lint-staged": {
-		"./src/**/*.{ts,tsx}": [
-			"eslint --fix"
-		]
-	}
+  "name": "client",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@emotion/react": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
+    "@hookform/resolvers": "^2.9.7",
+    "@mui/base": "^5.0.0-beta.2",
+    "@mui/icons-material": "^5.11.16",
+    "@mui/material": "^5.13.2",
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.1.0",
+    "@testing-library/user-event": "^12.1.10",
+    "@types/jest": "^26.0.23",
+    "@types/jsonwebtoken": "^8.5.4",
+    "@types/node": "^15.6.0",
+    "@types/react-dom": "^18.2.0",
+    "@types/react-router-dom": "^5.1.7",
+    "axios": "^0.26.1",
+    "classname": "^0.0.0",
+    "classnames": "^2.5.1",
+    "date-fns": "^3.6.0",
+    "jest": "26.6.0",
+    "jsonwebtoken": "^9.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-error-boundary": "^4.0.10",
+    "react-hook-form": "^7.34.0",
+    "react-input-mask": "^3.0.0-alpha.2",
+    "react-query": "^3.39.3",
+    "react-router-dom": "^5.2.0",
+    "socket.io-client": "^4.5.1",
+    "tss-react": "^4.8.4",
+    "typescript": "^4.2.4",
+    "web-vitals": "^1.0.1",
+    "yup": "^0.32.11"
+  },
+  "proxy": "http://localhost:3001",
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --watchAll=false",
+    "eject": "react-scripts eject",
+    "lint": "eslint ./src/**/*.{ts,tsx}",
+    "checks": "npm run test && npm run lint",
+    "format": "prettier --write './src/**/*.{ts,tsx}' --config ../.prettierrc",
+    "prepare": "cd .. && husky install && cd client"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@types/classnames": "^2.3.1",
+    "@types/jest": "^26.0.23",
+    "@types/jsonwebtoken": "^8.5.4",
+    "@types/node": "^15.6.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@types/react-input-mask": "^3.0.2",
+    "@types/react-router-dom": "^5.1.7",
+    "@typescript-eslint/eslint-plugin": "^5.5.0",
+    "@typescript-eslint/parser": "^5.5.0",
+    "eslint": "^8.0.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-config-react-app": "^7.0.1",
+    "eslint-plugin-prettier": "^4.0.0",
+    "husky": "^7.0.4",
+    "lint-staged": "^12.1.4",
+    "prettier": "^2.5.1",
+    "react-scripts": "^5.0.1"
+  },
+  "lint-staged": {
+    "./src/**/*.{ts,tsx}": [
+      "eslint --fix"
+    ]
+  }
 }

client/src/routes/routes.ts

@@ -11,6 +11,8 @@ import SignupNonProfit from '../views/SignupNonProfit';
 import Inbox from '../views/Inbox';
 import User from '../views/User';
 import MakePost from '../views/MakePost';
+import ShareNeed from '../views/ShareNeed';
+import MakeOffer from '../views/MakeOffer';
 import ActionForm from '../views/ActionForm';
 import SearchResults from '../views/SearchResults';
 import Asset from '../views/Asset';
@@ -123,6 +125,16 @@ const routes: RouteMap = {
     roles: [],
     path: '/make-a-post',
   },
+  ShareNeed: {
+    component: ShareNeed,
+    roles: [],
+    path: '/share-a-need',
+  },
+  MakeOffer: {
+    component: MakeOffer,
+    roles: [],
+    path: '/make-an-offer',
+  },
   ActionForm: {
     component: ActionForm,
     roles: [],

client/src/views/Main.tsx

@@ -19,6 +19,8 @@ const {
   Inbox,
   User,
   MakePost,
+  ShareNeed,
+  MakeOffer,
   ActionForm,
   Assets,
   Asset,
@@ -67,6 +69,12 @@ function Main() {
         {/*Make a post Route */}
         <Route exact path={MakePost.path} component={MakePost.component} />
 
+        {/*Share a Need */}
+        <Route exact path={ShareNeed.path} component={ShareNeed.component} />
+
+        {/*Make an Offer */}
+        <Route exact path={MakeOffer.path} component={MakeOffer.component} />
+
         {/* Private Routes */}
         <Route exact path={User.path} render={renderPrivateRoute(User.roles, User.component)} />
 

client/src/views/MakeOffer.tsx

@@ -0,0 +1,5 @@
+function MakeOffer() {
+  return <h1>Make an Offer</h1>;
+}
+
+export default MakeOffer;

client/src/views/MakePost.tsx

@@ -1,18 +1,28 @@
 import React, { useState } from 'react';
 import { Grid, Typography, Card, Button } from '@mui/material';
+import { useHistory } from 'react-router-dom';
 
 const MakePost = () => {
   const [selected, setSelected] = useState<string | null>(null);
   const [step, setStep] = useState(1);
+  const history = useHistory();
 
   const handleCardClick = (id: string) => {
     setSelected(id);
   };
 
   const handleNextClick = () => {
     if (step === 1 && selected) {
-      setStep(2);
-      setSelected(null);
+      if (selected === 'goods' || selected === 'skills') {
+        setStep(2);
+        setSelected(null);
+      }
+    } else if (step === 2 && selected) {
+      if (selected === 'need') {
+        history.push('/share-a-need');
+      } else if (selected === 'offer') {
+        history.push('/make-an-offer');
+      }
     }
   };
 

client/src/views/PostDuration.tsx

@@ -0,0 +1,58 @@
+import React, { useState } from 'react';
+import { FormControl, Select, MenuItem, Typography, Box } from '@mui/material';
+import { SelectChangeEvent } from '@mui/material/Select';
+import { format, add, differenceInDays } from 'date-fns';
+
+const calculateFormattedDate = (weeks: number) => {
+  const currentDate = new Date();
+  const targetDate = add(currentDate, { weeks });
+  const formattedDate = format(targetDate, 'MMM dd, yyyy');
+  const daysRemaining = differenceInDays(targetDate, currentDate);
+
+  return `${formattedDate} (${daysRemaining} days)`;
+};
+
+const PostDuration: React.FC = () => {
+  const [selectedWeeks, setSelectedWeeks] = useState<number>(3);
+  const [formattedDate, setFormattedDate] = useState<string>(calculateFormattedDate(3));
+
+  const handleChange = (event: SelectChangeEvent<number>) => {
+    const weeks = event.target.value as number;
+    setSelectedWeeks(weeks);
+    setFormattedDate(calculateFormattedDate(weeks));
+  };
+
+  return (
+    <Box sx={{ width: 300, margin: '0 auto' }}>
+      <Typography variant="h6" component="div">
+        Expiration Date
+      </Typography>
+      <hr />
+      <FormControl fullWidth margin="normal">
+        <Select
+          id="duration-select"
+          value={selectedWeeks}
+          onChange={handleChange}
+          displayEmpty
+          renderValue={() => formattedDate}
+        >
+          <MenuItem value={1}>1 week</MenuItem>
+          <MenuItem value={2}>2 weeks</MenuItem>
+          <MenuItem value={3}>3 weeks</MenuItem>
+          <MenuItem value={4}>1 month</MenuItem>
+          <MenuItem value={8}>2 months</MenuItem>
+          <MenuItem value={12}>3 months</MenuItem>
+          <MenuItem value={16}>4 months</MenuItem>
+          <MenuItem value={20}>5 months</MenuItem>
+          <MenuItem value={24}>6 months</MenuItem>
+        </Select>
+      </FormControl>
+      <Typography variant="body2" color="textSecondary">
+        Note: If you would like to later extend the duration of your post after it is published, you
+        can do so by viewing the active post and selecting "Edit Expiration Date".
+      </Typography>
+    </Box>
+  );
+};
+
+export default PostDuration;