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;