ContextAPI has been implemented.

Author: zcomert

day-09/api/src/main/java/com/bookstore/api/controllers/AuthorController.java

@@ -4,6 +4,7 @@
 
 import org.springframework.http.HttpStatus;
 import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.CrossOrigin;
 import org.springframework.web.bind.annotation.DeleteMapping;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.PathVariable;
@@ -19,6 +20,7 @@
 
 @RestController
 @RequestMapping("api/v1/authors")
+@CrossOrigin
 public class AuthorController {
 
     private final AuthorService authorService;

day-09/bs-store/package-lock.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^0.27.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.3.0",

day-09/bs-store/package.json

@@ -3,15 +3,13 @@ import ListAuthor from "./adminpages/authors/ListAuthor";
 import ListBook from "./adminpages/books/ListBook";
 import ListCategory from "./adminpages/categories/ListCategory";
 import TopLink from "./components/links/TopLink";
-
+import AppContext from "./context/AppContext";
+import { useContext } from "react";
 import Home from "./pages/home/Home";
 
-import data from "./data";
-import { useState } from "react";
-
 
 function App() {
-  const [authors, setAuthors] = useState(data);
+ const  {authors, setAuthors} = useContext(AppContext);
 
   return (
     <div>
@@ -21,7 +19,7 @@ function App() {
         <Route path='/admin/categories/list' element={<ListCategory />} />
         <Route
           path='/admin/authors/list'
-          element={<ListAuthor authors={authors} setAuthors={setAuthors} />}
+          element={<ListAuthor />}
         />     
         <Route path='/' element={<Home />} />
       </Routes>

day-09/bs-store/src/App.js

@@ -1,6 +1,9 @@
-import React from "react";
+import React, { useContext } from "react";
+import AppContext from "../../context/AppContext";
 
-export default function AddAuthor({authors, setAuthors}) {
+export default function AddAuthor() {
+
+  const {authors,setAuthors} = useContext(AppContext);
 
   const handleClick = () => {
     const entity = {

day-09/bs-store/src/adminpages/authors/AddAuthor.js

@@ -1,23 +1,45 @@
 import React from "react";
 import { Link } from "react-router-dom";
+import AppContext from "../../context/AppContext";
 import AddAuthor from "./AddAuthor";
 
-export default function ListAuthor({authors, setAuthors}) {
+export default function ListAuthor() {
+  const { authors, setAuthors } = React.useContext(AppContext);
+  
+  const removeAuthor = (id) => {
+    // let arr = [];
+
+    // for(const author of authors){
+    //     if(author.id!==id){
+    //       arr.push(author);
+    //     }
+    // }
+    // setAuthors(arr);
+
+
+    let afterRemove = authors.filter(author => author.id!==id)
+    setAuthors(afterRemove);
+  }
+  
   return (
     <div>
       Author List {authors.length}
-
-      {
-        authors.map((author)=> {
-          const {id,firstName, lastName} = author
-          return(
-            <p key={id} >{`${id} ${firstName} ${lastName}`}</p>
-          )
-        })
-      }
-
+      {authors.map((author,index) => {
+        const { id, firstName, lastName } = author;
+        return <p 
+        key={index}>
+          {`${id} ${firstName} ${lastName}`}
+          <button onClick={() => removeAuthor(id)} >Remove</button>
+          </p>;
+      })}
       {/* <Link to='/admin/authors/add'>Add</Link> */}
-      <AddAuthor authors={authors} setAuthors={setAuthors} />
+<div>
+  <button onClick={() => setAuthors([])} >Clear all</button>
+</div>
+<div>
+      <AddAuthor />
+
+</div>
     </div>
   );
 }

day-09/bs-store/src/adminpages/authors/ListAuthor.js

@@ -1,10 +1,17 @@
-import React, { createContext, useState } from "react";
+import axios from "axios";
+import React, { createContext, useState, useEffect } from "react";
 import data from "../data";
 const AppContext = createContext();
 
 export const AppContextProvider = ({ children }) => {
 
     const [authors, setAuthors] = useState(data);
+
+    useEffect(() => {
+      const url = "http://localhost:8080/api/v1/authors";
+      axios.get(url).then(resp=> {setAuthors(resp.data.data)});
+      
+    }, [])
 
     const values = {
     message: "selam",