From 8a637ad90bfae9647eec7d7745c1de92fb4840a2 Mon Sep 17 00:00:00 2001
From: Savy011 <106910589+Savy011@users.noreply.github.com>
Date: Sun, 28 May 2023 09:32:49 +0530
Subject: [PATCH] Finished Ex 9.17

---
 .../src/routes/diaries.ts                     |  4 +-
 Part_9/flight-diary-frontend/src/App.tsx      | 22 ++------
 .../src/components/EntryContent.tsx           | 17 +++++++
 .../src/components/EntryForm.tsx              | 50 +++++++++++++++++++
 .../src/services/diaryService.ts              |  8 ++-
 .../src/{services => }/utils/types.ts         |  2 +
 6 files changed, 83 insertions(+), 20 deletions(-)
 create mode 100644 Part_9/flight-diary-frontend/src/components/EntryContent.tsx
 create mode 100644 Part_9/flight-diary-frontend/src/components/EntryForm.tsx
 rename Part_9/flight-diary-frontend/src/{services => }/utils/types.ts (86%)

diff --git a/Part_9/flight-diary-backend/src/routes/diaries.ts b/Part_9/flight-diary-backend/src/routes/diaries.ts
index 601b350..397cbfd 100644
--- a/Part_9/flight-diary-backend/src/routes/diaries.ts
+++ b/Part_9/flight-diary-backend/src/routes/diaries.ts
@@ -13,13 +13,13 @@ router.post('/', (req, res) => {
 		const newDiaryEntry = toNewDiary(req.body);
 
 		const addedEntry = diaryService.addDiary(newDiaryEntry);
-		res.json(addedEntry);
+		return res.json(addedEntry);
 	} catch (error) {
 		let errorMessage = 'Somethign Went Wrong';
 		if (error instanceof Error) {
 			errorMessage += ' Error: ' + error.message;
 		}
-		res.send(400).send(errorMessage);
+		return res.send(400).send(errorMessage);
 	}
 });
 
diff --git a/Part_9/flight-diary-frontend/src/App.tsx b/Part_9/flight-diary-frontend/src/App.tsx
index fa44a98..1e3769d 100644
--- a/Part_9/flight-diary-frontend/src/App.tsx
+++ b/Part_9/flight-diary-frontend/src/App.tsx
@@ -1,20 +1,8 @@
 import { useEffect, useState } from 'react';
 import { getAll } from './services/diaryService';
-import { DiaryEntry } from './services/utils/types';
-
-const DiaryEntryContent = ({ diaryEntry }: { diaryEntry: DiaryEntry }): JSX.Element => {
-	return (
-		<div>
-			<h3>{diaryEntry.date}</h3>
-			<p><b>Visibility:</b> {diaryEntry.visibility}</p>
-			<p><b>Weather:</b> {diaryEntry.weather}</p>
-			{diaryEntry.comment
-				? (<p><b>Comment:</b> {diaryEntry.comment}</p>)
-				: null
-			}
-		</div>
-	)
-}
+import { DiaryEntry } from './utils/types';
+import EntryContent from './components/EntryContent'
+import EntryForm from './components/EntryForm';
 
 const App = (): JSX.Element => {
 	const [entries, setEntries] = useState<DiaryEntry[]>([])
@@ -26,10 +14,10 @@ const App = (): JSX.Element => {
 	return (
 	<div>
 		<h1>Flight Diary</h1>
-
+		<EntryForm  entries={entries} setEntries={setEntries} />
 		<h2>Entries</h2>
 		{entries.map(entry => (
-			<DiaryEntryContent key={entry.id} diaryEntry={entry} />
+			<EntryContent key={entry.id} diaryEntry={entry} />
 		))}
 	</div>)
 }
diff --git a/Part_9/flight-diary-frontend/src/components/EntryContent.tsx b/Part_9/flight-diary-frontend/src/components/EntryContent.tsx
new file mode 100644
index 0000000..b2cf677
--- /dev/null
+++ b/Part_9/flight-diary-frontend/src/components/EntryContent.tsx
@@ -0,0 +1,17 @@
+import { DiaryEntry } from '../utils/types';
+
+const EntryContent = ({ diaryEntry }: { diaryEntry: DiaryEntry }): JSX.Element => {
+	return (
+		<div>
+			<h3>{diaryEntry.date}</h3>
+			<p><b>Visibility:</b> {diaryEntry.visibility}</p>
+			<p><b>Weather:</b> {diaryEntry.weather}</p>
+			{diaryEntry.comment
+				? (<p><b>Comment:</b> {diaryEntry.comment}</p>)
+				: null
+			}
+		</div>
+	)
+}
+
+export default EntryContent
diff --git a/Part_9/flight-diary-frontend/src/components/EntryForm.tsx b/Part_9/flight-diary-frontend/src/components/EntryForm.tsx
new file mode 100644
index 0000000..ddc7f8a
--- /dev/null
+++ b/Part_9/flight-diary-frontend/src/components/EntryForm.tsx
@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+import { postEntry } from '../services/diaryService';
+import { DiaryEntry } from '../utils/types';
+
+const EntryForm = ({ entries, setEntries }: { entries: DiaryEntry[], setEntries: React.Dispatch<React.SetStateAction<DiaryEntry[]>> }) => {
+	const [date, setDate] = useState('')
+	const [visibility, setVisibility] = useState('')
+	const [weather, setWeather] = useState('')
+	const [comment, setComment] = useState('')
+
+	const handleSubmit = (event: React.SyntheticEvent) => {
+			event.preventDefault()
+			console.log('Adding Entry')
+			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+			// @ts-ignore
+			postEntry({ date, visibility , weather, comment}).then(newEntry => {
+				setEntries(entries.concat(newEntry))
+			})
+			setDate('')
+			setWeather('')
+			setVisibility('')
+			setComment('')
+	}
+
+	return (
+		<div>
+			<form onSubmit={handleSubmit}>
+				<p>
+					Date: &nbsp;
+					<input value={date} onChange={e => setDate(e.target.value)} />
+				</p>
+				<p>
+					Weather: &nbsp;
+					<input value={weather} onChange={e => setWeather(e.target.value)} />
+				</p>
+				<p>
+					Visibility: &nbsp;
+					<input value={visibility} onChange={e => setVisibility(e.target.value)} />
+				</p>
+				<p>
+					Comment: &nbsp;
+					<input value={comment} onChange={e => setComment(e.target.value)} />
+				</p>
+				<button type="submit">Add Entry</button>
+			</form>
+		</div>
+	)
+}
+
+export default EntryForm
diff --git a/Part_9/flight-diary-frontend/src/services/diaryService.ts b/Part_9/flight-diary-frontend/src/services/diaryService.ts
index c8282cf..0284dd6 100644
--- a/Part_9/flight-diary-frontend/src/services/diaryService.ts
+++ b/Part_9/flight-diary-frontend/src/services/diaryService.ts
@@ -1,5 +1,5 @@
 import axios from 'axios';
-import { DiaryEntry } from './utils/types';
+import { DiaryEntry, NewDiaryEntry } from '../utils/types';
 
 const baseUrl = 'http://localhost:3001/api/diaries'
 
@@ -8,3 +8,9 @@ export const getAll = async () => {
 	
 	return response.data
 }
+
+export const postEntry = async (entryObject: NewDiaryEntry) => {
+	const response = await axios.post<DiaryEntry>(baseUrl, entryObject)
+
+	return response.data
+}
diff --git a/Part_9/flight-diary-frontend/src/services/utils/types.ts b/Part_9/flight-diary-frontend/src/utils/types.ts
similarity index 86%
rename from Part_9/flight-diary-frontend/src/services/utils/types.ts
rename to Part_9/flight-diary-frontend/src/utils/types.ts
index 2ad8715..2b71d36 100644
--- a/Part_9/flight-diary-frontend/src/services/utils/types.ts
+++ b/Part_9/flight-diary-frontend/src/utils/types.ts
@@ -20,3 +20,5 @@ export interface DiaryEntry {
 	visibility: Visibility;
 	comment?: string;
 }
+
+export type NewDiaryEntry = Omit<DiaryEntry, "id">
-- 
2.51.2