Implement signup sessions fetch
parent
ad28e29e85
commit
703408fc12
|
|
@ -11,10 +11,9 @@
|
|||
"@emotion/react": "^11.14.0",
|
||||
"@emotion/styled": "^11.14.1",
|
||||
"@mui/material": "^7.3.5",
|
||||
"@mui/x-date-pickers": "^8.19.0",
|
||||
"axios": "^1.13.2",
|
||||
"dayjs": "^1.11.19",
|
||||
"react": "^19.2.0",
|
||||
"react-async": "^10.0.1",
|
||||
"react-dom": "^19.2.0",
|
||||
"react-intl": "^7.1.14",
|
||||
"react-router": "^7.9.6"
|
||||
|
|
@ -1075,103 +1074,6 @@
|
|||
"integrity": "sha512-x3Ax3kNSMIIkyVYhWPyO09bu0uttcAIoecO/um/rKGQ4EltYWVYtyiGkS/3xMynrbVQdS69Jhlv8FXUEZehlzA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@mui/x-date-pickers": {
|
||||
"version": "8.19.0",
|
||||
"resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-8.19.0.tgz",
|
||||
"integrity": "sha512-TQ4FsGUsiGJVs+Ie4q7nHXUmFqZADXL/1hVtZpOKsdr3WQXwpX7C5YmeakZGFR2NZnuv4snFj+WTee3kgyFbyQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.28.4",
|
||||
"@mui/utils": "^7.3.5",
|
||||
"@mui/x-internals": "8.19.0",
|
||||
"@types/react-transition-group": "^4.4.12",
|
||||
"clsx": "^2.1.1",
|
||||
"prop-types": "^15.8.1",
|
||||
"react-transition-group": "^4.4.5"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/mui-org"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@emotion/react": "^11.9.0",
|
||||
"@emotion/styled": "^11.8.1",
|
||||
"@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0",
|
||||
"@mui/system": "^5.15.14 || ^6.0.0 || ^7.0.0",
|
||||
"date-fns": "^2.25.0 || ^3.2.0 || ^4.0.0",
|
||||
"date-fns-jalali": "^2.13.0-0 || ^3.2.0-0 || ^4.0.0-0",
|
||||
"dayjs": "^1.10.7",
|
||||
"luxon": "^3.0.2",
|
||||
"moment": "^2.29.4",
|
||||
"moment-hijri": "^2.1.2 || ^3.0.0",
|
||||
"moment-jalaali": "^0.7.4 || ^0.8.0 || ^0.9.0 || ^0.10.0",
|
||||
"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||
"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@emotion/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@emotion/styled": {
|
||||
"optional": true
|
||||
},
|
||||
"date-fns": {
|
||||
"optional": true
|
||||
},
|
||||
"date-fns-jalali": {
|
||||
"optional": true
|
||||
},
|
||||
"dayjs": {
|
||||
"optional": true
|
||||
},
|
||||
"luxon": {
|
||||
"optional": true
|
||||
},
|
||||
"moment": {
|
||||
"optional": true
|
||||
},
|
||||
"moment-hijri": {
|
||||
"optional": true
|
||||
},
|
||||
"moment-jalaali": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@mui/x-date-pickers/node_modules/clsx": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
|
||||
"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/@mui/x-internals": {
|
||||
"version": "8.19.0",
|
||||
"resolved": "https://registry.npmjs.org/@mui/x-internals/-/x-internals-8.19.0.tgz",
|
||||
"integrity": "sha512-mMmiyJAN5fW27srXJjhXhXJa+w2xGO45rwcjws6OQc9rdXGdJqRXhBwJd+OT7J1xwSdFIIUhjZRTz1KAfCSGBg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.28.4",
|
||||
"@mui/utils": "^7.3.5",
|
||||
"reselect": "^5.1.1",
|
||||
"use-sync-external-store": "^1.6.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/mui-org"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@napi-rs/wasm-runtime": {
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.0.7.tgz",
|
||||
|
|
@ -2253,30 +2155,6 @@
|
|||
"integrity": "sha512-D80T+tiqkd/8B0xNlbstWDG4x6aqVfO52+OlSUNIdkTvmNw0uQpJLeos2J/2XvpyidAFuTPmpad+tUxLndwj6g==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/date-fns": {
|
||||
"version": "2.30.0",
|
||||
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
|
||||
"integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.21.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.11"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/date-fns"
|
||||
}
|
||||
},
|
||||
"node_modules/dayjs": {
|
||||
"version": "1.11.19",
|
||||
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.19.tgz",
|
||||
"integrity": "sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/debug": {
|
||||
"version": "4.4.3",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
|
||||
|
|
@ -3852,6 +3730,15 @@
|
|||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-async": {
|
||||
"version": "10.0.1",
|
||||
"resolved": "https://registry.npmjs.org/react-async/-/react-async-10.0.1.tgz",
|
||||
"integrity": "sha512-ORUz5ca0B57QgBIzEZM5SuhJ6xFjkvEEs0gylLNlWf06vuVcLZsjIw3wx58jJkZG38p+0nUAxRgFW2b7mnVZzA==",
|
||||
"license": "ISC",
|
||||
"peerDependencies": {
|
||||
"react": ">=16.3.1"
|
||||
}
|
||||
},
|
||||
"node_modules/react-dom": {
|
||||
"version": "19.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz",
|
||||
|
|
@ -3943,12 +3830,6 @@
|
|||
"react-dom": ">=16.6.0"
|
||||
}
|
||||
},
|
||||
"node_modules/reselect": {
|
||||
"version": "5.1.1",
|
||||
"resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
|
||||
"integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/resolve": {
|
||||
"version": "1.22.11",
|
||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
|
||||
|
|
@ -4333,15 +4214,6 @@
|
|||
"punycode": "^2.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/use-sync-external-store": {
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
|
||||
"integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/vite": {
|
||||
"name": "rolldown-vite",
|
||||
"version": "7.2.2",
|
||||
|
|
|
|||
|
|
@ -14,10 +14,9 @@
|
|||
"@emotion/react": "^11.14.0",
|
||||
"@emotion/styled": "^11.14.1",
|
||||
"@mui/material": "^7.3.5",
|
||||
"@mui/x-date-pickers": "^8.19.0",
|
||||
"axios": "^1.13.2",
|
||||
"dayjs": "^1.11.19",
|
||||
"react": "^19.2.0",
|
||||
"react-async": "^10.0.1",
|
||||
"react-dom": "^19.2.0",
|
||||
"react-intl": "^7.1.14",
|
||||
"react-router": "^7.9.6"
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ import { Grid, Paper } from "@mui/material";
|
|||
|
||||
function App() {
|
||||
const [userId, setUserId] = useState<string | null>(
|
||||
window.localStorage.getItem("paysplit-user-id")
|
||||
window.localStorage.getItem("paysplit-user-id"),
|
||||
);
|
||||
const storeUserId = (id: string) => {
|
||||
window.localStorage.setItem("paysplit-user-id", id.toString());
|
||||
|
|
|
|||
|
|
@ -25,3 +25,16 @@ export const completeBuyFlow = (userId: string) =>
|
|||
axios.post("/buy/complete", { userId }) as Promise<
|
||||
AxiosResponse<{ url: string }, unknown, {}>
|
||||
>;
|
||||
|
||||
export interface Session {
|
||||
id: string;
|
||||
size: number;
|
||||
userCount: number;
|
||||
includesRequester: boolean;
|
||||
date: string;
|
||||
}
|
||||
|
||||
export const getAllSessions = (userId: string) =>
|
||||
(
|
||||
axios.get(`/session?userId=${userId}`) as Promise<AxiosResponse<Session[]>>
|
||||
).then((response) => response.data);
|
||||
|
|
|
|||
|
|
@ -52,7 +52,6 @@ export const Register = () => {
|
|||
|
||||
const handleRegisterFlow = () =>
|
||||
registerUser(userName, password).then((response) => {
|
||||
console.log(response);
|
||||
setUserId(response.data.userId);
|
||||
navigate("/signup");
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,19 +1,32 @@
|
|||
import { Button, Grid, Paper, Typography } from "@mui/material";
|
||||
import { DateCalendar } from "@mui/x-date-pickers";
|
||||
import { useState } from "react";
|
||||
import {
|
||||
Alert,
|
||||
Button,
|
||||
FormControlLabel,
|
||||
Grid,
|
||||
Paper,
|
||||
Radio,
|
||||
RadioGroup,
|
||||
Typography,
|
||||
} from "@mui/material";
|
||||
import { useContext, useMemo, useState } from "react";
|
||||
import { FormattedDate } from "react-intl";
|
||||
import { useNavigate } from "react-router";
|
||||
import { Dayjs } from "dayjs";
|
||||
import { Async } from "react-async";
|
||||
import { getAllSessions, type Session } from "../api/client";
|
||||
import { LoggedInPageContext } from "../context/logged-in-page-context";
|
||||
|
||||
export const SignUp = () => {
|
||||
const [selectedDate, setSelectedDate] = useState<Dayjs | null>(null);
|
||||
const navigate = useNavigate();
|
||||
const { userId } = useContext(LoggedInPageContext)!;
|
||||
const sessionsPromise = useMemo(() => getAllSessions(userId), [])
|
||||
const [selectedSession, setSelectedSession] = useState<Session | null>(null);
|
||||
|
||||
const tuesday = 2;
|
||||
const thursday = 4;
|
||||
const isDateDisabled = (day: Dayjs) =>
|
||||
![tuesday, thursday].includes(day.day());
|
||||
const availableSlots: number = 3;
|
||||
const setSelectedSessionFromId = (sessions: Session[], id: string) => setSelectedSession(
|
||||
sessions.find(s => s.id === id) || null);
|
||||
|
||||
const selectedSessionId = selectedSession && selectedSession.id;
|
||||
const selectedDate = selectedSession && new Date(selectedSession.date);
|
||||
const availableSlots = selectedSession && selectedSession?.size - selectedSession.userCount;
|
||||
const availableTokens: number = 0;
|
||||
|
||||
return (
|
||||
|
|
@ -22,23 +35,51 @@ export const SignUp = () => {
|
|||
<Paper
|
||||
variant="outlined"
|
||||
sx={{
|
||||
p: 1,
|
||||
p: 3,
|
||||
bgcolor: "aliceblue",
|
||||
borderRadius: 4,
|
||||
}}
|
||||
>
|
||||
<DateCalendar
|
||||
value={selectedDate}
|
||||
onChange={setSelectedDate}
|
||||
shouldDisableDate={isDateDisabled}
|
||||
slotProps={{
|
||||
day: {
|
||||
sx: {
|
||||
fontSize: "0.9rem",
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<Async promise={sessionsPromise}>
|
||||
<Async.Loading>Loading</Async.Loading>
|
||||
<Async.Fulfilled<Session[]>>
|
||||
{(sessions) =>
|
||||
sessions.length === 0 ? (
|
||||
<Alert severity="warning">No sessions are available</Alert>
|
||||
) : (
|
||||
<>
|
||||
<RadioGroup
|
||||
value={selectedSessionId}
|
||||
onChange={(e) => setSelectedSessionFromId(sessions, e.target.value)}
|
||||
>
|
||||
{sessions.map((session) => {
|
||||
const date = new Date(session.date);
|
||||
return (
|
||||
<FormControlLabel
|
||||
key={session.id}
|
||||
value={session.id}
|
||||
control={<Radio />}
|
||||
label={
|
||||
<FormattedDate
|
||||
value={date}
|
||||
day="numeric"
|
||||
month="long"
|
||||
year="numeric"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</RadioGroup>
|
||||
<Button></Button>
|
||||
</>
|
||||
)
|
||||
}
|
||||
</Async.Fulfilled>
|
||||
<Async.Rejected>
|
||||
<Alert severity="error">Something went wrong</Alert>
|
||||
</Async.Rejected>
|
||||
</Async>
|
||||
</Paper>
|
||||
{selectedDate && (
|
||||
<Paper
|
||||
|
|
@ -51,13 +92,13 @@ export const SignUp = () => {
|
|||
>
|
||||
<Typography variant="h5">
|
||||
<FormattedDate
|
||||
value={selectedDate.day()}
|
||||
value={selectedDate}
|
||||
day="numeric"
|
||||
month="long"
|
||||
year="numeric"
|
||||
/>
|
||||
</Typography>
|
||||
{availableSlots === 0 ? (
|
||||
{!availableSlots ? (
|
||||
<Typography variant="subtitle1">
|
||||
There are no available slots for this date.
|
||||
</Typography>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,13 @@
|
|||
import { defineConfig } from "vite";
|
||||
import react from "@vitejs/plugin-react";
|
||||
|
||||
const serverRoutes = ["/access", "/buy/start", "/buy/complete", "/buy/cancel"];
|
||||
const serverRoutes = [
|
||||
"/access",
|
||||
"/buy/start",
|
||||
"/buy/complete",
|
||||
"/buy/cancel",
|
||||
"/session",
|
||||
];
|
||||
const baseServerConfigBuilder = (domain: string) => ({
|
||||
proxy: Object.fromEntries(
|
||||
serverRoutes.map((key) => [
|
||||
|
|
|
|||
Loading…
Reference in New Issue