search

1dv611-vt21-g5 / 1dv611-project

1 stars 1 forks source link

Implementera settings (modal) #59

Closed lineaalba closed 3 years ago

lineaalba commented 3 years ago

Tidsuppskattning: 3 timmar

akarlsten commented 3 years ago

Liten steg-för-steg guide till hur man kan göra detta:

  1. Till att börja med kan vi låta allt som ligger i Device vara kvar, vi börjar med att bara utöka saker tills modalen är på plats och vi sen kan ta bort de gamla knapparna.

  2. Skapa en ny Button (chakra-komponent) i components/Device, den kan ligga precis efter SubscriptionButton på rad 60 och kan få texten "Send to Zapier" eller något sånt.

  3. Importera useDisclosure från Chakra, detta är en hook som man extrahera 3 funktioner ur, isOpen, onOpen och onClose vilket låter oss styra modalen senare. På knappen ifrån steg 2 lägg till en onClick som använder onOpen. Se exempel här under Usage: https://chakra-ui.com/docs/overlay/modal

  4. Nu ska vi gå ifrån exemplet i chakras docs lite grann, eftersom vår Modal kommer bli ganska stor borde vi inte (som i exemplet) låta den ligga tillsammans med resten av koden (det blir grötigt). Skapa i stället en ny fil som heter typ SettingsModal.js

  5. Skapa en ny funktionell komponent i filen, typ const SettingsModal = ({isOpen, onClose}) => {return (<Modal>...</Modal>)} och sätt den som default export.

  6. Importera alla Modal-komponenter från Chakra (https://chakra-ui.com/docs/overlay/modal) och härma deras exempel.

  7. Spara filen och återgå till components/Device, importera den nya modalkomponenten från SettingsModal, lägg till den på raden under Modal-knappen och se till att ge den propsen isOpen och onClose: <SettingsModal isOpen={isOpen} onClose={onClose} />

  8. Klart!! Eller redo att byggas vidare på iaf