React evaluation#27
Open
tomwinskell wants to merge 30 commits into
Open
Conversation
…vides contacts loaded from json as context for the child components. All contacts, individual contact pages function.
…te range of conditions. Form validation context moved to new contact page, form moved into ui component.
…tion with zod. Connected to neonDB. Created API for post new contact and get all contacts.
…ider used to load individual contacts. Modal state managed at child level using useImperativeHandle and ref.
… own state, parent can setState in toast.
| const contacts = useContext(ContactsContext); | ||
| const { id } = useParams(); | ||
|
|
||
| const c = contacts.find((c) => c.id == id); |
There was a problem hiding this comment.
be more literal
Suggested change
| const c = contacts.find((c) => c.id == id); | |
| const selectedContact = contacts.find((contact) => contact.id == id); |
| return ( | ||
| <> | ||
| <PageHeading heading="Edit Contact" /> | ||
| <Form values={c} update={true}/> |
There was a problem hiding this comment.
what is c? there you see why readability is important
| async function getContacts(): Promise<void> { | ||
| axios | ||
| .get('/api/contacts') | ||
| .then((res) => { |
There was a problem hiding this comment.
make the argument name more meaningful
Suggested change
| .then((res) => { | |
| .then((response/serverResponse) => { |
| const data = res.data.contacts; | ||
| return data.map((c: ContactData) => keysToTitleCase(c)); | ||
| }) | ||
| .then((data) => setContacts(data)) |
| children: React.ReactNode; | ||
| } | ||
|
|
||
| export function ToastLogic(props: Props, ref: React.Ref<ToastHandle>) { |
There was a problem hiding this comment.
missing return type, if you are going typescript, go the whole way
| } | ||
| } | ||
|
|
||
| async function handleDelete() { |
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
Live site at https://contact-list-nextjs-liart.vercel.app/. May be easier for demonstration than loading on personal computer as it uses a Postgres database.
Readme explains how to run it locally if you prefer.
Did not use propTypes because I think that would have been a waste of type. The project is typed with TypeScript for type safety instead.