I27 create a contact page

[Will-H007]

Change Summary

[Briefly summarise the changes that you made. Just high-level stuff]

Change Form

Fill this up (NA if not available). If a certain criteria is not met, can you please give a reason.

• The pull request title has an issue number
• The change works by "Smoke testing" or quick testing
• The change has tests
• The change has documentation

Other Information

[Is there anything in particular in the review that I should be aware of?]

contactinfo.tsx

• The phone icon will call the attached number
• The mail icon opens up email
• The marker icon opens up google maps with address
• Added an edit icon (not on figma design) which switches elements between input fields and text fields.
• Added save and cancel edit buttons, save will submit the new data, cancel will keep the original data

contact/[id].tsx

• Currently uses getStaticProps/Path this will need to be changed when data is retrieved from the API

ContactItem & ContactInfo

• retrieves the contact image as one of the props, if we finish the MVP and continue working on it the image should be a part of the Contact type. Our code is already made to handle an image.

ContactForm

• When the fields update it is captured by the state contactForm. ContactForm holds the data that will be sent to firebase.

Related Issue

• Resolve Create a Contact page #27

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
poops	✅ Ready (Inspect)	Visit Preview	Jul 15, 2022 at 1:03AM (UTC)

[APM246]

Great work, some random stuff I noticed (in addition to in-line comments):

• Cursor icon doesn't change when hovering over edit button
• On smaller screens, when a contact page has several pets/notes there is no margin on the bottom element (e.g. the "Me" contact page)
• for better clarity the pages/contact.tsx file can be moved to pages/contact/index.tsx
• Is new-tab.png used anywhere?
• don't have to do this but maybe it would be a good idea to add a //TODO anywhere CONTACT_DATA is used

[ChantelleKerr]

@APM246

• Cursor icon doesn't change when hovering over edit button

DONE

• On smaller screens, when a contact page has several pets/notes there is no margin on the bottom element (e.g. the "Me" contact page)

DONE

• Is new-tab.png used anywhere?

DONE - I removed it because it's not used

• don't have to do this but maybe it would be a good idea to add a //TODO anywhere CONTACT_DATA is used

DONE

Thanks for reviewing I'll get to the other requested changes later tonight :)

[zachpmanson]

All requested changes have been fixed

[APM246]

Should be good to merge once merge conflicts are resolved :)

[NicholasChoong]

Looks good!

[skyheat]

Looks good!