Step 16: Homepage

Let’s refactor the app and create a “homepage” view.

Add a Home.jsx to the pages folder with the following content:

import { Container } from "@mantine/core"; import Notes from "../components/Notes"; import Header from "../components/Header"; import PropTypes from "prop-types"; function Home(props) { const { notes, query, setQuery, add, remove } = props; return ( <Container> <Header query={query} setQuery={setQuery} add={add} /> <Notes notes={notes} query={query} remove={remove} /> </Container> ); } export default Home; Header.propTypes = { query: PropTypes.string.isRequired, setQuery: PropTypes.func.isRequired, add: PropTypes.func.isRequired, remove: PropTypes.func.isRequired, notes: PropTypes.arrayOf( PropTypes.shape({ title: PropTypes.string.isRequired, text: PropTypes.string.isRequired, }) ), };

Next, update the App.jsx as follows:

import { useEffect, useState } from "react"; import { faker } from "@faker-js/faker"; - import Notes from "./components/Notes"; import { Container } from "@mantine/core"; - import Header from "./components/Header"; import Edit from "./pages/Edit"; + import Home from "./pages/Home"; function App() { return ( <Container> - <Header query={query} setQuery={setQuery} add={add} /> - <Notes notes={notes} query={query} remove={remove} /> + <Home + notes={notes} + query={query} + setQuery={setQuery} + add={add} + remove={remove} + /> <Edit /> </Container> ); } export default App;