Category select

package.json

@@ -8,7 +8,9 @@
     "@testing-library/user-event": "^13.2.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-paginate": "^8.1.3",
     "react-scripts": "4.0.3",
+    "react-select": "^5.5.4",
     "web-vitals": "^2.1.0"
   },
   "scripts": {

src/API/APIContext.js

@@ -0,0 +1,41 @@
+import {React, createContext, useContext, useMemo, useState} from 'react';
+
+const APIContext = createContext();
+
+// allows API data to be accessed from the Page component
+export const useAPI = () => {
+  const context = useContext(APIContext)
+
+  if(!context) {
+    throw new Error("useAPI can only be used inside a APIContextProvider")
+  }
+
+  return context
+}
+
+// APIContextProvider is used so that the API logic is decoupled from the components
+export const APIContextProvider = ({children}) => {
+
+  const [data, setData] = useState([])
+
+    // useMemo to improve fetch performance
+    useMemo(() => {
+        fetch("/api/posts")
+        .then((response) => response.json()
+        )
+        .then((json) => {
+            setData(json.posts)
+        })
+        .catch((err) => {
+          console.error(err)
+        })
+    }, [])
+
+  return (
+    <APIContext.Provider value={data}>
+      {children}
+    </APIContext.Provider>
+  );
+
+}
+

src/components/App.jsx

@@ -1,5 +1,16 @@
+import { APIContextProvider } from "../API/APIContext";
+import CategorySelector from "./CategorySelector/CategorySelector";
+import Page from "./Page/Page";
+
 function App() {
-  return <div>{/* Complete the exercise here. */}</div>;
+  return (
+    <>
+    <APIContextProvider>
+      <CategorySelector />
+      <Page />
+    </APIContextProvider>
+    </>
+  );
 }
 
-export default App;
+export default App;

src/components/CategorySelector/CategorySelector.css

@@ -0,0 +1,11 @@
+.selector-container{
+    display: flex;
+    justify-content: center;
+    padding-top: 2rem;
+}
+
+.selector{
+    width: 50vw;
+    padding-left: 2rem;
+    padding-top: 0.7rem;
+}

src/components/CategorySelector/CategorySelector.jsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import Select from 'react-select'
+import { useState } from 'react'
+import "../CategorySelector/CategorySelector.css"
+
+const categoryOptions = [
+    { value: 'Surveys and Forms', label: 'Surveys and Forms' },
+    { value: 'Digital Marketing', label: 'Digital Marketing' },
+    { value: 'Platform News and Updates', label: 'Platform News and Updates' },
+    { value: 'Tips and Best Practise', label: 'Tips and Best Practise' },
+    { value: 'Data Management', label: 'Data Management' },
+    { value: 'Marketing Analytics', label: 'Marketing Analytics' },
+    { value: 'Landing Pages', label: 'Landing Pages' },
+    { value: 'Ecommerce', label: 'Ecommerce' },
+    { value: 'Email Marketing', label: 'Email Marketing' },
+    { value: 'Tips and Best Practise', label: 'Tips and Best Practise' },
+    { value: 'Digital Marketing', label: 'Digital Marketing' },
+    { value: 'Marketing Automation', label: 'Marketing Automation' },
+    { value: 'Platform News and Updates', label: 'Platform News and Updates' },
+  ]
+
+const CategorySelector = () => {
+
+  const [selectedOptions, setOptions] = useState([])
+
+  return (
+    <>
+    <div className="selector-container">
+      <h3>Select Category</h3>
+
+      <Select
+        defaultValue={selectedOptions}
+        onChange={setOptions}
+        options={categoryOptions}
+        className="selector"
+        placeholder="Categories"
+        isMulti
+      />
+    </div>
+    </>
+  )
+}
+
+export default CategorySelector

src/components/Page/Page.jsx

@@ -0,0 +1,86 @@
+import { React, useState, useMemo } from 'react'
+import ReactPaginate from 'react-paginate'
+import "../Page/page.css"
+import { useAPI } from '../../API/APIContext'
+
+function splitURL(url)
+{
+  return url.split("?")[0]
+}
+
+function Items({currentItems}) {
+  return (
+    <>
+      <ul>
+      {currentItems && currentItems.map((item, key) => (
+          <>
+            <img src={splitURL(item.author.avatar)} alt={""} />
+            <li>Title: {item.title}</li>
+            <li>Published Date: {item.publishDate}</li>
+            <li>Summary: {item.summary}</li>
+            <li>Author: {item.author.name}</li>
+
+            {item.categories && item.categories.map((category, _) => (
+              <>
+              <li>Category: {category.name}</li>
+              </>
+            ))}
+
+            {/* <li>Avatar: {splitURL(item.author.avatar)}</li> */}
+            <br></br>
+          </>
+      ))}
+      </ul>
+    </>
+  )
+} 
+
+export const Page = () => {
+
+    const itemsPerPage = 10;
+    const [currentItems, setCurrentItems] = useState([])
+    const [pageCount, setPageCount] = useState(0)
+    const [itemOffset, setItemOffset] = useState(0)
+
+    const data = useAPI()
+
+    // the current data to display and the API data should not be the same array
+    // otherwise this hook will constantly change the number of current items and page offsets
+    useMemo(() => {
+      const endOffset = itemOffset + itemsPerPage
+      console.log(`Loading items from ${itemOffset} to ${endOffset}`)
+      setCurrentItems(data.slice(itemOffset, endOffset))
+      setPageCount(Math.ceil(data.length / itemsPerPage))
+
+    }, [itemOffset, itemsPerPage, data])
+
+    const handlePageClick = (event) => {
+      const newOffset = (event.selected * itemsPerPage) % data.length;
+      console.log(
+        `User requested page number ${event.selected}, which is offset ${newOffset}`
+      );
+      setItemOffset(newOffset);
+    }
+
+  return (
+    <>
+      <Items currentItems={currentItems}/>
+      <ReactPaginate
+            breakLabel="..."
+            onPageChange={handlePageClick}
+            pageRangeDisplayed={3} // number of pages to show before the break label
+            pageCount={pageCount}
+            previousLabel="<- Previous"
+            nextLabel="Next ->"
+            renderOnZeroPageCount={null}
+            containerClassName="pagination"
+            pageLinkClassName="page-num"
+            previousLinkClassName="page-num"
+            nextLinkClassName="page-num"
+            activateLinkClassName="active"
+        />
+    </>
+  )
+}
+
+export default Page;

src/components/Page/page.css

@@ -0,0 +1,23 @@
+li {list-style-type: none;}
+
+.pagination{
+    list-style: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 5rem;
+    font-size: 1.2rem;
+    gap: 5px;
+}
+
+.pagination .page-num{
+    padding: 8px 15px;
+    cursor: pointer;
+    border-radius: 3px;
+    font-weight: 400;
+}
+
+.pagination .page-num:hover{
+    background-color: #5AB1BB;
+    color: #fff;
+}

src/mock/index.js

@@ -1,5 +1,4 @@
 import { createServer } from 'miragejs';
-
 import data from './data.json';
 
 createServer({