lab5

IP/data.json

@@ -0,0 +1,19 @@
+{
+  "posts": [
+    {
+      "id": 1,
+      "title": "json-server",
+      "author": "typicode"
+    }
+  ],
+  "comments": [
+    {
+      "id": 1,
+      "body": "some comment",
+      "postId": 1
+    }
+  ],
+  "profile": {
+    "name": "typicode"
+  }
+}

IP/jsconfig.json

@@ -5,7 +5,8 @@
         "target": "ES2020",
         "jsx": "react",
         "strictNullChecks": true,
-        "strictFunctionTypes": true
+        "strictFunctionTypes": true,
+        "sourceMap": true
     },
     "exclude": [
         "node_modules",

IP/json-server.json

@@ -0,0 +1,5 @@
+{
+    "static": "./node_modules/json-server/public",
+    "port": 8081,
+    "watch": "true"
+}

IP/node_modules/.vite/deps/_metadata.json

@@ -1,53 +1,53 @@
 {
-  "hash": "bfab4e7d",
+  "hash": "6f510a6f",
-  "browserHash": "478b49c2",
+  "browserHash": "73774a0d",
   "optimized": {
     "react": {
       "src": "../../react/index.js",
       "file": "react.js",
-      "fileHash": "dcd20f42",
+      "fileHash": "78205ebd",
       "needsInterop": true
     },
     "react/jsx-dev-runtime": {
       "src": "../../react/jsx-dev-runtime.js",
       "file": "react_jsx-dev-runtime.js",
-      "fileHash": "9c93a6e1",
+      "fileHash": "76a8c74c",
       "needsInterop": true
     },
     "react/jsx-runtime": {
       "src": "../../react/jsx-runtime.js",
       "file": "react_jsx-runtime.js",
-      "fileHash": "fbd61cc2",
+      "fileHash": "c0c44e83",
       "needsInterop": true
     },
     "prop-types": {
       "src": "../../prop-types/index.js",
       "file": "prop-types.js",
-      "fileHash": "ab711fc5",
+      "fileHash": "e8e2e55c",
       "needsInterop": true
     },
     "react-bootstrap": {
       "src": "../../react-bootstrap/esm/index.js",
       "file": "react-bootstrap.js",
-      "fileHash": "775e07cd",
+      "fileHash": "fb921d5f",
       "needsInterop": false
     },
     "react-bootstrap-icons": {
       "src": "../../react-bootstrap-icons/dist/index.js",
       "file": "react-bootstrap-icons.js",
-      "fileHash": "527c3092",
+      "fileHash": "b3cd386d",
       "needsInterop": false
     },
     "react-dom/client": {
       "src": "../../react-dom/client.js",
       "file": "react-dom_client.js",
-      "fileHash": "d77b6244",
+      "fileHash": "101947c2",
       "needsInterop": true
     },
     "react-router-dom": {
       "src": "../../react-router-dom/dist/index.js",
       "file": "react-router-dom.js",
-      "fileHash": "9111310b",
+      "fileHash": "39215a24",
       "needsInterop": false
     }
   },

IP/package.json

@@ -4,15 +4,18 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
-    "build": "vite build",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "rest": "json-server data.json",
+    "vite": "vite",
+    "dev": "npm-run-all --parallel rest vite",
+    "prod": "npm-run-all lint 'vite build' --parallel rest 'vite preview'"
   },
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.18.0",
+    "react-hot-toast": "^2.4.1",
+    "axios": "^1.6.1",
     "bootstrap": "^5.3.2",
     "react-bootstrap": "^2.9.1",
     "react-bootstrap-icons": "^1.10.3",
@@ -24,9 +27,12 @@
     "@vitejs/plugin-react": "^4.0.3",
     "eslint": "^8.45.0",
     "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
+    "json-server": "^0.17.4",
+    "npm-run-all": "^4.1.5",
     "vite": "^4.4.9"
   }
 }

IP/src/components/banner/Banner.jsx

@@ -1,34 +1,12 @@
-import { useEffect, useState } from 'react';
+/* eslint-disable eol-last */
-import banner1 from '../../assets/1pic.jpg';
-import banner2 from '../../assets/2pic.jpg';
-import banner3 from '../../assets/3pic.jpg';
 import './Banner.css';
+import useBannerHook from './BannerHook';
 
 const Banner = () => {
-    const [currentBanner, setCurrentBanner] = useState(0);
+    const { banners, getBannerClass } = useBannerHook();
-    const banners = [banner1, banner2, banner3];
-
-    const getBannerClass = (index) => {
-        return currentBanner === index ? 'banner-show' : 'banner-hide';
-    };
-
-    useEffect(() => {
-        const bannerInterval = setInterval(
-            () => {
-                console.info('Banner changed');
-                let current = currentBanner + 1;
-                if (current === banners.length) {
-                    current = 0;
-                }
-                setCurrentBanner(current);
-            },
-            5000,
-        );
-        return () => clearInterval(bannerInterval);
-    });
 
     return (
-        <div id="banner" >
+        <div id='banner'>
             {
                 banners.map((banner, index) =>
                     <img key={index} className={getBannerClass(index)} src={banner} alt={`banner${index}`} />)
@@ -37,4 +15,4 @@ const Banner = () => {
     );
 };
 
-export default Banner;
+export default Banner;

IP/src/components/banner/BannerHook.js

@@ -0,0 +1,38 @@
+/* eslint-disable linebreak-style */
+/* eslint-disable eol-last */
+import { useEffect, useState } from 'react';
+import banner1 from '../../assets/1pic.jpg';
+import banner2 from '../../assets/2pic.jpg';
+import banner3 from '../../assets/3pic.jpg';
+
+const useBannerHook = () => {
+    const [currentBanner, setCurrentBanner] = useState(0);
+    const banners = [banner1, banner2, banner3];
+
+    const getBannerClass = (index) => {
+        return currentBanner === index ? 'banner-show' : 'banner-hide';
+    };
+
+    useEffect(() => {
+        const bannerInterval = setInterval(
+            () => {
+                console.info('Banner changed');
+                let current = currentBanner + 1;
+                if (current === banners.length) {
+                    current = 0;
+                }
+                setCurrentBanner(current);
+            },
+            5000,
+        );
+        return () => clearInterval(bannerInterval);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    return {
+        banners,
+        getBannerClass,
+    };
+};
+
+export default useBannerHook;