From c7a31381817efca7bb403bc45a65fdd0d851fecc Mon Sep 17 00:00:00 2001 From: Taha Date: Mon, 30 Oct 2023 11:19:32 -0400 Subject: [PATCH 01/11] Rendering Create and Edit User --- client/src/App.jsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/client/src/App.jsx b/client/src/App.jsx index d80f95b7..068f3f5d 100644 --- a/client/src/App.jsx +++ b/client/src/App.jsx @@ -1,11 +1,15 @@ import "./App.css"; import DashboardPage from "./pages/dashboard"; // import LoginPage from "./pages/login"; +import CreatePage from "./components/Create"; +import EditPage from "./components/Edit"; function App() { return (
+ +
); } From cfffa9eee52874d6ad612ea581f47c4e1892a815 Mon Sep 17 00:00:00 2001 From: Taha Date: Mon, 30 Oct 2023 13:11:43 -0400 Subject: [PATCH 02/11] Completing TCES-41 Added Create & Edit User pages --- client/src/components/Create.jsx | 71 ++++++++++++++++++++++++++++++++ client/src/components/Edit.jsx | 71 ++++++++++++++++++++++++++++++++ 2 files changed, 142 insertions(+) create mode 100644 client/src/components/Create.jsx create mode 100644 client/src/components/Edit.jsx diff --git a/client/src/components/Create.jsx b/client/src/components/Create.jsx new file mode 100644 index 00000000..a4c51f58 --- /dev/null +++ b/client/src/components/Create.jsx @@ -0,0 +1,71 @@ +import { Box, TextField, Stack, Button, Card, CardHeader, CardContent, Typography } from "@mui/material"; + +const styles = { + body: { + height: "100vh", + display: "flex", + flexDirection: "column", + alignItems: "center", + justifyContent: "center", + fontFamily: "Helvetica", + backgroundColor: "#f0f3f8", + }, + heading: { + display: "flex", + width: "47.5rem", + paddingRight: "0px", + flexDirection: "column", + alignItems: "flex-start", + gap: "0.625rem", + }, + cancel: { + marginRight: "auto", + }, +}; + +function Create() { + return ( +
+ + + Create New User + Manually create a new user + + + + + + + + + + + + + + + + + + +
+ ); +} + +export default Create; diff --git a/client/src/components/Edit.jsx b/client/src/components/Edit.jsx new file mode 100644 index 00000000..db8f0390 --- /dev/null +++ b/client/src/components/Edit.jsx @@ -0,0 +1,71 @@ +import { Box, TextField, Stack, Button, Card, CardHeader, CardContent, Typography } from "@mui/material"; + +const styles = { + body: { + height: "100vh", + display: "flex", + flexDirection: "column", + alignItems: "center", + justifyContent: "center", + fontFamily: "Helvetica", + backgroundColor: "#f0f3f8", + }, + heading: { + display: "flex", + width: "47.5rem", + paddingRight: "0px", + flexDirection: "column", + alignItems: "flex-start", + gap: "0.625rem", + }, + cancel: { + marginRight: "auto", + }, +}; + +function Edit() { + return ( +
+ + + Edit User + Edit existing user information + + + + + + + + + + + + + + + + + + +
+ ); +} + +export default Edit; From 1b6d8ac1769d29608e83b6f31309e36d01931b43 Mon Sep 17 00:00:00 2001 From: Taha Date: Tue, 31 Oct 2023 07:27:47 -0400 Subject: [PATCH 03/11] fixed linting errors --- client/src/components/Create.jsx | 131 ++++++++++++++++-------------- client/src/components/Edit.jsx | 133 +++++++++++++++++-------------- 2 files changed, 142 insertions(+), 122 deletions(-) diff --git a/client/src/components/Create.jsx b/client/src/components/Create.jsx index a4c51f58..43accfb5 100644 --- a/client/src/components/Create.jsx +++ b/client/src/components/Create.jsx @@ -1,71 +1,80 @@ -import { Box, TextField, Stack, Button, Card, CardHeader, CardContent, Typography } from "@mui/material"; +import { + Box, + TextField, + Stack, + Button, + Card, + CardHeader, + CardContent, + Typography, +} from "@mui/material"; const styles = { - body: { - height: "100vh", - display: "flex", - flexDirection: "column", - alignItems: "center", - justifyContent: "center", - fontFamily: "Helvetica", - backgroundColor: "#f0f3f8", - }, - heading: { - display: "flex", - width: "47.5rem", - paddingRight: "0px", - flexDirection: "column", - alignItems: "flex-start", - gap: "0.625rem", - }, - cancel: { - marginRight: "auto", - }, + body: { + height: "100vh", + display: "flex", + flexDirection: "column", + alignItems: "center", + justifyContent: "center", + fontFamily: "Helvetica", + backgroundColor: "#f0f3f8", + }, + heading: { + display: "flex", + width: "47.5rem", + paddingRight: "0px", + flexDirection: "column", + alignItems: "flex-start", + gap: "0.625rem", + }, + cancel: { + marginRight: "auto", + }, }; function Create() { - return ( -
- - - Create New User - Manually create a new user - + return ( +
+ + + Create New User + Manually create a new user + - - - - - - - - - - - - - - - + + + + + + + + -
- ); + + + + + + + +
+ ); } export default Create; diff --git a/client/src/components/Edit.jsx b/client/src/components/Edit.jsx index db8f0390..a817b3b7 100644 --- a/client/src/components/Edit.jsx +++ b/client/src/components/Edit.jsx @@ -1,71 +1,82 @@ -import { Box, TextField, Stack, Button, Card, CardHeader, CardContent, Typography } from "@mui/material"; +import { + Box, + TextField, + Stack, + Button, + Card, + CardHeader, + CardContent, + Typography, +} from "@mui/material"; const styles = { - body: { - height: "100vh", - display: "flex", - flexDirection: "column", - alignItems: "center", - justifyContent: "center", - fontFamily: "Helvetica", - backgroundColor: "#f0f3f8", - }, - heading: { - display: "flex", - width: "47.5rem", - paddingRight: "0px", - flexDirection: "column", - alignItems: "flex-start", - gap: "0.625rem", - }, - cancel: { - marginRight: "auto", - }, + body: { + height: "100vh", + display: "flex", + flexDirection: "column", + alignItems: "center", + justifyContent: "center", + fontFamily: "Helvetica", + backgroundColor: "#f0f3f8", + }, + heading: { + display: "flex", + width: "47.5rem", + paddingRight: "0px", + flexDirection: "column", + alignItems: "flex-start", + gap: "0.625rem", + }, + cancel: { + marginRight: "auto", + }, }; function Edit() { - return ( -
- - - Edit User - Edit existing user information - + return ( +
+ + + Edit User + + Edit existing user information + + - - - - - - - - - - - - - - - + + + + + + + + -
- ); + + + + + + + +
+ ); } export default Edit; From e340b7cb7a6c945f9e947caa00d7c75618f146c6 Mon Sep 17 00:00:00 2001 From: Taha Date: Mon, 6 Nov 2023 10:19:24 -0500 Subject: [PATCH 04/11] updated app.jsx --- .../src/components/create-component/index.jsx | 116 +++++++++++++++++ .../create-component/index.styles.jsx | 48 +++++++ .../src/components/edit-component/index.jsx | 118 ++++++++++++++++++ .../edit-component/index.styles.jsx | 48 +++++++ client/src/pages/create/index.jsx | 7 ++ client/src/pages/edit/index.jsx | 7 ++ 6 files changed, 344 insertions(+) create mode 100644 client/src/components/create-component/index.jsx create mode 100644 client/src/components/create-component/index.styles.jsx create mode 100644 client/src/components/edit-component/index.jsx create mode 100644 client/src/components/edit-component/index.styles.jsx create mode 100644 client/src/pages/create/index.jsx create mode 100644 client/src/pages/edit/index.jsx diff --git a/client/src/components/create-component/index.jsx b/client/src/components/create-component/index.jsx new file mode 100644 index 00000000..a3123367 --- /dev/null +++ b/client/src/components/create-component/index.jsx @@ -0,0 +1,116 @@ +import { useState } from "react"; + +import { + TextField, + Stack, + Button, + Card, + CardHeader, + CardContent, + Typography, + Form, + Header, + Cancel, +} from "./index.styles"; + +function CreateComponent() { + const [firstName, setFirstName] = useState(""); + const [lastName, setLastName] = useState(""); + const [email, setEmail] = useState(""); + const [password, setPassword] = useState(""); + + const handleCreate = () => { + // Create a JSON object with the required keys and values + const userData = { + firstName, + lastName, + email, + password, + }; + + // Convert the JSON object to a string + const userDataJSON = JSON.stringify(userData); + + // Replace url with target route + fetch("http://localhost:8000/create", { + method: "POST", // Not sure which method + headers: { + "Content-Type": "application/json", + }, + body: userDataJSON, + }); + // .then((response) => { + // if (response.ok) { + // // Handle success response (e.g., redirect or show a success message) + // console.log('Login successful'); + // } else { + // // Handle error response (e.g., show an error message) + // console.error('Login failed'); + // } + // }) + // .catch((error) => { + // console.error('Error:', error); + // }); + }; + + return ( +
+ +
+ Create New User + Manually create a new user +
+ + + + + + setFirstName(e.target.value)} + label="First Name" + helperText="*Required" + /> + setLastName(e.target.value)} + label="Last Name" + helperText="*Required" + /> + setEmail(e.target.value)} + label="Email" + helperText="*Required" + /> + setPassword(e.target.value)} + label="Password" + helperText="*Required" + /> + + + + + + Cancel + + + + +
+ ); +} + +export default CreateComponent; diff --git a/client/src/components/create-component/index.styles.jsx b/client/src/components/create-component/index.styles.jsx new file mode 100644 index 00000000..7c466496 --- /dev/null +++ b/client/src/components/create-component/index.styles.jsx @@ -0,0 +1,48 @@ +import styled from "styled-components"; + +import { + Box, + TextField, + Stack, + Button, + Card, + CardHeader, + CardContent, + Typography, +} from "@mui/material"; + +const Form = styled.div` + height: "100vh"; + display: "flex"; + flex - direction: "column"; + align - items: "center"; + justify - content: "center"; + font - family: "Helvetica"; + background - color: "#f0f3f8"; +`; + +const Header = styled(Box)` + display: "flex"; + width: "47.5rem"; + padding - right: "0px"; + flex - direction: "column"; + align - items: "flex-start"; + gap: "0.625rem"; +`; + +const Cancel = styled(Button)` + margin-right: "auto"; +`; + +export { + TextField, + Stack, + Button, + Card, + CardHeader, + CardContent, + Typography, + Form, + Header, + Cancel, +}; diff --git a/client/src/components/edit-component/index.jsx b/client/src/components/edit-component/index.jsx new file mode 100644 index 00000000..fdea08d2 --- /dev/null +++ b/client/src/components/edit-component/index.jsx @@ -0,0 +1,118 @@ +import { useState } from "react"; + +import { + TextField, + Stack, + Button, + Card, + CardHeader, + CardContent, + Typography, + Form, + Header, + Cancel, +} from "./index.styles"; + +function EditComponent() { + const [firstName, setFirstName] = useState(""); + const [lastName, setLastName] = useState(""); + const [email, setEmail] = useState(""); + const [password, setPassword] = useState(""); + + const handleSave = () => { + // Create a JSON object with the required keys and values + const userData = { + firstName, + lastName, + email, + password, + }; + + // Convert the JSON object to a string + const userDataJSON = JSON.stringify(userData); + + // Replace url with target route + fetch("http://localhost:8000/edit", { + method: "POST", // Not sure which method + headers: { + "Content-Type": "application/json", + }, + body: userDataJSON, + }); + // .then((response) => { + // if (response.ok) { + // // Handle success response (e.g., redirect or show a success message) + // console.log('Login successful'); + // } else { + // // Handle error response (e.g., show an error message) + // console.error('Login failed'); + // } + // }) + // .catch((error) => { + // console.error('Error:', error); + // }); + }; + + return ( +
+ +
+ Edit User + + Edit existing user information + +
+ + + + + + setFirstName(e.target.value)} + label="First Name" + helperText="*Required" + /> + setLastName(e.target.value)} + label="Last Name" + helperText="*Required" + /> + setEmail(e.target.value)} + label="Email" + helperText="*Required" + /> + setPassword(e.target.value)} + label="Password" + helperText="*Required" + /> + + + + + + Cancel + + + + +
+ ); +} + +export default EditComponent; diff --git a/client/src/components/edit-component/index.styles.jsx b/client/src/components/edit-component/index.styles.jsx new file mode 100644 index 00000000..7c466496 --- /dev/null +++ b/client/src/components/edit-component/index.styles.jsx @@ -0,0 +1,48 @@ +import styled from "styled-components"; + +import { + Box, + TextField, + Stack, + Button, + Card, + CardHeader, + CardContent, + Typography, +} from "@mui/material"; + +const Form = styled.div` + height: "100vh"; + display: "flex"; + flex - direction: "column"; + align - items: "center"; + justify - content: "center"; + font - family: "Helvetica"; + background - color: "#f0f3f8"; +`; + +const Header = styled(Box)` + display: "flex"; + width: "47.5rem"; + padding - right: "0px"; + flex - direction: "column"; + align - items: "flex-start"; + gap: "0.625rem"; +`; + +const Cancel = styled(Button)` + margin-right: "auto"; +`; + +export { + TextField, + Stack, + Button, + Card, + CardHeader, + CardContent, + Typography, + Form, + Header, + Cancel, +}; diff --git a/client/src/pages/create/index.jsx b/client/src/pages/create/index.jsx new file mode 100644 index 00000000..9bbb8e9e --- /dev/null +++ b/client/src/pages/create/index.jsx @@ -0,0 +1,7 @@ +import CreateComponent from "../../components/create-component"; + +function Create() { + return ; +} + +export default Create; diff --git a/client/src/pages/edit/index.jsx b/client/src/pages/edit/index.jsx new file mode 100644 index 00000000..84a110a8 --- /dev/null +++ b/client/src/pages/edit/index.jsx @@ -0,0 +1,7 @@ +import EditComponent from "../../components/edit-component"; + +function Edit() { + return ; +} + +export default Edit; From 6640862f8b32f90b6a3ddff2d4ea07ff4dc6fe4c Mon Sep 17 00:00:00 2001 From: Taha Date: Mon, 6 Nov 2023 11:20:48 -0500 Subject: [PATCH 05/11] updated changes based on comments --- client/src/App.jsx | 4 +- client/src/components/Create.jsx | 80 ------------------ client/src/components/Edit.jsx | 82 ------------------- .../src/components/create-component/index.jsx | 9 +- .../create-component/index.styles.jsx | 53 ++++-------- .../src/components/edit-component/index.jsx | 9 +- .../edit-component/index.styles.jsx | 53 ++++-------- 7 files changed, 42 insertions(+), 248 deletions(-) delete mode 100644 client/src/components/Create.jsx delete mode 100644 client/src/components/Edit.jsx diff --git a/client/src/App.jsx b/client/src/App.jsx index 068f3f5d..96127089 100644 --- a/client/src/App.jsx +++ b/client/src/App.jsx @@ -1,8 +1,8 @@ import "./App.css"; import DashboardPage from "./pages/dashboard"; // import LoginPage from "./pages/login"; -import CreatePage from "./components/Create"; -import EditPage from "./components/Edit"; +import CreatePage from "./pages/create"; +import EditPage from "./pages/edit"; function App() { return ( diff --git a/client/src/components/Create.jsx b/client/src/components/Create.jsx deleted file mode 100644 index 43accfb5..00000000 --- a/client/src/components/Create.jsx +++ /dev/null @@ -1,80 +0,0 @@ -import { - Box, - TextField, - Stack, - Button, - Card, - CardHeader, - CardContent, - Typography, -} from "@mui/material"; - -const styles = { - body: { - height: "100vh", - display: "flex", - flexDirection: "column", - alignItems: "center", - justifyContent: "center", - fontFamily: "Helvetica", - backgroundColor: "#f0f3f8", - }, - heading: { - display: "flex", - width: "47.5rem", - paddingRight: "0px", - flexDirection: "column", - alignItems: "flex-start", - gap: "0.625rem", - }, - cancel: { - marginRight: "auto", - }, -}; - -function Create() { - return ( -
- - - Create New User - Manually create a new user - - - - - - - - - - - - - - - - - - -
- ); -} - -export default Create; diff --git a/client/src/components/Edit.jsx b/client/src/components/Edit.jsx deleted file mode 100644 index a817b3b7..00000000 --- a/client/src/components/Edit.jsx +++ /dev/null @@ -1,82 +0,0 @@ -import { - Box, - TextField, - Stack, - Button, - Card, - CardHeader, - CardContent, - Typography, -} from "@mui/material"; - -const styles = { - body: { - height: "100vh", - display: "flex", - flexDirection: "column", - alignItems: "center", - justifyContent: "center", - fontFamily: "Helvetica", - backgroundColor: "#f0f3f8", - }, - heading: { - display: "flex", - width: "47.5rem", - paddingRight: "0px", - flexDirection: "column", - alignItems: "flex-start", - gap: "0.625rem", - }, - cancel: { - marginRight: "auto", - }, -}; - -function Edit() { - return ( -
- - - Edit User - - Edit existing user information - - - - - - - - - - - - - - - - - - - -
- ); -} - -export default Edit; diff --git a/client/src/components/create-component/index.jsx b/client/src/components/create-component/index.jsx index a3123367..b356719a 100644 --- a/client/src/components/create-component/index.jsx +++ b/client/src/components/create-component/index.jsx @@ -1,5 +1,4 @@ import { useState } from "react"; - import { TextField, Stack, @@ -8,10 +7,8 @@ import { CardHeader, CardContent, Typography, - Form, - Header, - Cancel, -} from "./index.styles"; +} from "@mui/material"; +import { Form, Header, Cancel } from "./index.styles"; function CreateComponent() { const [firstName, setFirstName] = useState(""); @@ -33,7 +30,7 @@ function CreateComponent() { // Replace url with target route fetch("http://localhost:8000/create", { - method: "POST", // Not sure which method + method: "POST", headers: { "Content-Type": "application/json", }, diff --git a/client/src/components/create-component/index.styles.jsx b/client/src/components/create-component/index.styles.jsx index 7c466496..b441e837 100644 --- a/client/src/components/create-component/index.styles.jsx +++ b/client/src/components/create-component/index.styles.jsx @@ -1,48 +1,29 @@ import styled from "styled-components"; -import { - Box, - TextField, - Stack, - Button, - Card, - CardHeader, - CardContent, - Typography, -} from "@mui/material"; +import { Box, Button } from "@mui/material"; const Form = styled.div` - height: "100vh"; - display: "flex"; - flex - direction: "column"; - align - items: "center"; - justify - content: "center"; - font - family: "Helvetica"; - background - color: "#f0f3f8"; + height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-family: Helvetica; + background-color: #f0f3f8; + text-align: initial; `; const Header = styled(Box)` - display: "flex"; - width: "47.5rem"; - padding - right: "0px"; - flex - direction: "column"; - align - items: "flex-start"; - gap: "0.625rem"; + display: flex; + width: 47.5rem; + padding-right: 0px; + flex-direction: column; + align-items: flex-start; + gap: 0.625rem; `; const Cancel = styled(Button)` - margin-right: "auto"; + margin-right: auto !important; `; -export { - TextField, - Stack, - Button, - Card, - CardHeader, - CardContent, - Typography, - Form, - Header, - Cancel, -}; +export { Form, Header, Cancel }; diff --git a/client/src/components/edit-component/index.jsx b/client/src/components/edit-component/index.jsx index fdea08d2..7651e00a 100644 --- a/client/src/components/edit-component/index.jsx +++ b/client/src/components/edit-component/index.jsx @@ -1,5 +1,4 @@ import { useState } from "react"; - import { TextField, Stack, @@ -8,10 +7,8 @@ import { CardHeader, CardContent, Typography, - Form, - Header, - Cancel, -} from "./index.styles"; +} from "@mui/material"; +import { Form, Header, Cancel } from "./index.styles"; function EditComponent() { const [firstName, setFirstName] = useState(""); @@ -33,7 +30,7 @@ function EditComponent() { // Replace url with target route fetch("http://localhost:8000/edit", { - method: "POST", // Not sure which method + method: "POST", headers: { "Content-Type": "application/json", }, diff --git a/client/src/components/edit-component/index.styles.jsx b/client/src/components/edit-component/index.styles.jsx index 7c466496..b441e837 100644 --- a/client/src/components/edit-component/index.styles.jsx +++ b/client/src/components/edit-component/index.styles.jsx @@ -1,48 +1,29 @@ import styled from "styled-components"; -import { - Box, - TextField, - Stack, - Button, - Card, - CardHeader, - CardContent, - Typography, -} from "@mui/material"; +import { Box, Button } from "@mui/material"; const Form = styled.div` - height: "100vh"; - display: "flex"; - flex - direction: "column"; - align - items: "center"; - justify - content: "center"; - font - family: "Helvetica"; - background - color: "#f0f3f8"; + height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-family: Helvetica; + background-color: #f0f3f8; + text-align: initial; `; const Header = styled(Box)` - display: "flex"; - width: "47.5rem"; - padding - right: "0px"; - flex - direction: "column"; - align - items: "flex-start"; - gap: "0.625rem"; + display: flex; + width: 47.5rem; + padding-right: 0px; + flex-direction: column; + align-items: flex-start; + gap: 0.625rem; `; const Cancel = styled(Button)` - margin-right: "auto"; + margin-right: auto !important; `; -export { - TextField, - Stack, - Button, - Card, - CardHeader, - CardContent, - Typography, - Form, - Header, - Cancel, -}; +export { Form, Header, Cancel }; From 1526f5c24b3b46c8a0fb2953247fd14de3caaf8a Mon Sep 17 00:00:00 2001 From: Taha Date: Mon, 6 Nov 2023 11:26:16 -0500 Subject: [PATCH 06/11] fixed app --- client/src/App.jsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/client/src/App.jsx b/client/src/App.jsx index 96127089..df69a5ad 100644 --- a/client/src/App.jsx +++ b/client/src/App.jsx @@ -1,15 +1,13 @@ import "./App.css"; import DashboardPage from "./pages/dashboard"; // import LoginPage from "./pages/login"; -import CreatePage from "./pages/create"; -import EditPage from "./pages/edit"; +// import CreatePage from "./pages/create"; +// import EditPage from "./pages/edit"; function App() { return (
- -
); } From 5024726b106dcd811f770c86bacc630a05ad32a4 Mon Sep 17 00:00:00 2001 From: Taha Date: Tue, 7 Nov 2023 11:46:34 -0500 Subject: [PATCH 07/11] updated folder names --- client/src/App.jsx | 4 ++-- .../{create-component => create-user-component}/index.jsx | 0 .../index.styles.jsx | 0 .../{edit-component => edit-user-component}/index.jsx | 0 .../{edit-component => edit-user-component}/index.styles.jsx | 0 client/src/pages/{create => create-user}/index.jsx | 2 +- client/src/pages/{edit => edit-user}/index.jsx | 2 +- 7 files changed, 4 insertions(+), 4 deletions(-) rename client/src/components/{create-component => create-user-component}/index.jsx (100%) rename client/src/components/{create-component => create-user-component}/index.styles.jsx (100%) rename client/src/components/{edit-component => edit-user-component}/index.jsx (100%) rename client/src/components/{edit-component => edit-user-component}/index.styles.jsx (100%) rename client/src/pages/{create => create-user}/index.jsx (52%) rename client/src/pages/{edit => edit-user}/index.jsx (51%) diff --git a/client/src/App.jsx b/client/src/App.jsx index df69a5ad..cc8027cf 100644 --- a/client/src/App.jsx +++ b/client/src/App.jsx @@ -1,8 +1,8 @@ import "./App.css"; import DashboardPage from "./pages/dashboard"; // import LoginPage from "./pages/login"; -// import CreatePage from "./pages/create"; -// import EditPage from "./pages/edit"; +// import CreatePage from "./pages/create-user"; +// import EditPage from "./pages/edit-user"; function App() { return ( diff --git a/client/src/components/create-component/index.jsx b/client/src/components/create-user-component/index.jsx similarity index 100% rename from client/src/components/create-component/index.jsx rename to client/src/components/create-user-component/index.jsx diff --git a/client/src/components/create-component/index.styles.jsx b/client/src/components/create-user-component/index.styles.jsx similarity index 100% rename from client/src/components/create-component/index.styles.jsx rename to client/src/components/create-user-component/index.styles.jsx diff --git a/client/src/components/edit-component/index.jsx b/client/src/components/edit-user-component/index.jsx similarity index 100% rename from client/src/components/edit-component/index.jsx rename to client/src/components/edit-user-component/index.jsx diff --git a/client/src/components/edit-component/index.styles.jsx b/client/src/components/edit-user-component/index.styles.jsx similarity index 100% rename from client/src/components/edit-component/index.styles.jsx rename to client/src/components/edit-user-component/index.styles.jsx diff --git a/client/src/pages/create/index.jsx b/client/src/pages/create-user/index.jsx similarity index 52% rename from client/src/pages/create/index.jsx rename to client/src/pages/create-user/index.jsx index 9bbb8e9e..f5ec92ab 100644 --- a/client/src/pages/create/index.jsx +++ b/client/src/pages/create-user/index.jsx @@ -1,4 +1,4 @@ -import CreateComponent from "../../components/create-component"; +import CreateComponent from "../../components/create-user-component"; function Create() { return ; diff --git a/client/src/pages/edit/index.jsx b/client/src/pages/edit-user/index.jsx similarity index 51% rename from client/src/pages/edit/index.jsx rename to client/src/pages/edit-user/index.jsx index 84a110a8..a9046856 100644 --- a/client/src/pages/edit/index.jsx +++ b/client/src/pages/edit-user/index.jsx @@ -1,4 +1,4 @@ -import EditComponent from "../../components/edit-component"; +import EditComponent from "../../components/edit-user-component"; function Edit() { return ; From 1339c6742e03c76ce7f0efde201c449041fe0d5f Mon Sep 17 00:00:00 2001 From: Taha Date: Tue, 7 Nov 2023 12:08:11 -0500 Subject: [PATCH 08/11] changed email and password input type --- client/src/components/create-user-component/index.jsx | 4 ++-- client/src/components/edit-user-component/index.jsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/client/src/components/create-user-component/index.jsx b/client/src/components/create-user-component/index.jsx index b356719a..df1676bf 100644 --- a/client/src/components/create-user-component/index.jsx +++ b/client/src/components/create-user-component/index.jsx @@ -79,7 +79,7 @@ function CreateComponent() { helperText="*Required" /> setEmail(e.target.value)} @@ -87,7 +87,7 @@ function CreateComponent() { helperText="*Required" /> setPassword(e.target.value)} diff --git a/client/src/components/edit-user-component/index.jsx b/client/src/components/edit-user-component/index.jsx index 7651e00a..f668a7de 100644 --- a/client/src/components/edit-user-component/index.jsx +++ b/client/src/components/edit-user-component/index.jsx @@ -81,7 +81,7 @@ function EditComponent() { helperText="*Required" /> setEmail(e.target.value)} @@ -89,7 +89,7 @@ function EditComponent() { helperText="*Required" /> setPassword(e.target.value)} From a698d4845b49a4a76507d8f9fe47320a1beeea28 Mon Sep 17 00:00:00 2001 From: Taha Date: Tue, 7 Nov 2023 12:16:44 -0500 Subject: [PATCH 09/11] changed file names --- client/src/App.jsx | 4 ++-- .../{index.jsx => create-user-component.jsx} | 0 .../{index.jsx => edit-user-component.jsx} | 0 .../src/pages/create-user/{index.jsx => create-user.jsx} | 2 +- client/src/pages/edit-user/edit-user.jsx | 7 +++++++ client/src/pages/edit-user/index.jsx | 7 ------- 6 files changed, 10 insertions(+), 10 deletions(-) rename client/src/components/create-user-component/{index.jsx => create-user-component.jsx} (100%) rename client/src/components/edit-user-component/{index.jsx => edit-user-component.jsx} (100%) rename client/src/pages/create-user/{index.jsx => create-user.jsx} (83%) create mode 100644 client/src/pages/edit-user/edit-user.jsx delete mode 100644 client/src/pages/edit-user/index.jsx diff --git a/client/src/App.jsx b/client/src/App.jsx index cc8027cf..3fc47282 100644 --- a/client/src/App.jsx +++ b/client/src/App.jsx @@ -1,8 +1,8 @@ import "./App.css"; import DashboardPage from "./pages/dashboard"; // import LoginPage from "./pages/login"; -// import CreatePage from "./pages/create-user"; -// import EditPage from "./pages/edit-user"; +// import CreatePage from "./pages/create-user/create-user"; +// import EditPage from "./pages/edit-user/edit-user"; function App() { return ( diff --git a/client/src/components/create-user-component/index.jsx b/client/src/components/create-user-component/create-user-component.jsx similarity index 100% rename from client/src/components/create-user-component/index.jsx rename to client/src/components/create-user-component/create-user-component.jsx diff --git a/client/src/components/edit-user-component/index.jsx b/client/src/components/edit-user-component/edit-user-component.jsx similarity index 100% rename from client/src/components/edit-user-component/index.jsx rename to client/src/components/edit-user-component/edit-user-component.jsx diff --git a/client/src/pages/create-user/index.jsx b/client/src/pages/create-user/create-user.jsx similarity index 83% rename from client/src/pages/create-user/index.jsx rename to client/src/pages/create-user/create-user.jsx index f5ec92ab..60c9c7b0 100644 --- a/client/src/pages/create-user/index.jsx +++ b/client/src/pages/create-user/create-user.jsx @@ -1,4 +1,4 @@ -import CreateComponent from "../../components/create-user-component"; +import CreateComponent from "../../components/create-user-component/create-user-component"; function Create() { return ; diff --git a/client/src/pages/edit-user/edit-user.jsx b/client/src/pages/edit-user/edit-user.jsx new file mode 100644 index 00000000..8b455ada --- /dev/null +++ b/client/src/pages/edit-user/edit-user.jsx @@ -0,0 +1,7 @@ +import EditComponent from "../../components/edit-user-component/edit-user-component"; + +function Edit() { + return ; +} + +export default Edit; diff --git a/client/src/pages/edit-user/index.jsx b/client/src/pages/edit-user/index.jsx deleted file mode 100644 index a9046856..00000000 --- a/client/src/pages/edit-user/index.jsx +++ /dev/null @@ -1,7 +0,0 @@ -import EditComponent from "../../components/edit-user-component"; - -function Edit() { - return ; -} - -export default Edit; From 8b44f9b6669e4bb3f4535756ab9a93cd4f01530a Mon Sep 17 00:00:00 2001 From: Taha Date: Tue, 7 Nov 2023 13:05:02 -0500 Subject: [PATCH 10/11] added required attribute --- .../create-user-component.jsx | 15 ++++++++++++++- .../create-user-component/index.styles.jsx | 2 +- .../edit-user-component/edit-user-component.jsx | 15 ++++++++++++++- .../edit-user-component/index.styles.jsx | 2 +- 4 files changed, 30 insertions(+), 4 deletions(-) diff --git a/client/src/components/create-user-component/create-user-component.jsx b/client/src/components/create-user-component/create-user-component.jsx index df1676bf..23c4cc26 100644 --- a/client/src/components/create-user-component/create-user-component.jsx +++ b/client/src/components/create-user-component/create-user-component.jsx @@ -64,35 +64,43 @@ function CreateComponent() { setFirstName(e.target.value)} label="First Name" helperText="*Required" + required /> setLastName(e.target.value)} label="Last Name" helperText="*Required" + required /> setEmail(e.target.value)} label="Email" helperText="*Required" + required /> setPassword(e.target.value)} label="Password" helperText="*Required" + required /> @@ -101,7 +109,12 @@ function CreateComponent() { Cancel - diff --git a/client/src/components/create-user-component/index.styles.jsx b/client/src/components/create-user-component/index.styles.jsx index b441e837..42729096 100644 --- a/client/src/components/create-user-component/index.styles.jsx +++ b/client/src/components/create-user-component/index.styles.jsx @@ -2,7 +2,7 @@ import styled from "styled-components"; import { Box, Button } from "@mui/material"; -const Form = styled.div` +const Form = styled.form` height: 100vh; display: flex; flex-direction: column; diff --git a/client/src/components/edit-user-component/edit-user-component.jsx b/client/src/components/edit-user-component/edit-user-component.jsx index f668a7de..69394fdd 100644 --- a/client/src/components/edit-user-component/edit-user-component.jsx +++ b/client/src/components/edit-user-component/edit-user-component.jsx @@ -66,35 +66,43 @@ function EditComponent() { setFirstName(e.target.value)} label="First Name" helperText="*Required" + required /> setLastName(e.target.value)} label="Last Name" helperText="*Required" + required /> setEmail(e.target.value)} label="Email" helperText="*Required" + required /> setPassword(e.target.value)} label="Password" helperText="*Required" + required /> @@ -103,7 +111,12 @@ function EditComponent() { Cancel - diff --git a/client/src/components/edit-user-component/index.styles.jsx b/client/src/components/edit-user-component/index.styles.jsx index b441e837..42729096 100644 --- a/client/src/components/edit-user-component/index.styles.jsx +++ b/client/src/components/edit-user-component/index.styles.jsx @@ -2,7 +2,7 @@ import styled from "styled-components"; import { Box, Button } from "@mui/material"; -const Form = styled.div` +const Form = styled.form` height: 100vh; display: flex; flex-direction: column; From 613380d8b34698c3d131ae7431dc65c818397643 Mon Sep 17 00:00:00 2001 From: Taha Date: Wed, 8 Nov 2023 15:34:03 -0500 Subject: [PATCH 11/11] changed onClick event to onSubmit --- .../create-user-component/create-user-component.jsx | 12 ++++-------- .../edit-user-component/edit-user-component.jsx | 12 ++++-------- 2 files changed, 8 insertions(+), 16 deletions(-) diff --git a/client/src/components/create-user-component/create-user-component.jsx b/client/src/components/create-user-component/create-user-component.jsx index 23c4cc26..5416c73d 100644 --- a/client/src/components/create-user-component/create-user-component.jsx +++ b/client/src/components/create-user-component/create-user-component.jsx @@ -16,7 +16,8 @@ function CreateComponent() { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); - const handleCreate = () => { + const handleCreate = (e) => { + e.preventDefault(); // Create a JSON object with the required keys and values const userData = { firstName, @@ -51,7 +52,7 @@ function CreateComponent() { }; return ( -
+
Create New User @@ -109,12 +110,7 @@ function CreateComponent() { Cancel - diff --git a/client/src/components/edit-user-component/edit-user-component.jsx b/client/src/components/edit-user-component/edit-user-component.jsx index 69394fdd..6aba8a8a 100644 --- a/client/src/components/edit-user-component/edit-user-component.jsx +++ b/client/src/components/edit-user-component/edit-user-component.jsx @@ -16,7 +16,8 @@ function EditComponent() { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); - const handleSave = () => { + const handleSave = (e) => { + e.preventDefault(); // Create a JSON object with the required keys and values const userData = { firstName, @@ -51,7 +52,7 @@ function EditComponent() { }; return ( - +
Edit User @@ -111,12 +112,7 @@ function EditComponent() { Cancel -