From e340b7cb7a6c945f9e947caa00d7c75618f146c6 Mon Sep 17 00:00:00 2001 From: Taha Date: Mon, 6 Nov 2023 10:19:24 -0500 Subject: [PATCH] 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;