## Trip Planner Sprint 1  --- ## Team Roles QA - Milly DevOps - Orian Scrum & UX / UI - Paolo --- ### How did we split the work? 🐮 * Split work evenly, working on the hardest issues together and separating to maximise our velocity * Prioritised issues to deliver an MVP * Daily Stand-up with questions ---  Estimate 24 points  23 Actual poins --- ## Index DB & localForage  --- #### IndexedDB API * Asynchronously store significant amount of data client-side * object as key value pairs  --- #### localForage - A JavaScript library to store and retrieve data asynchronously from IndexedDB - Simplifies using IndexedDB - Uses localStorage if your browser doesn't support IndexedDB --- [IndexedDB API](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) [localForage API Documentation](https://localforage.github.io/localForage/) [localForage GitHub Repo](https://github.com/localForage/localForage) --- ## Pdf Js - PDF Viewer A library that provides a React component to visualise PDF files  --- `npm install pdfjs-dist@2.13.216`   --- [React PDF Viewer Documentation](https://react-pdf-viewer.dev/docs/basic-usage/) --- ## Styled Components  --- Global Variables using the CreateGlobalStyle module  --- #### Styling a pre-existing component  --- #### Fragments Avoid rendering an extra `<div>`    --- ## React Router - We wanted a simple, intuitive routing system and the ability to create dynamic url paths like in Next.js - We found that we could achieve this with React Router! --- Some of React Router's components  --- Set up Routes, static and dynamic paths  --- `Link` to a dynamic path  --- Access params in in the current Route path! `useParams` is a React Router hook that returns an object of key/value pairs of URL parameters  --- ## React custom hooks - One of our main challanges this week was keeping react state synced with our database - We (finally) achieved this with a React custom hook that returns functions that handle both updating the db and the state in one function (whether it's adding / deleting entries) --- ### React cutom hook example - A JavaScript function whose name conventionally starts with ”use” and that may call other React Hooks. - Extracts component logic into reusable functions --- `useToggle.js`  --- `Toggler.jsx`  --- ## React errors we ran into... There were many. Mostly this one :point_down:  --- Potential reasons for this error: 1. Rendering an object (e.g. a JavaScript Date) directly without specifying an object's key (i.e `doc.name`) - React can only render primitive values directly. 2. Rendering an array without using a .map() 3. Calling a function that returns an object or other invalid child (`new Date` returns a date object) ---  A bit dramatic, don't you think? --- - We were trying to get a document from the db (async) and set the state to that document url so that we could display it. - Only problem is that the componenet `Docs`, where the setState function is called when a user clicks on the document link, then redirects to a new component - `SingleDoc`. Meaning it dismounts (goes bye bye) while trying to do an async operation to update state. --- - Articles online suggested seeveral ways to deal with this: one being moving setState calls up in the component heirarchy --- - For us, it was enough to just make use of handy `useParams` to retrieve the key of the doc, get it from the db and then display it - managing the state of the doc all in the `SingleDoc` component --- ### React Lesson of the week :point_up: - Always, always do a logical check to avoid React trying to render a variable that has an initial state of null (or other falsey value)  --- ## Jest :black_joker: - Using Jest for testing React requires a folder named `__tests__` and inside you can have your test files `test.js` with `import renderer from 'react-test-renderer'` that you need to npm install --- ### [Snapshot testing](https://jestjs.io/docs/snapshot-testing)   --- - Jest compares the rendered output with the previous snapshot. If they match, the test will pass --- This is an example Jest test to check the home page renders  I wrote some tests in Cypress after having ESLint errors with Jest because we are mostly using jsx files and I was getting compatibility errors. This may be fixed by adding `"lint" : eslint --ext js, jsx --fix"` to the scripts of the package.json --- ## useNavigate() - React Router v6 has a new method for navigating back and forth between pages with the useNavigate() method which enhances the user experience by easily clicking between pages like so :point_down:  --- ## What we're proud of - We made our MVP during Sprint 1 :sparkles: :confetti_ball: - Smashing those issues :100: - Trying new things :shocked_face_with_exploding_head: --- ## [Demo](https://trip-planner-five.vercel.app/) :palm_tree: ---