Lab complete

package.json

@@ -14,7 +14,7 @@
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "react-scripts --openssl-legacy-provider start",
+    "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "cypress open",
     "eject": "react-scripts eject"

src/App.js

@@ -1,5 +1,28 @@
+import { Routes, Route } from "react-router-dom";
+
+import NavBar from "./components/NavBar";
+import Home from "./pages/Home";
+import Index from "./pages/Index";
+import Single from "./pages/Single";
+import New from "./pages/New"
+import Edit from "./pages/Edit";
+
+
 function App() {
-  return <div>Hello World</div>;
+  return (
+    <div className="App">
+      <NavBar />
+      <main>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/logs" element={<Index />} />
+        <Route path="/logs/:index" element={<Single />} />
+        <Route path="/logs/new" element={<New />} />
+        <Route path="/logs/:index/edit" element={<Edit />} />
+      </Routes>
+      </main>
+    </div>
+  )
 }
 
 export default App;

src/components/LogEdit.js

@@ -0,0 +1,109 @@
+import axios from "axios";
+import { useState, useEffect } from "react";
+import { useParams, Link, useNavigate } from "react-router-dom";
+const API = process.env.REACT_APP_API_URL;
+
+
+export default function LogEdit() {
+
+    const navigate = useNavigate();
+    let { index } = useParams();
+
+    const [log, setlog] = useState({
+        captainName: "",
+        title: "",
+        post: "",
+        mistakesWereMadeToday: false,
+        daysSinceLastCrisis: 0,
+    });
+
+    useEffect(() => {
+        axios
+        .get(`${API}/logs/${index}`)
+        .then((res) => {
+            setlog(res.data);
+            console.log(res.data);
+        })
+        .catch((err) => console.error(err))
+    }, [index]);
+
+    const handleTextChange = (event) => {
+        setlog({ ...log, [event.target.id]: event.target.value });
+    };
+
+    const handleCheckboxChange = () => {
+        setlog({ ...log, mistakesWereMadeToday: !log.mistakesWereMadeToday });
+    };
+
+    const handleSubmit = (event) => {
+        event.preventDefault();
+        updateLog(log);
+    };
+
+    const updateLog = () => {
+        axios
+        .put(`${API}/logs/${index}`, log)
+        .then((res) => {
+            setlog(res.data);
+            navigate(`/logs/${index}`);
+        })
+        .catch((err) => console.warn("warn", err))
+    };
+
+
+    return (
+        <div className="LogEdit">
+            <form onSubmit={handleSubmit}>
+                <label htmlFor="captainName">Captain's Name:</label>
+                <input
+                    id="captainName"
+                    value={log.captainName}
+                    type="text"
+                    onChange={handleTextChange}
+                    placeholder="Your name please, Captain."
+                    required
+                />
+                <br />
+                <label htmlFor="title">Title:</label>
+                <input
+                    id="title"
+                    type="text"
+                    value={log.title}
+                    placeholder="Today's log title."
+                    onChange={handleTextChange}
+                    required
+                />
+                <br />
+                <label htmlFor="post">Post:</label>
+                <textarea
+                    id="post"
+                    type="text"
+                    value={log.post}
+                    placeholder="What occurred on this day?"
+                    onChange={handleTextChange}
+                />
+                <br />
+                <label htmlFor="daysSinceLastCrisis">Days Since Last Crisis:</label>
+                <input
+                    id="daysSinceLastCrisis"
+                    type="number"
+                    value={log.daysSinceLastCrisis}
+                    onChange={handleTextChange}
+                />
+                <br />
+                <label htmlFor="mistakesWereMadeToday">Mistakes were made today:</label>
+                <input
+                    id="mistakesWereMadeToday"
+                    type="checkbox"
+                    onChange={handleCheckboxChange}
+                    checked={log.mistakesWereMadeToday}
+                />
+                <br />
+                <input type="submit" />
+                <br />
+                <br />
+<a href="/logs">Back</a>
+            </form>
+        </div>
+    )
+}

src/components/LogNew.js

@@ -0,0 +1,90 @@
+import axios from "axios";
+import { useState } from "react"
+import { useNavigate } from "react-router-dom"
+const API = process.env.REACT_APP_API_URL;
+
+
+export default function LogNew() {
+
+    const navigate = useNavigate();
+    const [log, setlog] = useState({
+        captainName: "",
+        title: "",
+        post: "",
+        mistakesWereMadeToday: false,
+        daysSinceLastCrisis: 0,
+    });
+
+    const handleTextChange = (event) => {
+        setlog({ ...log, [event.target.id]: event.target.value });
+    };
+
+    const handleCheckboxChange = () => {
+        setlog({ ...log, mistakesWereMadeToday: !log.mistakesWereMadeToday });
+    };
+
+    const addLog = (newLog) => {
+        axios
+            .post(`${API}/logs`, newLog)
+            .then(() => navigate("/logs"))
+            .catch((err) => console.error(err))
+    };
+
+    const handleSubmit = (event) => {
+        event.preventDefault();
+        addLog(log);
+    };
+
+    return (
+        <div className="LogNew">
+            <form onSubmit={handleSubmit}>
+                <label htmlFor="captainName">Captain's Name:</label>
+                <input
+                    id="captainName"
+                    value={log.captainName}
+                    type="text"
+                    onChange={handleTextChange}
+                    placeholder="Your name please, Captain."
+                    required
+                />
+                <br />
+                <label htmlFor="title">Title:</label>
+                <input
+                    id="title"
+                    type="text"
+                    value={log.title}
+                    placeholder="Today's log title."
+                    onChange={handleTextChange}
+                    required
+                />
+                <br />
+                <label htmlFor="post">Post:</label>
+                <textarea
+                    id="post"
+                    type="text"
+                    value={log.post}
+                    placeholder="What occurred on this day?"
+                    onChange={handleTextChange}
+                />
+                <br />
+                <label htmlFor="daysSinceLastCrisis">Days Since Last Crisis:</label>
+                <input
+                    id="daysSinceLastCrisis"
+                    type="number"
+                    value={log.daysSinceLastCrisis}
+                    onChange={handleTextChange}
+                />
+                <br />
+                <label htmlFor="mistakesWereMadeToday">Mistakes were made today:</label>
+                <input
+                    id="mistakesWereMadeToday"
+                    type="checkbox"
+                    onChange={handleCheckboxChange}
+                    checked={log.mistakesWereMadeToday}
+                />
+                <br />
+                <input type="submit" />
+            </form>
+        </div>
+    )
+};

src/components/LogSingle.js

@@ -0,0 +1,46 @@
+import axios from "axios";
+import { Link, useParams, useNavigate } from "react-router-dom";
+import { useEffect, useState } from "react";
+const API = process.env.REACT_APP_API_URL;
+
+
+export default function LogSingle() {
+    let navigate = useNavigate();
+    let { index } = useParams();
+    const [log, setLog] = useState({});
+
+    useEffect(() => {
+        axios
+            .get(`${API}/logs/${index}`)
+            .then((res) => {
+                setLog(res.data);
+                // console.log(res);
+            })
+            .catch((err) => console.error(err))
+    }, [index, navigate]);
+
+    const handleDelete = () => {
+        axios.delete(`${API}/logs/${index}`)
+            .then(() => {
+                navigate("/logs");
+            })
+            .catch((err) => console.error(err))
+    };
+
+
+    return (
+        <div className="Log">
+            <h2>Captain's Log</h2>
+            <h3>Show</h3>
+            <h4>{log.title} - By {log.captainName}</h4>
+            <p>{log.post}</p>
+            <p>{log.mistakesWereMadeToday}</p>
+            <p>Days since last crisis: {log.daysSinceLastCrisis}</p>
+            <Link to="/logs">Back</Link>
+            <br></br>
+            <Link to={`/logs/${index}/edit`}>Edit</Link>
+            <br />
+            <button onClick={handleDelete}>Delete</button>
+        </div>
+    )
+};

src/components/LogsIndex.js

@@ -0,0 +1,43 @@
+import { useEffect, useState } from "react";
+import axios from "axios";
+const API = process.env.REACT_APP_API_URL;
+console.log(API);
+
+
+export default function LogsIndex() {
+
+    const [logs, setLogs] = useState([]);
+
+    useEffect(() => {
+        const fetchLogs = async () => {
+            try {
+                const res = await axios.get(`${API}/logs`);
+                console.log(res.data);
+                setLogs(res.data);
+            } catch (err) {
+                console.log(err);
+            }
+        }
+        fetchLogs()
+    }, [])
+
+    return (
+        <div className="LogsIndex">
+            <div>
+                {logs.map((log, index) => {
+                    // console.log(log);
+                    return (
+                        <>
+                            <li key={index} className="Log">
+                                <a href={`/logs/${index}`}>
+                                    {log.title}
+                                </a>
+                            </li>
+                        </>
+                    )
+                })
+                }
+            </div>
+        </div>
+    )
+}

src/components/NavBar.js

@@ -0,0 +1,11 @@
+import { Link } from "react-router-dom"
+
+export default function NavBar() {
+    return (
+        <div className="NavBar">
+            <Link to="/logs">Captain's Log</Link>
+            <br></br>
+            <Link to="/logs/new">New Log</Link>
+        </div>
+    )
+};

src/index.js

@@ -2,16 +2,12 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import "./index.css";
 import App from "./App";
-import reportWebVitals from "./reportWebVitals";
+import { BrowserRouter } from "react-router-dom";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
-  <React.StrictMode>
+  <BrowserRouter>
     <App />
-  </React.StrictMode>
+  </BrowserRouter>
 );
 
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

src/pages/Edit.js

@@ -0,0 +1,10 @@
+import LogEdit from "../components/LogEdit";
+
+export default function Edit() {
+    return (
+        <div className="Edit">
+            <h2>Edit Log</h2>
+            <LogEdit />
+        </div>
+    )
+}

src/pages/Home.js

@@ -0,0 +1,8 @@
+
+export default function Home(){
+    return (
+        <div className="Home">
+            <h2>Captain's Logs</h2>
+        </div>
+    )
+}

src/pages/Index.js

@@ -0,0 +1,10 @@
+import LogsIndex from "../components/LogsIndex";
+
+export default function Index(){
+    return(
+        <div className="Index">
+            <h2>Index</h2>
+            <LogsIndex />
+        </div>
+    )
+};