passed test

package.json

@@ -7,14 +7,15 @@
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
     "axios": "^0.24.0",
+    "morgan": "^1.10.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
     "react-router-dom": "^6.0.2",
+    "react-scripts": "5.0.1",
     "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,35 @@
+// DEPENDENCIES
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+
+// PAGES
+import Edit from "./Pages/Edit";
+import FourOFour from "./Pages/FourOFour";
+import Home from "./Pages/Home";
+import Index from "./Pages/Index";
+import New from "./Pages/New";
+import Show from "./Pages/Show";
+
+// COMPONENTS
+import NavBar from "./Components/NavBar";
+
 function App() {
-  return <div>Hello World</div>;
+  return (
+    <div className="App">
+      <Router>
+        <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>
+      </Router>
+    </div>
+  );
 }
 
 export default App;

src/Components/Log.js

@@ -0,0 +1,27 @@
+import { Link, useParams } from "react-router-dom";
+
+function Log({ log, index }) {
+  const {captainName, title, mistakesWereMadeToday} = log;
+
+  return (
+    <tr className="Log">
+      <td>
+        {mistakesWereMadeToday ? (
+          <span>💥</span>
+        ) : (
+          <span>""</span>
+        )}
+      </td>
+      <td>
+
+        {captainName}
+
+      </td>
+      <td>
+        <Link to={`/logs/${index}`}>{title}</Link>
+      </td>
+    </tr>
+  );
+}
+
+export default Log;

src/Components/LogDetails.js

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

src/Components/LogEditForm.js

@@ -0,0 +1,104 @@
+import { useState, useEffect } from "react";
+import { useParams, Link, useNavigate } from "react-router-dom";
+import axios from "axios";
+const API = process.env.REACT_APP_API_URL;
+
+
+function LogEditForm() {
+  let { index } = useParams();
+  const navigate = useNavigate() 
+
+  const [log, setLog] = useState({
+    captainName: "",
+    title: "",
+    post: "",
+    mistakesWereMadeToday: false,
+    daysSinceLastCrisis: 0,
+  });
+
+  useEffect(() => {
+    axios
+    .get(`${API}/logs/${index}`)
+    .then((response) =>{
+      setLog(response.data);
+    }).catch((error) => console.warn("warn", error))
+  }, [index]);
+
+
+
+  const handleTextChange = (event) => {
+    setLog({ ...log, [event.target.id]: event.target.value });
+  };
+
+  const handleCheckboxChange = () => {
+    setLog({ ...log, mistakesWereMadeToday: !log.mistakesWereMadeToday });
+  };
+
+  function editLog() {
+    axios 
+    .put(`${API}/logs/${index}`, log)
+    .then((response)=>{
+      setLog(response.data)
+      navigate(`/logs/${index}`)
+    }).catch((error) => console.warn("warn", error))}
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    editLog()
+
+
+  };
+  return (
+    <div className="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"
+          required
+          value={log.title}
+          onChange={handleTextChange}
+        />
+        <label htmlFor="post">Post:</label>
+        <textarea
+          id="post"
+          value={log.post}
+          placeholder="What happened today?"
+          onChange={handleTextChange}
+        />
+        <label htmlFor="daysSinceLastCrisis"> Days Since Last Crisis:</label>
+        <input
+          id="daysSinceLastCrisis"
+          type="number"
+          onChange={handleTextChange}
+          value={log.daysSinceLastCrisis}
+        />
+        <label htmlFor="mistakesWereMadeToday">Mistakes were made today:</label>
+        <input
+          id="mistakesWereMadeToday"
+          type="checkbox"
+          value={log.mistakesWereMadeToday}
+          onChange={handleCheckboxChange}
+
+        />
+        <br />
+
+        <input type="submit" />
+      </form>
+      <Link to={`/logs/${index}`}>
+        <button>Back</button>
+      </Link>
+    </div>
+  );
+}
+
+export default LogEditForm;

src/Components/LogNewForm.js

@@ -0,0 +1,100 @@
+import { useState, useEffect } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import axios from "axios";
+const API = process.env.REACT_APP_API_URL;
+
+
+function LogNewForm() {
+  // let { index } = useParams();
+  const navigate = useNavigate() 
+
+  const [log, setLog] = useState({
+    captainName: "",
+    title: "",
+    post: "",
+    mistakesWereMadeToday: false,
+    daysSinceLastCrisis: 0,
+  });
+
+  // useEffect(() => {
+  //   axios
+  //   .get(`${API}/logs/${index}`)
+  //   .then((response) =>{
+  //     setLog(response.data);
+  //   }).catch((error) => console.warn("warn", error))
+  // }, [index]);
+
+
+
+  const handleTextChange = (event) => {
+    setLog({ ...log, [event.target.id]: event.target.value });
+  };
+
+  const handleCheckboxChange = () => {
+    setLog({ ...log, mistakesWereMadeToday: !log.mistakesWereMadeToday });
+  };
+
+  function addNewLog(){
+    axios
+    .post(`${API}/logs`, log)
+    .then(()=> navigate("/logs"))
+    .catch((error) => console.warn("warn", error))
+  }
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    addNewLog()
+  }
+
+  return (
+    <div className="New">
+      <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"
+          required
+          value={log.title}
+          onChange={handleTextChange}
+        />
+        <label htmlFor="post">Post:</label>
+        <textarea
+          id="post"
+          value={log.post}
+          placeholder="What happened today?"
+          onChange={handleTextChange}
+        />
+        <label htmlFor="daysSinceLastCrisis"> Days Since Last Crisis:</label>
+        <input
+          id="daysSinceLastCrisis"
+          type="number"
+          value={log.daysSinceLastCrisis}
+          onChange={handleTextChange}
+
+        />
+        <label htmlFor="mistakesWereMadeToday">Mistakes were made today:</label>
+        <input
+          id="mistakesWereMadeToday"
+          type="checkbox"
+          checked={log.mistakesWereMadeToday}
+          onChange={handleCheckboxChange}
+
+        />
+        <br />
+        <input type="submit" />
+      </form>
+    </div>
+  );
+}
+
+
+
+export default LogNewForm;

src/Components/Logs.js

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