# Prepare Me - Sprint 1  --- ## Demo Website :crocodile: [Prepare Me](https://prepare-me.netlify.app/)  --- ### Sprint 1 Summary :monkey: - Total 36 hours to work on the project - we did work 33 hours - Plus 3 hours of technical dificulties - estimated = actual (almost)  ---  ---  --- ### Writing PERT estimations for week 2 :monkey: - we planned 31 hours work - plus 6 hours of debuging and refactoring  --- ### The magic of Cloudinary :cat: - breaks down handling and manipulating images and into URL manipulation - User uploads image to our cloudinary account - returns url to reflect manipulated image  --- - cloudinary returns the image as a url res.cloudinary.com/.../sample.jpg - changing the width returns res.cloudinary.com/.../**w_300**/sample.jpg - cropping returns res.cloudinary.com/.../w_300,**c_fit**/sample.jpg  --- ### The Upload widget :cat: ``` npm i cloudinary-react ``` ```javascript= window.cloudinary.openUploadWidget( { cloudName: '<your-cloud>', uploadPreset: '<preset-1>', sources: ['local', 'image_search', 'google_drive', 'facebook'], googleApiKey: googleKey, cropping: true, } (error, result) => { if (!error && result.event === 'success') { const url = result.info.url; dispatch({ type: 'upload image', url, fieldName, pageNumber }); } }, ); ``` --- ### Testing with Cypress :elephant:  --- #### Cypress?? :elephant: Cypress is a front end testing tool that enables you to write all types of tests: - **End-to-end tests** (Test driving the car) - Integration tests - Unit tests (Testing a wheel of a car)  --- #### Terminal Bashing :elephant: To install Cypress ``` npm install cypress --save-dev ``` To open Cypress ``` npx cypress open ``` To open in terminal Cypress ``` npx cypress run ``` Note, Local sever must be running :running: --- #### Open sesame :elephant:  --- #### Yummy tests :elephant:  --- #### Files??? :elephant:  Note, Can even record a video of the test!!! --- ### Managing state :crocodile:  --- ### why useContext + useReducer - Never mutate state directly in React - Otherwise it may not react correctly - Could use useState and share setState - Model logic spread across the whole app - Potential code duplication - useReducer keeps model logic in one place - No model code in handlers or components --- ```javascript // Share the state and dispatch function via context function App() { const [state, dispatch] = useReducer(updater, initState); return ( <SiteContext.Provider value={[state, dispatch]}> ``` ```javascript // "dispatch" messages to the state updater function function Landscape1({ pageNumber, fields }) { const [state, dispatch] = React.useContext(SiteContext); const handleClick = (event) => { const template = event.currentTarget.id; dispatch({ type: 'load story template', template }); history.push('/story-page/1'); }; ``` --- ```javascript // Centralised updater function handles messages function updater(state, message) { const copy = clone(state); // Clones the state switch (message.type) { // Switch on "type" case 'load story template': { // Case for each message const { template } = message; // Destructure params copy.pages = components[template].pages; // Modify return copy; // Returns newly modified copy of state } ``` --- ### Team Achievements :cat: - Our PO trina is brilliant and we're lucky to have her! :heartbeat: - The upload component - Use of State! - Big plans for a lot of testing :hand_with_index_and_middle_fingers_crossed:  --- ### What will make our MVP *the* MVP :monkey: - Print and download - more page tempaltes to choose from - edit images  --- ### Resources :elephant: [Cypress set-up Notes](https://github.com/fac19/research/blob/master/student-roles/cypress%2C-qa-notes.md) [e2e, intergration & unit](https://medium.com/@lawrey/unit-tests-ui-tests-integration-tests-end-to-end-tests-c0d98e0218a6) [useContext + useReducer](https://hackmd.io/VMtk0P3UTdGCH-BCompzDA)  --- ### Questions? :elephant: