Initial Submit#8
Conversation
|
Second submission of Rolodex eval |
| {contacts.map((contact, index) => ( | ||
| <div className='contact-data' key={index}> | ||
| <img className='contact-data-url' src={contact.url} alt={contact.name} /> | ||
| <p className='contact-data-info'><Link href={`/contacts/:${contact.name}`}>{contact.name}</Link></p> |
There was a problem hiding this comment.
you don't need the : in here {/contacts/:${contact.name}}
| export default function Individual() { | ||
| const rawName = useParams(); | ||
|
|
||
| console.log(contacts); |
There was a problem hiding this comment.
chore: clean up console.logs when you are finished with them
| 'use client'; | ||
| import React from "react"; | ||
| import { useParams } from "next/navigation"; | ||
| // import { useRouter } from 'next/router'; |
| import { useParams } from "next/navigation"; | ||
| import { Contacts, contacts } from "../../Data/page"; | ||
|
|
||
| export default function Individual() { |
There was a problem hiding this comment.
every function at minimum should be commented with what it does, parameters, and return type
|
|
||
| const handleInputName = (e) => { | ||
| setInputName(e.target.value); | ||
| console.log(e.target.value); |
There was a problem hiding this comment.
would recommend removing console logs - this is just a tool to test your code - shouldn't be pushed with finished work
| } else { | ||
| contacts.push(newContact); | ||
| // contacts.push(newContact) works, but it doesn't render on home page | ||
| // contacts.push(newContact) pushes newContact to Data/page.js, but does not trigger resorting |
|
Submitting as Typscript evaluation |
| "lib": ["dom", "dom.iterable", "esnext"], | ||
| "allowJs": true, | ||
| "skipLibCheck": true, | ||
| "strict": false, |
There was a problem hiding this comment.
We want to enforce Typescript, do true in this one for the next time :)
| @@ -0,0 +1,46 @@ | |||
| "use client"; | |||
|
|
|||
| export interface Contacts { | |||
There was a problem hiding this comment.
Interface should be singular, if you want multiple of a single contact, then you do:
const contacts: Contact[] = []....
| phone: string; | ||
| } | ||
|
|
||
| export const contacts = [ |
| phone: string; | ||
| } | ||
|
|
||
| export const sortedContacts = contacts |
There was a problem hiding this comment.
Where's the type?
| export const sortedContacts = contacts | |
| export const sortedContacts: SortedContacts[] = contacts |
| }, | ||
| ]; | ||
|
|
||
| export interface SortedContacts { |
There was a problem hiding this comment.
Its the same as Contact interface, you can use that one, no need to repeat it
| // interface Metadata { | ||
| // title: string; | ||
| // description: string; | ||
| // } | ||
|
|
||
| // export const metadata: Metadata = { | ||
| // title: "TypeX", | ||
| // description: "Generated by create next app", | ||
| // }; |
| import { useRouter } from "next/navigation"; | ||
|
|
||
| export default function AddContactsBar({ contacts = [] }) { | ||
| interface Contacts { |
| const [inputName, setInputName] = useState(""); | ||
| const [inputUrl, setInputUrl] = useState(""); | ||
| const [inputEmail, setInputEmail] = useState(""); | ||
| const [inputPhone, setInputPhone] = useState(""); | ||
| const router = useRouter(); |
|
|
||
| const handleInputName = (e) => { | ||
| setInputName(e.target.value); | ||
| console.log(e.target.value); |
|
|
||
| export default function AllContactsList({ | ||
| contacts = [], | ||
| // sortedContacts = [], |
There was a problem hiding this comment.
commented code should be removed
3 participants
Initial submission. Can't for the life of me figure out how to pass props to sibling component. Need to step away from this for a bit.