TCES-41 urd create and update user information to be updated #21

tsids · 2023-10-30T17:15:29Z

Created the edit user and create user pages.

Completed TCES-41.

Design approved by Jake.

linear · 2023-10-30T17:15:32Z

TCES-41 URD-Create and Update User Information - TO BE UPDATED

You will be responsible for the frontend flow of creating a new user and updating an existing user's information

FIgma Link: https://www.figma.com/file/ckkCZEVkae0kIXUwaQPbib/High-Fidelity-Designs?type=design&node-id=1177-44983&mode=design&t=mFIVe244faKMHUOx-0
You will be working on the Edit User and Create User pages

Completion Requirements:

Designer Approval
Following information above

jordanjanakievski

Just left a few comments. Some stuff is on our end by not creating a guide for the file structure that we wanted. Otherwise, it is looking good!

jordanjanakievski · 2023-11-03T01:28:15Z

client/src/App.jsx

-        </a>
-      </header>
-    </div>
+    <>


This is an unnecessary tag

You can't render two components without a fragment, so I guess for now it may be necessary.

jordanjanakievski · 2023-11-03T01:29:27Z

client/src/components/Create.jsx

+  Typography,
+} from "@mui/material";
+
+const styles = {


If you are going to use CSS styling, it would be best to use dedicated css files for these

Alternatively you could look into styled components. https://styled-components.com/. You could take a look at either Kevin or Emily's prs for a reference.

jordanjanakievski · 2023-11-03T01:29:47Z

client/src/components/Edit.jsx

+  Typography,
+} from "@mui/material";
+
+const styles = {


Same styling comment from Create

jordanjanakievski · 2023-11-03T01:31:48Z

client/src/App.jsx

@@ -1,27 +1,12 @@
-import logo from "./logo.svg";
-import "./App.css";
+import Create from "./components/Create";


It would be best to have these existing in a pages directory like how was brought up in stand-up so when it comes to routing we would route to only existing pages, not components. Since these create pages will exist on a route.

For reference, please take a look at Kevin's PR.

jordanjanakievski · 2023-11-03T01:37:04Z

client/src/components/Create.jsx

+    marginRight: "auto",
+  },
+};
+


We should add a function for the Button onClick and a fake API call so when the backend gets implemented, it will be a quick edit and test to get it hooked up.

Also you should probably maintain the states of the different fields in this component so that we can track what the user has inputted and attach that to the API call. This also applies in edit.jsx

jordanjanakievski · 2023-11-03T01:37:25Z

client/src/components/Edit.jsx

+    marginRight: "auto",
+  },
+};
+


Same API comment from Create

jordanjanakievski · 2023-11-03T01:40:29Z

Also, be sure to get approval from Jake. This is a requirement for frontend PRs. Once that happens, you can update the PR description and add a label for Design Approved

tsids · 2023-11-03T01:46:08Z

Is there a naming convention for the external css file? Also, will each component/page have its own css file, or is there a master css file that we are supposed to use?

jordanjanakievski · 2023-11-03T01:56:01Z

Is there a naming convention for the external css file? Also, will each component/page have its own css file, or is there a master css file that we are supposed to use?

Each page would get its own CSS file

DanielDervishi

Great work Taha! The components look really great. There are some minor things that need to be changed, but once those are addressed, the pr should be good to merge in!

DanielDervishi · 2023-11-04T01:06:11Z

client/src/components/Create.jsx

+  Typography,
+} from "@mui/material";
+
+const styles = {


Alternatively you could look into styled components. https://styled-components.com/. You could take a look at either Kevin or Emily's prs for a reference.

DanielDervishi · 2023-11-04T01:24:21Z

client/src/App.jsx

@@ -1,27 +1,12 @@
-import logo from "./logo.svg";
-import "./App.css";
+import Create from "./components/Create";


For reference, please take a look at Kevin's PR.

DanielDervishi · 2023-11-04T01:24:59Z

client/src/App.jsx

-        </a>
-      </header>
-    </div>
+    <>


You can't render two components without a fragment, so I guess for now it may be necessary.

DanielDervishi · 2023-11-04T01:27:28Z

client/src/components/Create.jsx

+    marginRight: "auto",
+  },
+};
+


Also you should probably maintain the states of the different fields in this component so that we can track what the user has inputted and attach that to the API call. This also applies in edit.jsx

kevinle623

Nice! Looks really good.

DanielDervishi

Thanks for the changes Taha, they look great! The only things that should be changed are the names of the create and edit components, as well as the folder they are in. Something like create-user-component and edit-user-component would be better.

tsids · 2023-11-07T16:51:30Z

I updated the folders, but do you want to update the file names too?
It won't stay consistent with the dashboard and login components.

DanielDervishi · 2023-11-07T16:56:48Z

I updated the folders, but do you want to update the file names too? It won't stay consistent with the dashboard and login components.

Yes that would be great. Also, could you update the password fields in each of the components to hide the characters as the user types them (see example below).

DanielDervishi

Thanks for the changes! I just left a single comment. Otherwise the pr should be good to go!

DanielDervishi · 2023-11-08T20:18:20Z

client/src/components/edit-user-component/edit-user-component.jsx

+            type="submit"
+            variant="contained"
+            size="large"
+            onClick={handleSave}


Currently, despite the form validation onClick is called on the button. Instead of assigning the button's onClick method to handleClick, instead assign the encompassing form's onSave method to it. This should be done in the create component as well.

I couldn't find anything about an onSave method, but I added it to onSubmit.

Whoops, thats what I meant to say!

DanielDervishi

Thanks for the great work Taha!

jordanjanakievski

Looks good. Thank you for addressing mine and Daniel's comments!

tsids · 2023-11-08T22:54:47Z

Should I squash and merge?

DanielDervishi · 2023-11-08T22:56:42Z

Should I squash and merge?

Yep!

tsids requested a review from DanielDervishi October 30, 2023 17:15

jordanjanakievski assigned tsids Nov 3, 2023

jordanjanakievski self-requested a review November 3, 2023 01:33

jordanjanakievski requested changes Nov 3, 2023

View reviewed changes

jordanjanakievski added Frontend Any Frontend Changes and removed Frontend Any Frontend Changes labels Nov 3, 2023

DanielDervishi reviewed Nov 4, 2023

View reviewed changes

tsids added 4 commits November 6, 2023 10:27

Rendering Create and Edit User

c7a3138

Completing TCES-41 Added Create & Edit User pages

cfffa9e

fixed linting errors

1b6d8ac

updated app.jsx

e340b7c

tsids force-pushed the taha/tces-41-urd-create-and-update-user-information-to-be-updated branch from f293ff6 to e340b7c Compare November 6, 2023 15:28

tsids requested a review from kevinle623 November 6, 2023 16:20

tsids added 2 commits November 6, 2023 11:20

updated changes based on comments

6640862

fixed app

1526f5c

tsids requested review from jordanjanakievski and DanielDervishi November 6, 2023 16:29

kevinle623 approved these changes Nov 6, 2023

View reviewed changes

tsids added Frontend Any Frontend Changes Design Approved 🎨 labels Nov 7, 2023

DanielDervishi reviewed Nov 7, 2023

View reviewed changes

updated folder names

5024726

tsids force-pushed the taha/tces-41-urd-create-and-update-user-information-to-be-updated branch from 3ff2daf to 5024726 Compare November 7, 2023 16:49

changed email and password input type

1339c67

tsids added 2 commits November 7, 2023 12:16

changed file names

a698d48

added required attribute

8b44f9b

tsids requested a review from DanielDervishi November 7, 2023 21:41

DanielDervishi reviewed Nov 8, 2023

View reviewed changes

changed onClick event to onSubmit

613380d

DanielDervishi approved these changes Nov 8, 2023

View reviewed changes

jordanjanakievski approved these changes Nov 8, 2023

View reviewed changes

tsids merged commit a949a6d into main Nov 8, 2023
2 checks passed

tsids deleted the taha/tces-41-urd-create-and-update-user-information-to-be-updated branch November 8, 2023 22:58

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

TCES-41 urd create and update user information to be updated #21

TCES-41 urd create and update user information to be updated #21

tsids commented Oct 30, 2023 •

edited

Loading

linear bot commented Oct 30, 2023

jordanjanakievski left a comment

jordanjanakievski Nov 3, 2023

DanielDervishi Nov 4, 2023

jordanjanakievski Nov 3, 2023

DanielDervishi Nov 4, 2023

jordanjanakievski Nov 3, 2023

jordanjanakievski Nov 3, 2023

DanielDervishi Nov 4, 2023

jordanjanakievski Nov 3, 2023

DanielDervishi Nov 4, 2023

jordanjanakievski Nov 3, 2023

jordanjanakievski commented Nov 3, 2023 •

edited

Loading

tsids commented Nov 3, 2023

jordanjanakievski commented Nov 3, 2023

DanielDervishi left a comment

DanielDervishi Nov 4, 2023

DanielDervishi Nov 4, 2023

DanielDervishi Nov 4, 2023

DanielDervishi Nov 4, 2023

kevinle623 left a comment

DanielDervishi left a comment

tsids commented Nov 7, 2023

DanielDervishi commented Nov 7, 2023

DanielDervishi left a comment

DanielDervishi Nov 8, 2023

tsids Nov 8, 2023

DanielDervishi Nov 8, 2023

DanielDervishi left a comment

jordanjanakievski left a comment

tsids commented Nov 8, 2023

DanielDervishi commented Nov 8, 2023

TCES-41 urd create and update user information to be updated #21

TCES-41 urd create and update user information to be updated #21

Conversation

tsids commented Oct 30, 2023 • edited Loading

linear bot commented Oct 30, 2023

jordanjanakievski left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jordanjanakievski commented Nov 3, 2023 • edited Loading

tsids commented Nov 3, 2023

jordanjanakievski commented Nov 3, 2023

DanielDervishi left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kevinle623 left a comment

Choose a reason for hiding this comment

DanielDervishi left a comment

Choose a reason for hiding this comment

tsids commented Nov 7, 2023

DanielDervishi commented Nov 7, 2023

DanielDervishi left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DanielDervishi left a comment

Choose a reason for hiding this comment

jordanjanakievski left a comment

Choose a reason for hiding this comment

tsids commented Nov 8, 2023

DanielDervishi commented Nov 8, 2023

tsids commented Oct 30, 2023 •

edited

Loading

jordanjanakievski commented Nov 3, 2023 •

edited

Loading