Skip to content

Commit 22248cf

Browse files
KalyanMatta-SDEKalyanMatta-SDE
committed
post duration compoent was created
1 parent 918b356 commit 22248cf

File tree

8 files changed

+38026
-37910
lines changed

8 files changed

+38026
-37910
lines changed

‎client/package-lock.json

+37,835-37,824
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎client/package.json

+85-84
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,87 @@
11
{
2-
"name": "client",
3-
"version": "0.1.0",
4-
"private": true,
5-
"dependencies": {
6-
"@emotion/react": "^11.11.0",
7-
"@emotion/styled": "^11.11.0",
8-
"@hookform/resolvers": "^2.9.7",
9-
"@mui/base": "^5.0.0-beta.2",
10-
"@mui/icons-material": "^5.11.16",
11-
"@mui/material": "^5.13.2",
12-
"@testing-library/jest-dom": "^5.11.4",
13-
"@testing-library/react": "^11.1.0",
14-
"@testing-library/user-event": "^12.1.10",
15-
"@types/jest": "^26.0.23",
16-
"@types/jsonwebtoken": "^8.5.4",
17-
"@types/node": "^15.6.0",
18-
"@types/react-dom": "^18.2.0",
19-
"@types/react-router-dom": "^5.1.7",
20-
"axios": "^0.26.1",
21-
"classname": "^0.0.0",
22-
"classnames": "^2.5.1",
23-
"jest": "26.6.0",
24-
"jsonwebtoken": "^9.0.0",
25-
"react": "^18.2.0",
26-
"react-dom": "^18.2.0",
27-
"react-error-boundary": "^4.0.10",
28-
"react-hook-form": "^7.34.0",
29-
"react-input-mask": "^3.0.0-alpha.2",
30-
"react-query": "^3.39.3",
31-
"react-router-dom": "^5.2.0",
32-
"socket.io-client": "^4.5.1",
33-
"tss-react": "^4.8.4",
34-
"typescript": "^4.2.4",
35-
"web-vitals": "^1.0.1",
36-
"yup": "^0.32.11"
37-
},
38-
"proxy": "http://localhost:3001",
39-
"scripts": {
40-
"start": "react-scripts start",
41-
"build": "react-scripts build",
42-
"test": "react-scripts test --watchAll=false",
43-
"eject": "react-scripts eject",
44-
"lint": "eslint ./src/**/*.{ts,tsx}",
45-
"checks": "npm run test && npm run lint",
46-
"format": "prettier --write './src/**/*.{ts,tsx}' --config ../.prettierrc",
47-
"prepare": "cd .. && husky install && cd client"
48-
},
49-
"browserslist": {
50-
"production": [
51-
">0.2%",
52-
"not dead",
53-
"not op_mini all"
54-
],
55-
"development": [
56-
"last 1 chrome version",
57-
"last 1 firefox version",
58-
"last 1 safari version"
59-
]
60-
},
61-
"devDependencies": {
62-
"@types/classnames": "^2.3.1",
63-
"@types/jest": "^26.0.23",
64-
"@types/jsonwebtoken": "^8.5.4",
65-
"@types/node": "^15.6.0",
66-
"@types/react": "^18.2.0",
67-
"@types/react-dom": "^18.2.0",
68-
"@types/react-input-mask": "^3.0.2",
69-
"@types/react-router-dom": "^5.1.7",
70-
"@typescript-eslint/eslint-plugin": "^5.5.0",
71-
"@typescript-eslint/parser": "^5.5.0",
72-
"eslint": "^8.0.0",
73-
"eslint-config-prettier": "^8.3.0",
74-
"eslint-config-react-app": "^7.0.1",
75-
"eslint-plugin-prettier": "^4.0.0",
76-
"husky": "^7.0.4",
77-
"lint-staged": "^12.1.4",
78-
"prettier": "^2.5.1",
79-
"react-scripts": "^5.0.1"
80-
},
81-
"lint-staged": {
82-
"./src/**/*.{ts,tsx}": [
83-
"eslint --fix"
84-
]
85-
}
2+
"name": "client",
3+
"version": "0.1.0",
4+
"private": true,
5+
"dependencies": {
6+
"@emotion/react": "^11.11.0",
7+
"@emotion/styled": "^11.11.0",
8+
"@hookform/resolvers": "^2.9.7",
9+
"@mui/base": "^5.0.0-beta.2",
10+
"@mui/icons-material": "^5.11.16",
11+
"@mui/material": "^5.13.2",
12+
"@testing-library/jest-dom": "^5.11.4",
13+
"@testing-library/react": "^11.1.0",
14+
"@testing-library/user-event": "^12.1.10",
15+
"@types/jest": "^26.0.23",
16+
"@types/jsonwebtoken": "^8.5.4",
17+
"@types/node": "^15.6.0",
18+
"@types/react-dom": "^18.2.0",
19+
"@types/react-router-dom": "^5.1.7",
20+
"axios": "^0.26.1",
21+
"classname": "^0.0.0",
22+
"classnames": "^2.5.1",
23+
"date-fns": "^3.6.0",
24+
"jest": "26.6.0",
25+
"jsonwebtoken": "^9.0.0",
26+
"react": "^18.2.0",
27+
"react-dom": "^18.2.0",
28+
"react-error-boundary": "^4.0.10",
29+
"react-hook-form": "^7.34.0",
30+
"react-input-mask": "^3.0.0-alpha.2",
31+
"react-query": "^3.39.3",
32+
"react-router-dom": "^5.2.0",
33+
"socket.io-client": "^4.5.1",
34+
"tss-react": "^4.8.4",
35+
"typescript": "^4.2.4",
36+
"web-vitals": "^1.0.1",
37+
"yup": "^0.32.11"
38+
},
39+
"proxy": "http://localhost:3001",
40+
"scripts": {
41+
"start": "react-scripts start",
42+
"build": "react-scripts build",
43+
"test": "react-scripts test --watchAll=false",
44+
"eject": "react-scripts eject",
45+
"lint": "eslint ./src/**/*.{ts,tsx}",
46+
"checks": "npm run test && npm run lint",
47+
"format": "prettier --write './src/**/*.{ts,tsx}' --config ../.prettierrc",
48+
"prepare": "cd .. && husky install && cd client"
49+
},
50+
"browserslist": {
51+
"production": [
52+
">0.2%",
53+
"not dead",
54+
"not op_mini all"
55+
],
56+
"development": [
57+
"last 1 chrome version",
58+
"last 1 firefox version",
59+
"last 1 safari version"
60+
]
61+
},
62+
"devDependencies": {
63+
"@types/classnames": "^2.3.1",
64+
"@types/jest": "^26.0.23",
65+
"@types/jsonwebtoken": "^8.5.4",
66+
"@types/node": "^15.6.0",
67+
"@types/react": "^18.2.0",
68+
"@types/react-dom": "^18.2.0",
69+
"@types/react-input-mask": "^3.0.2",
70+
"@types/react-router-dom": "^5.1.7",
71+
"@typescript-eslint/eslint-plugin": "^5.5.0",
72+
"@typescript-eslint/parser": "^5.5.0",
73+
"eslint": "^8.0.0",
74+
"eslint-config-prettier": "^8.3.0",
75+
"eslint-config-react-app": "^7.0.1",
76+
"eslint-plugin-prettier": "^4.0.0",
77+
"husky": "^7.0.4",
78+
"lint-staged": "^12.1.4",
79+
"prettier": "^2.5.1",
80+
"react-scripts": "^5.0.1"
81+
},
82+
"lint-staged": {
83+
"./src/**/*.{ts,tsx}": [
84+
"eslint --fix"
85+
]
86+
}
8687
}

‎client/src/routes/routes.ts

+12
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ import SignupNonProfit from '../views/SignupNonProfit';
1111
import Inbox from '../views/Inbox';
1212
import User from '../views/User';
1313
import MakePost from '../views/MakePost';
14+
import ShareNeed from '../views/ShareNeed';
15+
import MakeOffer from '../views/MakeOffer';
1416
import ActionForm from '../views/ActionForm';
1517
import SearchResults from '../views/SearchResults';
1618
import Asset from '../views/Asset';
@@ -123,6 +125,16 @@ const routes: RouteMap = {
123125
roles: [],
124126
path: '/make-a-post',
125127
},
128+
ShareNeed: {
129+
component: ShareNeed,
130+
roles: [],
131+
path: '/share-a-need',
132+
},
133+
MakeOffer: {
134+
component: MakeOffer,
135+
roles: [],
136+
path: '/make-an-offer',
137+
},
126138
ActionForm: {
127139
component: ActionForm,
128140
roles: [],

‎client/src/views/Main.tsx

+8
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ const {
1919
Inbox,
2020
User,
2121
MakePost,
22+
ShareNeed,
23+
MakeOffer,
2224
ActionForm,
2325
Assets,
2426
Asset,
@@ -67,6 +69,12 @@ function Main() {
6769
{/*Make a post Route */}
6870
<Route exact path={MakePost.path} component={MakePost.component} />
6971

72+
{/*Share a Need */}
73+
<Route exact path={ShareNeed.path} component={ShareNeed.component} />
74+
75+
{/*Make an Offer */}
76+
<Route exact path={MakeOffer.path} component={MakeOffer.component} />
77+
7078
{/* Private Routes */}
7179
<Route exact path={User.path} render={renderPrivateRoute(User.roles, User.component)} />
7280

‎client/src/views/MakeOffer.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
function MakeOffer() {
2+
return <h1>Make an Offer</h1>;
3+
}
4+
5+
export default MakeOffer;

‎client/src/views/MakePost.tsx

+12-2
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,28 @@
11
import React, { useState } from 'react';
22
import { Grid, Typography, Card, Button } from '@mui/material';
3+
import { useHistory } from 'react-router-dom';
34

45
const MakePost = () => {
56
const [selected, setSelected] = useState<string | null>(null);
67
const [step, setStep] = useState(1);
8+
const history = useHistory();
79

810
const handleCardClick = (id: string) => {
911
setSelected(id);
1012
};
1113

1214
const handleNextClick = () => {
1315
if (step === 1 && selected) {
14-
setStep(2);
15-
setSelected(null);
16+
if (selected === 'goods' || selected === 'skills') {
17+
setStep(2);
18+
setSelected(null);
19+
}
20+
} else if (step === 2 && selected) {
21+
if (selected === 'need') {
22+
history.push('/share-a-need');
23+
} else if (selected === 'offer') {
24+
history.push('/make-an-offer');
25+
}
1626
}
1727
};
1828

‎client/src/views/PostDuration.tsx

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import React, { useState } from 'react';
2+
import { FormControl, Select, MenuItem, Typography, Box } from '@mui/material';
3+
import { SelectChangeEvent } from '@mui/material/Select';
4+
import { format, add, differenceInDays } from 'date-fns';
5+
6+
const calculateFormattedDate = (weeks: number) => {
7+
const currentDate = new Date();
8+
const targetDate = add(currentDate, { weeks });
9+
const formattedDate = format(targetDate, 'MMM dd, yyyy');
10+
const daysRemaining = differenceInDays(targetDate, currentDate);
11+
12+
return `${formattedDate} (${daysRemaining} days)`;
13+
};
14+
15+
const PostDuration: React.FC = () => {
16+
const [selectedWeeks, setSelectedWeeks] = useState<number>(3);
17+
const [formattedDate, setFormattedDate] = useState<string>(calculateFormattedDate(3));
18+
19+
const handleChange = (event: SelectChangeEvent<number>) => {
20+
const weeks = event.target.value as number;
21+
setSelectedWeeks(weeks);
22+
setFormattedDate(calculateFormattedDate(weeks));
23+
};
24+
25+
return (
26+
<Box sx={{ width: 300, margin: '0 auto' }}>
27+
<Typography variant="h6" component="div">
28+
Expiration Date
29+
</Typography>
30+
<hr />
31+
<FormControl fullWidth margin="normal">
32+
<Select
33+
id="duration-select"
34+
value={selectedWeeks}
35+
onChange={handleChange}
36+
displayEmpty
37+
renderValue={() => formattedDate}
38+
>
39+
<MenuItem value={1}>1 week</MenuItem>
40+
<MenuItem value={2}>2 weeks</MenuItem>
41+
<MenuItem value={3}>3 weeks</MenuItem>
42+
<MenuItem value={4}>1 month</MenuItem>
43+
<MenuItem value={8}>2 months</MenuItem>
44+
<MenuItem value={12}>3 months</MenuItem>
45+
<MenuItem value={16}>4 months</MenuItem>
46+
<MenuItem value={20}>5 months</MenuItem>
47+
<MenuItem value={24}>6 months</MenuItem>
48+
</Select>
49+
</FormControl>
50+
<Typography variant="body2" color="textSecondary">
51+
Note: If you would like to later extend the duration of your post after it is published, you
52+
can do so by viewing the active post and selecting "Edit Expiration Date".
53+
</Typography>
54+
</Box>
55+
);
56+
};
57+
58+
export default PostDuration;

‎client/src/views/ShareNeed.tsx

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import PostDuration from './PostDuration';
2+
function ShareNeed() {
3+
return (
4+
<>
5+
<h1>Share a need</h1>
6+
<PostDuration />
7+
</>
8+
);
9+
}
10+
11+
export default ShareNeed;

0 commit comments

Comments
 (0)