Connect-react Lab

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,30 @@
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import NavBar from "./components/NavBar";
+import Home from "./pages/Home";
+import Index from "./pages/Index";
+import New from "./pages/New";
+import Show from "./pages/Show";
+import Edit from "./pages/Edit";
+
 function App() {
-  return <div>Hello World</div>;
+
+  return (
+    <div>
+      <BrowserRouter>
+      <NavBar />
+        <main>
+          <Routes>
+            <Route path="/" element={<Home />} />
+            <Route path="/logs" element={<Index />}  />
+            <Route path="/logs/new" element={<New />} />
+            <Route path="/logs/:index" element={<Show />} />
+            <Route path="/logs/:index/edit" element={<Edit />} />
+            {/* <Route path="*" element={<FourOFour />} /> */}
+          </Routes>
+        </main>
+      </BrowserRouter>
+    </div>
+    )
 }
 
 export default App;

src/components/Log.js

@@ -0,0 +1,21 @@
+
+
+export default function Log({ log, index }) {
+  return (
+    <tr className="Log">
+      <td>
+        {log.mistakesWereMadeToday ? (
+          <span>⭐️</span>
+        ) : (
+          <span>&nbsp; &nbsp; &nbsp;</span>
+        )}
+      </td>
+      <td>
+        {log.captainName}
+      </td>
+      <td>
+        <a href={`/logs/${index}`}>{log.title}</a>
+      </td>
+    </tr>
+  )
+}

src/components/LogDetails.js

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

src/components/LogEditForm.js

@@ -0,0 +1,96 @@
+import { useState, useEffect } from "react";
+import { useNavigate, useParams, Link } from "react-router-dom";
+import axios from "axios";
+const API = process.env.REACT_APP_API_URL;
+
+export default function LogEditForm() {
+
+  const [log, setLog] = useState({
+    captainName: "",
+    title: "",
+    post: "",
+    mistakesWereMadeToday: false,
+    daysSinceLastCrisis: 0
+  })
+
+  const { index } = useParams();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    axios.get(`${API}/logs/${index}`)
+      .then((response) => setLog(response.data))
+      .catch((error) => console.error("Error: GET", error))
+  }, [index])
+
+  function handleTextChange(event) {
+    setLog({ ...log, [event.target.id]: event.target.value });
+  }
+
+  function handleCheckboxChange() {
+    setLog({ ...log, mistakesWereMadeToday: !log.mistakesWereMadeToday });
+  }
+
+  function updateLog() {
+    axios.put(`${API}/logs/${index}`, log)
+    .then((response) => {
+        setLog(response.data);
+        navigate(`/logs/${index}`);
+    })
+    .catch((error) => console.error(error))
+  }
+
+  function handleSubmit(event) {
+    event.preventDefault();
+    updateLog();
+  }
+
+  return (
+    <div className="form-edit">
+      <form onSubmit={handleSubmit}>
+        <label htmlFor="captainName">Captain's Name:</label>
+          <input
+            id="captainName"
+            type="text"
+            value={log.captainName}
+            onChange={handleTextChange}
+            required
+          />
+        <label htmlFor="title">Title:</label>
+          <input
+            id="title"
+            type="text"
+            value={log.title}
+            onChange={handleTextChange}
+            required
+          />
+        <label htmlFor="post">Post:</label>
+          <textarea
+            id="post"
+            value={log.post}
+            placeholder=""
+            onChange={handleTextChange}
+          />
+        <label htmlFor="mistakesWereMadeToday">Mistakes were made today:</label>
+          <input
+            id="mistakesWereMadeToday"
+            type="checkbox"
+            checked={log.mistakesWereMadeToday}
+            onChange={handleCheckboxChange}
+          />
+        <label htmlFor="daysSinceLastCrisis">Days Since Last Crisis:</label>
+          <input
+            id="daysSinceLastCrisis"
+            type="number"
+            value={log.daysSinceLastCrisis}
+            onChange={handleTextChange}
+          />
+        <br />
+        <input type="submit" />
+      </form>
+
+      <Link to={`/logs/${index}`}>
+        <button>Back</button>
+      </Link>
+    </div>
+  )
+}

src/components/LogNewForm.js

@@ -0,0 +1,78 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+export default function LogNewForm() {
+
+  const [log, setLog] = useState({
+    captainName: "",
+    title: "",
+    post: "",
+    mistakesWereMadeToday: false,
+    daysSinceLastCrisis: 0,
+  })
+
+  const navigate = useNavigate();
+
+  const handleTextChange = (event) => {
+    setLog({ ...log, [event.target.id]: event.target.value });
+  }
+
+  const handleCheckboxChange = () => {
+    setLog({ ...log, mistakesWereMadeToday: !log.mistakesWereMadeToday });
+  }
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    navigate('/logs');
+  }
+
+  return (
+    <div className="New">
+      <form onSubmit={handleSubmit}>
+        <label htmlFor="Captain's Name">Captain's Name:</label>
+        <input
+          id="captainName"
+          value={log.captainName}
+          type="text"
+          onChange={handleTextChange}
+          placeholder="Name of Captain"
+          required
+        />
+        <label htmlFor="title">Title:</label>
+        <input
+          id="title"
+          type="text"
+          required
+          value={log.title}
+          placeholder="Title"
+          onChange={handleTextChange}
+        />
+        <label htmlFor="post">Post:</label>
+        <textarea
+          id="post"
+          type="text"
+          value={log.post}
+          placeholder=""
+          onChange={handleTextChange}
+        />
+        <label htmlFor="mistakesWereMadeToday">Mistakes were made today:</label>
+        <input
+          id="mistakesWereMadeToday"
+          type="checkbox"
+          onChange={handleCheckboxChange}
+          checked={log.mistakesWereMadeToday}
+        />
+        <label htmlFor="daysSinceLastCrisis">Days Since Last Crisis:</label>
+        <input
+          id="daysSinceLastCrisis"
+          type="number"
+          value={log.daysSinceLastCrisis}
+          onChange={handleTextChange}
+          placeholder="0"
+        />
+        <br />
+        <input type="submit" />
+      </form>
+    </div>
+  );
+}

src/components/Logs.js

@@ -0,0 +1,37 @@
+import Log from "./Log";
+import { useState, useEffect } from "react";
+import axios from "axios";
+const API = process.env.REACT_APP_API_URL;
+
+export default function Logs() {
+
+  const [logs, setLogs] = useState([]);
+
+  useEffect(() => {
+    axios
+    .get(`${API}/logs`)
+    .then((response) => setLogs(response.data))
+    .catch((err) => console.error('catch', err))
+  }, []);
+
+  return (
+    <div className="Logs">
+      <section>
+        <table>
+          <thead>
+            <tr>
+              <th>Mistakes</th>
+              <th>Captain Name</th>
+              <th>See this log</th>
+            </tr>
+          </thead>
+          <tbody>
+            {logs.map((log, index) => {
+              return <Log key={index} log={log} index={index} />;
+            })}
+          </tbody>
+        </table>
+      </section>
+    </div>
+  );
+}

src/components/NavBar.js

@@ -0,0 +1,14 @@
+import { Link } from "react-router-dom";
+
+export default function NavBar() {
+  return (
+    <nav>
+      <h1>
+        <Link to="/logs">Logs</Link>
+      </h1>
+      <button>
+        <Link to="/logs/new">New Log</Link>
+      </button>
+    </nav>
+  );
+}