feat UserCard #22
Open
feat UserCard #22
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
miguel-merlin
requested changes
Apr 2, 2024
There was a problem hiding this comment.
@mpate154 Solid PR, please make the changes I highlighted in the review. Keep it up!
src/components/UserCard.tsx
Outdated
| import { useState } from "react"; //for the save button that hasnt' been implemented | ||
| import React from "react"; | ||
| import sampleUserData from "../sample_data.json"; | ||
| import { useDisclosure } from "@chakra-ui/react"; |
There was a problem hiding this comment.
You are importing multiple times from @chakra-ui/react you can include all your @chakra-ui/react imports into a single one
src/components/UserCard.tsx
Outdated
| @@ -1,8 +1,96 @@ | |||
| function UserCard (): JSX.Element { | |||
| import { useState } from "react"; //for the save button that hasnt' been implemented | |||
There was a problem hiding this comment.
You are importing multiple times from react you can include all your react imports into a single one
src/components/UserCard.tsx
Outdated
| Name: | ||
| <Editable> | ||
| {userName} | ||
| <EditablePreview /*need?*/ /> |
src/components/UserCard.tsx
Outdated
|
|
||
| <ModalBody> | ||
| Name: | ||
| <Editable> |
There was a problem hiding this comment.
When the user enters input, you need to tell react to change the state. You have to include
<Editable defaultValue={name} onSubmit={(value) => setName(value)}>
Same for all other <Editable/>
|
@mpate154 Do you have any questions on the comments I've made to your pull request? |
|
Hi!
I'll take a look right now and let you know,
Thanks!
Maya
…________________________________
From: Miguel Merlin ***@***.***>
Sent: Monday, April 8, 2024 5:21 PM
To: stevensblueprint/blueprint_admin ***@***.***>
Cc: Maya Patel ***@***.***>; Mention ***@***.***>
Subject: Re: [stevensblueprint/blueprint_admin] feat UserCard (PR #22)
CAUTION: This email originated from outside the organization. Please do not click links or open attachments unless you recognize the sender and know the content is safe.
@mpate154<https://github.com/mpate154> Do you have any questions on the comments I've made to your pull request?
—
Reply to this email directly, view it on GitHub<#22 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/BDHPH4FLOB6DICBSSCCTGD3Y4MC5PAVCNFSM6AAAAABFNUQDL2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDANBTGY3DGMBXGA>.
You are receiving this because you were mentioned.Message ID: ***@***.***>
|
|
For the const [userName, setName] = useState(userName); and the others, is it supposed to be inside the card? It's also giving me an error because its 'duplicate identifer 'username''.
function UserCard({
buttonText,
userName,
email,
status,
title,
}: UserCardProps): JSX.Element {
const { isOpen, onOpen, onClose } = useDisclosure();
const [userName, setName] = useState(userName); //does this go here?
const [email, setEmail] = useState(email);
const [status, setStatus] = useState(status);
const [title, setTitle] = useState(title);
Thank you!
Maya Patel
________________________________
From: Miguel Merlin ***@***.***>
Sent: Tuesday, April 2, 2024 12:42 PM
To: stevensblueprint/blueprint_admin ***@***.***>
Cc: Maya Patel ***@***.***>; Mention ***@***.***>
Subject: Re: [stevensblueprint/blueprint_admin] feat UserCard (PR #22)
CAUTION: This email originated from outside the organization. Please do not click links or open attachments unless you recognize the sender and know the content is safe.
@miguel-merlin requested changes on this pull request.
@mpate154<https://github.com/mpate154> Solid PR, please make the changes I highlighted in the review. Keep it up!
________________________________
In src/components/UserCard.tsx<#22 (comment)>:
return (
- <div>
- </div>
- )
+ <>
+ <Button onClick={onOpen}>{buttonText}</Button>
+
+ <Modal isOpen={isOpen} onClose={onClose}>
+ <ModalOverlay />
+ <ModalContent>
+ <ModalHeader>{userName} Information</ModalHeader>
+ <ModalCloseButton />
+
+ <ModalBody>
@mpate154<https://github.com/mpate154> I don't think creating a Modal body for each of the fields is the correct approach. You can instead try
<ModalBody>
<p>Name:</p>
<Editable defaultValue={name} onSubmit={(value) => setName(value)}>
<EditablePreview />
<EditableInput />
</Editable>
{/* Repeat for email, status, and title with their respective states */}
</ModalBody>
________________________________
In src/components/UserCard.tsx<#22 (comment)>:
+interface UserCardProps {
+ buttonText: string;
+ userName: string;
+ email: string;
+ status: string;
+ title: string;
+}
+
+function UserCard({
+ buttonText,
+ userName,
+ email,
+ status,
+ title,
+}: UserCardProps): JSX.Element {
+ const { isOpen, onOpen, onClose } = useDisclosure();
@mpate154<https://github.com/mpate154> You also have to create a useState for all the inputs of the form. For example:
const [name, setName] = useState(userName);
This will tell react to rerender the input form whenever the user writes something to the input box
________________________________
In src/components/UserCard.tsx<#22 (comment)>:
+interface UserCardProps {
+ buttonText: string;
+ userName: string;
+ email: string;
+ status: string;
+ title: string;
+}
+
+function UserCard({
+ buttonText,
+ userName,
+ email,
+ status,
+ title,
+}: UserCardProps): JSX.Element {
+ const { isOpen, onOpen, onClose } = useDisclosure();
return (
Since we need to make an API call when the button is closed I would also recommend adding a saveChanges function that handles the API call. For now you can leave it as
const saveChanges = () => {
onClose(); // Close modal after saving
};
Remeber to change <Button variant="ghost" onClick={saveChanges}>Save</Button>
________________________________
In src/components/UserCard.tsx<#22 (comment)>:
@@ -1,8 +1,96 @@
-function UserCard (): JSX.Element {
+import { useState } from "react"; //for the save button that hasnt' been implemented
+import React from "react";
+import sampleUserData from "../sample_data.json";
+import { useDisclosure } from ***@***.***/react";
You are importing multiple times from @chakra-ui/react you can include all your @chakra-ui/react imports into a single one
________________________________
In src/components/UserCard.tsx<#22 (comment)>:
@@ -1,8 +1,96 @@
-function UserCard (): JSX.Element {
+import { useState } from "react"; //for the save button that hasnt' been implemented
You are importing multiple times from react you can include all your react imports into a single one
________________________________
In src/components/UserCard.tsx<#22 (comment)>:
- </div>
- )
+ <>
+ <Button onClick={onOpen}>{buttonText}</Button>
+
+ <Modal isOpen={isOpen} onClose={onClose}>
+ <ModalOverlay />
+ <ModalContent>
+ <ModalHeader>{userName} Information</ModalHeader>
+ <ModalCloseButton />
+
+ <ModalBody>
+ Name:
+ <Editable>
+ {userName}
+ <EditablePreview /*need?*/ />
Yes this is needed
________________________________
In src/components/UserCard.tsx<#22 (comment)>:
return (
- <div>
- </div>
- )
+ <>
+ <Button onClick={onOpen}>{buttonText}</Button>
+
+ <Modal isOpen={isOpen} onClose={onClose}>
+ <ModalOverlay />
+ <ModalContent>
+ <ModalHeader>{userName} Information</ModalHeader>
+ <ModalCloseButton />
+
+ <ModalBody>
+ Name:
+ <Editable>
When the user enters input, you need to tell react to change the state. You have to include
<Editable defaultValue={name} onSubmit={(value) => setName(value)}>
Same for all other <Editable/>
—
Reply to this email directly, view it on GitHub<#22 (review)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/BDHPH4GJJUBKC6GCLPJULQDY3LNX7AVCNFSM6AAAAABFNUQDL2VHI2DSMVQWIX3LMV43YUDVNRWFEZLROVSXG5CSMV3GSZLXHMYTSNZUGM2TOOBVGQ>.
You are receiving this because you were mentioned.Message ID: ***@***.***>
|
miguel-merlin
requested changes
Apr 17, 2024
package.json
Outdated
| @@ -15,6 +15,7 @@ | |||
| "@types/react-dom": "^18.2.18", | |||
| "axios": "^1.6.7", | |||
| "framer-motion": "^11.0.5", | |||
| "mongodb": "^6.5.0", | |||
There was a problem hiding this comment.
Why did you install the mongodb driver?
You can undo by running
npm uninstall mongodb
| <Route path='/' element={<HomePage />} /> | ||
| <Route path='/dashboard' element={<DashboardPage />} /> | ||
| <Route path='/blog' element={<BlogPage />} /> | ||
| <Route path="/" element={<HomePage />} /> |
There was a problem hiding this comment.
We usually want to keep the pull request atomic, meaning the PR only focuses on one change, usually styling changes like this have to be done in another PR
src/components/UserCard.tsx
Outdated
| EditablePreview, | ||
| } from "@chakra-ui/react"; | ||
|
|
||
| import { setTokenSourceMapRange } from "typescript"; |
src/components/UserCard.tsx
Outdated
| <Modal isOpen={isOpen} onClose={onClose}> | ||
| <ModalOverlay /> | ||
| <ModalContent> | ||
| <ModalHeader>{userName} Information</ModalHeader> |
There was a problem hiding this comment.
nit:
{userName}'s Information
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
added userCard