renamed

2023-08-08 16:02:54 +03:00
commit 0a7a469d56
315 changed files with 426907 additions and 0 deletions
@@ -0,0 +1,175 @@
+import { useEffect, useState } from "react";
+import axios from "axios";
+
+interface Diary {
+  date: string;
+  visibility: string;
+  weather: string;
+  id: number;
+  comment: string;
+}
+
+function App() {
+  const [date, setDate] = useState("");
+  const [visibility, setVisibility] = useState("");
+  const [weather, setWeather] = useState("");
+  const [comment, setComment] = useState("");
+  const addDiary = async (e: React.SyntheticEvent) => {
+    e.preventDefault();
+    const newDiaryEntry: Diary = {
+      date,
+      visibility,
+      weather,
+      id: diaries.length,
+      comment,
+    };
+    try {
+      const resp = await axios.post<Diary>(
+        "http://localhost:3003/api/diaries",
+        newDiaryEntry
+      );
+      setDiaries([...diaries, resp.data]);
+    } catch (error) {
+      if (axios.isAxiosError(error)) {
+        window.alert(error.response?.data);
+      } else {
+        console.error(error);
+      }
+    }
+    setDate("");
+    setVisibility("");
+    setWeather("");
+    setComment("");
+  };
+  const [diaries, setDiaries] = useState<Omit<Diary, "comment">[]>([]);
+  useEffect(() => {
+    axios
+      .get<Omit<Diary, "comment">[]>("http://localhost:3003/api/diaries")
+      .then((resp) => setDiaries(resp.data))
+      .catch((err) => console.log(err.message));
+  }, []);
+  return (
+    <>
+      <div>
+        <h3>add diary</h3>
+        <form onSubmit={addDiary}>
+          <div>
+            date
+            <input
+              type="date"
+              value={date}
+              onChange={(e) => setDate(e.target.value)}
+            />
+          </div>
+          <div>
+            <label>visibility: </label>
+            <label>
+              great
+              <input
+                value={visibility}
+                type="radio"
+                onChange={() => setVisibility("great")}
+                name="visibility"
+              />
+            </label>
+            <label>
+              good
+              <input
+                value={visibility}
+                type="radio"
+                onChange={() => setVisibility("good")}
+                name="visibility"
+              />
+            </label>
+            <label>
+              ok
+              <input
+                value={visibility}
+                type="radio"
+                onChange={() => setVisibility("ok")}
+                name="visibility"
+              />
+            </label>
+            <label>
+              poor
+              <input
+                value={visibility}
+                type="radio"
+                onChange={() => setVisibility("poor")}
+                name="visibility"
+              />
+            </label>
+          </div>
+          <div>
+            <label>weather: </label>
+            <label>
+              sunny
+              <input
+                value={weather}
+                onChange={() => setWeather("sunny")}
+                type="radio"
+                name="weather"
+              />
+            </label>
+            <label>
+              rainy
+              <input
+                value={weather}
+                onChange={() => setWeather("rainy")}
+                type="radio"
+                name="weather"
+              />
+            </label>
+            <label>
+              cloudy
+              <input
+                value={weather}
+                onChange={() => setWeather("cloudy")}
+                type="radio"
+                name="weather"
+              />
+            </label>
+            <label>
+              stormy
+              <input
+                value={weather}
+                onChange={() => setWeather("stormy")}
+                type="radio"
+                name="weather"
+              />
+            </label>
+            <label>
+              windy
+              <input
+                value={weather}
+                onChange={() => setWeather("windy")}
+                type="radio"
+                name="weather"
+              />
+            </label>
+          </div>
+          <div>
+            comment
+            <input
+              value={comment}
+              onChange={(e) => setComment(e.target.value)}
+            />
+          </div>
+          <button>add</button>
+        </form>
+      </div>
+      <h3>diray entries</h3>
+      {diaries ? (
+        <ul>
+          {diaries.map((el) => (
+            <li key={el.id}>
+              {el.date} visibility: {el.visibility} weather: {el.weather}
+            </li>
+          ))}
+        </ul>
+      ) : null}
+    </>
+  );
+}
+
+export default App;