From e8ac3135b473cdb9c3ea8bfd0b350945595c9697 Mon Sep 17 00:00:00 2001 From: dannebrob <65211641+dannebrob@users.noreply.github.com> Date: Thu, 23 Mar 2023 22:43:27 +0100 Subject: [PATCH 01/17] save --- code/.eslintrc.json | 14 ++++---------- code/package.json | 2 +- code/src/App.js | 32 +++++++++++++++++++++++++++++--- code/src/components/Input.js | 28 ++++++++++++++++++++++++++++ code/src/components/List.js | 24 ++++++++++++++++++++++++ 5 files changed, 86 insertions(+), 14 deletions(-) create mode 100644 code/src/components/Input.js create mode 100644 code/src/components/List.js diff --git a/code/.eslintrc.json b/code/.eslintrc.json index c9c0675c3..df5250df5 100644 --- a/code/.eslintrc.json +++ b/code/.eslintrc.json @@ -1,7 +1,5 @@ { - "extends": [ - "airbnb" - ], + "extends": ["airbnb"], "globals": { "document": true, "window": true, @@ -22,10 +20,9 @@ "modules": true } }, - "plugins": [ - "react-hooks" - ], + "plugins": ["react-hooks"], "rules": { + "linebreak-style": ["off", "unix"], "react/function-component-definition": [ 2, { @@ -42,10 +39,7 @@ "allowSingleLine": true } ], - "comma-dangle": [ - "error", - "never" - ], + "comma-dangle": ["error", "never"], "consistent-return": "off", "curly": "error", "eol-last": "off", diff --git a/code/package.json b/code/package.json index 68869f589..230336e0a 100644 --- a/code/package.json +++ b/code/package.json @@ -1,7 +1,7 @@ { "name": "technigo-react-starter", "version": "1.0.0", - "private": true, + "private": false, "dependencies": { "babel-eslint": "^10.1.0", "eslint": "^8.21.0", diff --git a/code/src/App.js b/code/src/App.js index f2007d229..8ecac92c4 100644 --- a/code/src/App.js +++ b/code/src/App.js @@ -1,9 +1,35 @@ -import React from 'react'; +/* eslint-disable react/jsx-closing-bracket-location */ +/* eslint-disable no-unused-vars */ +import React, { useEffect, useState } from 'react'; +import { List } from 'components/List'; +import { Input } from 'components/Input'; export const App = () => { + const [thoughts, setThoughts] = useState([]); + const [newPost, setNewPost] = useState([]); + + useEffect(() => { + fetch('https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts') + .then((res) => res.json()) + .then((data) => { + setThoughts(data); + }); + }, []); + return (
- Find me in src/app.js! + +
); -} +}; diff --git a/code/src/components/Input.js b/code/src/components/Input.js new file mode 100644 index 000000000..dd65f2851 --- /dev/null +++ b/code/src/components/Input.js @@ -0,0 +1,28 @@ +/* eslint-disable react/jsx-closing-bracket-location */ +/* eslint-disable no-unused-vars */ +import React from 'react'; + +export const Input = (props) => { + console.log(props); + const handleFormSubmit = (event) => { + event.preventDefault(); + }; + return ( +
+
+ + +
+
+ ); +}; diff --git a/code/src/components/List.js b/code/src/components/List.js new file mode 100644 index 000000000..cee75cdcb --- /dev/null +++ b/code/src/components/List.js @@ -0,0 +1,24 @@ +/* eslint-disable no-underscore-dangle */ +import React from 'react'; + +export const List = (props) => { + console.log(props.thoughts); + return ( +
+ +
+ ); +}; From c6e4b06c88e880e4e3857e3fd2f869343b708246 Mon Sep 17 00:00:00 2001 From: dannebrob <65211641+dannebrob@users.noreply.github.com> Date: Thu, 23 Mar 2023 23:23:06 +0100 Subject: [PATCH 02/17] posting working --- code/src/App.js | 26 ++++++++++++-------------- code/src/components/Input.js | 28 +++++++++++++++++++++------- code/src/components/List.js | 6 +++--- 3 files changed, 36 insertions(+), 24 deletions(-) diff --git a/code/src/App.js b/code/src/App.js index 8ecac92c4..a19732791 100644 --- a/code/src/App.js +++ b/code/src/App.js @@ -6,30 +6,28 @@ import { Input } from 'components/Input'; export const App = () => { const [thoughts, setThoughts] = useState([]); - const [newPost, setNewPost] = useState([]); + const [newPost, setNewPost] = useState(''); useEffect(() => { fetch('https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts') .then((res) => res.json()) .then((data) => { setThoughts(data); - }); + }) + .catch((error) => console.log(error)); }, []); return (
- - + {thoughts && ( + + )} + {thoughts && }
); }; diff --git a/code/src/components/Input.js b/code/src/components/Input.js index dd65f2851..4b3856b91 100644 --- a/code/src/components/Input.js +++ b/code/src/components/Input.js @@ -2,10 +2,24 @@ /* eslint-disable no-unused-vars */ import React from 'react'; -export const Input = (props) => { - console.log(props); +export const Input = ({ newPost, setNewPost, thoughts, setThoughts }) => { const handleFormSubmit = (event) => { event.preventDefault(); + const options = { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ message: newPost }) + }; + + fetch('https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts', options) + .then((res) => res.json()) + .then((newThought) => { + console.log(newThought); + setThoughts((prevThoughts) => [newThought, ...prevThoughts]); + }) + .catch((error) => console.log(error)); }; return (
@@ -15,13 +29,13 @@ export const Input = (props) => { { - // return event.target.value; - // })} + value={newPost} + onChange={(e) => { + setNewPost(e.target.value); + }} /> - +
); diff --git a/code/src/components/List.js b/code/src/components/List.js index cee75cdcb..9bb95f363 100644 --- a/code/src/components/List.js +++ b/code/src/components/List.js @@ -1,12 +1,12 @@ +/* eslint-disable no-unused-vars */ /* eslint-disable no-underscore-dangle */ import React from 'react'; -export const List = (props) => { - console.log(props.thoughts); +export const List = ({ thoughts, setThoughts }) => { return (