Database #25

FranziGraml · 2022-05-31T08:17:44Z

In this PR I connected my database (MongoDB Atlas) with Add and Delete Button.
Sorry for all the commits at the end but my github checks kept failing! Sorry!!!

vercel · 2022-05-31T08:17:46Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
capstone-project	✅ Ready (Inspect)	Visit Preview	Jun 1, 2022 at 1:46PM (UTC)

F-Kirchhoff

Hey Franzi, looking good so far. I have only some minor suggestions about error handling and state management. Besides that its top!

F-Kirchhoff · 2022-05-31T14:04:15Z

pages/api/post/[id].js

+		const deletedPost = await Post.findByIdAndDelete(id);
+		res.status(200).json({ message: 'post deleted', post: deletedPost });


what happens if the deletion fails? I guess you can add a try and catch block here.

F-Kirchhoff · 2022-05-31T14:05:56Z

pages/api/post/[id].js

+	} else {
+		const singleCard = await Post.findById(id);


Even when a 'POST' or 'PUT' request is made this code is executed. Please add another else if block to check whether the method is 'GET'. (You could use a switch statement as well).

F-Kirchhoff · 2022-05-31T14:06:22Z

pages/api/post/create.js

+
+		response.status(200).json({ message: 'post created', post: newPost });
+	} else {
+		response.status(400).json({ error: 'wrong method' });


the correct status code is 405.

What Felix said

F-Kirchhoff · 2022-05-31T14:10:13Z

pages/api/post/create.js

+		const newPost = await Post.create({
+			name: data.name,
+			content: data.post,
+			mail: data.mail,
+			mobile: data.mobile,
+			postDate: data.postDate,
+		});
+
+		response.status(200).json({ message: 'post created', post: newPost });


Here you could also add error handling if you like.

Error-handling still missing :P

F-Kirchhoff · 2022-05-31T14:17:04Z

pages/posts.js

-	const data = getPosts();
+export async function getStaticProps() {
+	const posts = await getPosts();
+	console.log('posts: ' + JSON.stringify(posts));


Please remove all logs before merging 🕵️

Still there? ;)

F-Kirchhoff · 2022-05-31T14:23:42Z

src/Components/Form/Form.js

 	const [nameValue, setNameValue] = useState('');
 	const [postValue, setPostValue] = useState('');
 	const [mailValue, setMailValue] = useState('');
 	const [mobileValue, setMobileValue] = useState('');


Maybe you can refactor this into one object state at some point?

I will do this in one of my next user storys. :)

F-Kirchhoff · 2022-05-31T14:24:03Z

src/Components/Form/Form.js

 			setNameValue('');
 			setPostValue('');
 			setMailValue('');
 			setMobileValue('');
 			onSetIsFormActive(false);
 			setIsError(false);
+			console.log(await response.json);


You did not remove that?

F-Kirchhoff · 2022-05-31T14:26:00Z

src/Components/Form/RenderPosts.js

+			{posts
+				.sort((a, b) => b.postDate - a.postDate)
+				.map(post => {
+					return (


you could use an implicit return here:

post => ( <ul key = ...> ... </ul> )

F-Kirchhoff · 2022-05-31T14:27:30Z

src/Components/lib/database.js

+dotenv.config({ path: '../../../.env.local' });
+
+const url = process.env.DB_CONNECTION; /* 'mongodb://localhost:27017/digi-nomads'; */
+console.log(url);


F-Kirchhoff · 2022-05-31T14:34:44Z

src/Services/initial-post-db.json

+[
+  {
+    "name": "Franzi",
+    "content": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. ",
+    "mail": "hallo.welt@com",
+    "mobile": "2367654"
+  },
+  {
+    "name": "Max",
+    "content": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. ",
+    "mail": "hallo.world@com",
+    "mobile": "25598078"
+  },
+  {
+    "name": "Muc-web",
+    "content": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. ",
+    "mail": "hallo.terra@com",
+    "mobile": "648893678"
+  }
+]


You don't need this any longer if you have a db right?

FranziGraml · 2022-05-31T18:39:47Z

Thanks a lot for the nice and helpful feedback!

doemser

You replied with "thumbs up" to most of the changes Felix requested, but did not implement them.

doemser · 2022-06-01T09:05:56Z

src/Components/Form/RenderPosts.js

+				.sort((a, b) => b.postDate - a.postDate)
+				.map(post => {
+					return (
+						<ul key={nanoid()}>


take your post.id as key instead

doemser · 2022-06-01T09:06:22Z

src/Components/Form/Form.js

 			setNameValue('');
 			setPostValue('');
 			setMailValue('');
 			setMobileValue('');
 			onSetIsFormActive(false);
 			setIsError(false);
+			console.log(await response.json);


You did not remove that?

doemser · 2022-06-01T09:13:41Z

pages/posts.js

+				<FormWrapper isFormActive={isFormActive}>
+					<Form onSetIsFormActive={setIsFormActive} />
+				</FormWrapper>


Here you pass down the setIsFormActive function directly into your Form. This is something you should avoid.

Instead do something like this:

function deactivateForm() { setIsFormActive(!isFormActive); }

An then pass it down like this:

<Form onSetIsFormActive={deactivateForm} />

This way you don't separate the logic from the useState, means: You can see which changes to the useState can be applied without leaving the place where the useState was written.

This procedure is very important and is called "Lifting state up". Here is a useful Link

doemser · 2022-06-01T09:14:06Z

pages/posts.js

-	const data = getPosts();
+export async function getStaticProps() {
+	const posts = await getPosts();
+	console.log('posts: ' + JSON.stringify(posts));


Still there? ;)

doemser · 2022-06-01T09:14:55Z

pages/api/post/create.js

+
+		response.status(200).json({ message: 'post created', post: newPost });
+	} else {
+		response.status(400).json({ error: 'wrong method' });


What Felix said

doemser · 2022-06-01T09:15:12Z

pages/api/post/create.js

+		const newPost = await Post.create({
+			name: data.name,
+			content: data.post,
+			mail: data.mail,
+			mobile: data.mobile,
+			postDate: data.postDate,
+		});
+
+		response.status(200).json({ message: 'post created', post: newPost });


Error-handling still missing :P

FranziGraml · 2022-06-01T10:24:34Z

Hi Dominik
Thanks for you reviewing. I hope that this time my changes were loaded correctly.

F-Kirchhoff

Very cool 🦊. There are still some little tweaks you need to add, but you are almost done!

F-Kirchhoff · 2022-06-01T12:05:32Z

pages/api/post/[id].js

+			const deletedPost = await Post.findByIdAndDelete(id);
+			res.status(200).json({ message: 'post deleted', post: deletedPost });
+		} catch (error) {
+			console.log('Error could not delete', error.message);


If you end up in this catch block, the api does not send a response to your client. This will result in a timeout. You should send a status 501 for internal server error back to the client.

F-Kirchhoff · 2022-06-01T12:05:59Z

pages/api/post/create.js

-		response.status(200).json({ message: 'post created', post: newPost });
+			response.status(200).json({ message: 'post created', post: newPost });
+		} catch (error) {
+			console.log('Error could not POST', error.message);


F-Kirchhoff · 2022-06-01T12:06:17Z

pages/posts.js

+	function setFormActiveFalse() {
+		setIsFormActive(false);
+	}


F-Kirchhoff · 2022-06-01T12:07:58Z

pages/posts.js

 	return (
 		<main>
 			<SWRConfig value={{ fetcher: swrFetcher, fallback }}>
 				<ButtonAdd type="button" onClick={() => setIsFormActive(prevCheck => !prevCheck)}>
 					<Icon variant="plus" />
 				</ButtonAdd>
 				<FormWrapper isFormActive={isFormActive}>
-					<Form onSetIsFormActive={setIsFormActive} />
+					<Form onSetFormActiveFalse={() => setFormActiveFalse()} />


Suggested change

<Form onSetFormActiveFalse={() => setFormActiveFalse()} />

<Form onSetFormActiveFalse={setFormActiveFalse} />

This works as well and is a bit shorter. But your solution is nice too.

F-Kirchhoff · 2022-06-01T12:08:47Z

src/Components/Form/DeleteButton.js

@@ -11,10 +11,9 @@ export default function DeleteButton({ id }) {
 		<ButtonDelete
 			type="button"
 			onClick={async () => {
-				const response = await fetch('/api/post/' + id, {
+				const _response = await fetch('/api/post/' + id, {


if you don't want to use the response you can just omit the constant declaration:

Suggested change

const _response = await fetch('/api/post/' + id, {

await fetch('/api/post/' + id, {

Good to know. I would still like to keep it as I was very pleased with my solution.

F-Kirchhoff · 2022-06-01T12:09:35Z

src/Components/Form/RenderPosts.js

@@ -1,6 +1,6 @@
 import PostCard from '../PostCard/PostCard';
 import useSWR from 'swr';
-import { nanoid } from 'nanoid';
+//import { nanoid } from 'nanoid';


Please remove code instead of commenting it out ;)

F-Kirchhoff

This looks really good now! 🚀

FranziGraml added 7 commits May 29, 2022 16:12

Add buttonAdd icon in posts.js

b33f0db

Add install mongoose

5902552

Add json-file without id

483622d

Add connected to MongoDB

011218f

Add connected deleteButton and addButton

a05ef8c

Add mongoDB Atlas

7ceca30

Add delete console.log

8ca67c3

Add delete dynamic

5a892ed

vercel bot deployed to Preview May 31, 2022 08:43 View deployment

Add improve error

8239f08

vercel bot deployed to Preview May 31, 2022 09:01 View deployment

test build

a3c6cdf

vercel bot deployed to Preview May 31, 2022 09:20 View deployment

added dotenv to dependencies

6300d37

vercel bot deployed to Preview May 31, 2022 09:28 View deployment

added dotenv.config to database

f18b45c

vercel bot deployed to Preview May 31, 2022 09:50 View deployment

updated database.js

93cea1e

vercel bot deployed to Preview May 31, 2022 09:55 View deployment

add .env path to dotenv config

f186178

vercel bot deployed to Preview May 31, 2022 10:04 View deployment

add alternative path to database

f635376

vercel bot deployed to Preview May 31, 2022 10:33 View deployment

update database.js

5370c79

vercel bot had a problem deploying to Preview May 31, 2022 10:57 Failure

add .env as secret to run-tests.yml

15d02e5

vercel bot deployed to Preview May 31, 2022 11:09 View deployment

add .env as secret to run-tests.yml2

3883023

vercel bot deployed to Preview May 31, 2022 11:11 View deployment

update github workflow

56f1d22

vercel bot deployed to Preview May 31, 2022 11:15 View deployment

F-Kirchhoff suggested changes May 31, 2022

View reviewed changes

implemented suggested changes from PR

4e7fc71

vercel bot deployed to Preview May 31, 2022 20:28 View deployment

doemser suggested changes Jun 1, 2022

View reviewed changes

Add proposed changes from PR

e955099

vercel bot deployed to Preview June 1, 2022 09:54 View deployment

Add changes PR again

68df0e7

vercel bot deployed to Preview June 1, 2022 10:19 View deployment

F-Kirchhoff suggested changes Jun 1, 2022

View reviewed changes

Add second changes PR

661a364

vercel bot deployed to Preview June 1, 2022 13:18 View deployment

F-Kirchhoff approved these changes Jun 1, 2022

View reviewed changes

Add test push

6464879

vercel bot deployed to Preview June 1, 2022 13:46 View deployment

FranziGraml merged commit f5dec03 into main Jun 1, 2022

		const deletedPost = await Post.findByIdAndDelete(id);
		res.status(200).json({ message: 'post deleted', post: deletedPost });

	<Form onSetFormActiveFalse={() => setFormActiveFalse()} />
	<Form onSetFormActiveFalse={setFormActiveFalse} />

	const _response = await fetch('/api/post/' + id, {
	await fetch('/api/post/' + id, {

Database #25

Database #25

Conversation

FranziGraml commented May 31, 2022 • edited

vercel bot commented May 31, 2022 • edited

F-Kirchhoff left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

FranziGraml commented May 31, 2022

doemser left a comment

Choose a reason for hiding this comment

doemser Jun 1, 2022 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

FranziGraml commented Jun 1, 2022

F-Kirchhoff left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

F-Kirchhoff left a comment

Choose a reason for hiding this comment

FranziGraml commented May 31, 2022 •

edited

vercel bot commented May 31, 2022 •

edited

doemser Jun 1, 2022 •

edited