├── .prettierrc.json ├── .prettierignore ├── .eslintignore ├── nodemon.json ├── client ├── src │ ├── pages │ │ ├── index.js │ │ ├── SignUpPage.stories.js │ │ ├── Budget.js │ │ ├── CreateToDo.stories.js │ │ ├── ToDoPage.stories.js │ │ ├── SignUpPage.js │ │ ├── AddListItem.js │ │ ├── CreateToDo.js │ │ ├── Home.js │ │ ├── GuestsPage.js │ │ └── ToDoPage.js │ ├── components │ │ ├── ToDoListItem │ │ │ ├── index.js │ │ │ ├── ToDoListItem.stories.js │ │ │ └── ToDoListItem.js │ │ ├── form │ │ │ ├── Button.stories.js │ │ │ ├── DropDown.stories.js │ │ │ ├── Form.stories.js │ │ │ ├── Input.stories.js │ │ │ ├── Button.js │ │ │ ├── DropDown.js │ │ │ ├── Input.js │ │ │ └── Form.js │ │ ├── listItem │ │ │ ├── ListItem.stories.js │ │ │ └── ListItem.js │ │ ├── signUpForm │ │ │ ├── SignUpForm.stories.js │ │ │ └── SignUpForm.js │ │ ├── DeleteButton.stories.js │ │ ├── signUpButton │ │ │ ├── SignUpButton.stories.js │ │ │ └── SignUpButton.js │ │ ├── addNewItemForm │ │ │ ├── AddNewItemForm.stories.js │ │ │ └── AddNewItemForm.js │ │ ├── menu │ │ │ ├── Menu.stories.js │ │ │ └── Menu.js │ │ ├── Header │ │ │ ├── Header.stories.js │ │ │ └── Header.js │ │ ├── headerSignUp │ │ │ ├── HeaderSignUp.stories.js │ │ │ └── HeaderSignUp.js │ │ ├── IitemsList │ │ │ └── ItemsList.js │ │ ├── userData │ │ │ ├── UserDataDate.js │ │ │ └── UserDataNames.js │ │ ├── countDown │ │ │ └── CountDown.js │ │ ├── Modal.js │ │ ├── MenuList │ │ │ └── MenuList.js │ │ ├── DeleteButton.js │ │ ├── menuListItem │ │ │ └── MenuListItem.js │ │ └── List │ │ │ ├── List.js │ │ │ └── List.stories.js │ ├── assets │ │ ├── signUpBg.png │ │ ├── homeBgImage.png │ │ ├── menu.svg │ │ ├── delete.svg │ │ ├── uncompleted.svg │ │ ├── close.svg │ │ ├── filter.svg │ │ ├── time.svg │ │ ├── bubble.svg │ │ ├── bubble1.svg │ │ ├── euro.svg │ │ ├── completed.svg │ │ ├── people.svg │ │ ├── heart.svg │ │ ├── addNew.svg │ │ ├── tasks.svg │ │ ├── logo.svg │ │ └── logo_Readme.svg │ ├── fonts │ │ ├── roboto-regular.ttf │ │ └── lora-mediumItalic.ttf │ ├── App.test.js │ ├── api │ │ ├── fetchGuests.js │ │ ├── deleteToDo.js │ │ ├── deleteGuest.js │ │ ├── postToDo.js │ │ ├── postGuest.js │ │ └── fetchToDos.js │ ├── setupTests.js │ ├── apiAccount │ │ ├── fetchAccount.js │ │ └── postAccount.js │ ├── stories │ │ ├── Header.stories.js │ │ ├── Page.stories.js │ │ ├── header.css │ │ ├── button.css │ │ ├── Button.stories.js │ │ ├── assets │ │ │ ├── direction.svg │ │ │ ├── flow.svg │ │ │ ├── code-brackets.svg │ │ │ ├── comments.svg │ │ │ ├── repo.svg │ │ │ ├── plugin.svg │ │ │ ├── stackalt.svg │ │ │ └── colors.svg │ │ ├── page.css │ │ ├── Button.js │ │ ├── Header.js │ │ ├── Page.js │ │ └── Introduction.stories.mdx │ ├── index.js │ ├── hooks │ │ └── useAsync.js │ ├── App.js │ ├── GlobalStyles.js │ └── serviceWorker.js ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── index.html ├── .storybook │ ├── main.js │ └── preview.js ├── .gitignore ├── package.json └── README.md ├── .github ├── ISSUE_TEMPLATE │ └── user-story.md └── workflows │ └── node.js.yml ├── .eslintrc.json ├── server.js ├── README.md ├── LICENSE ├── db.json ├── package.json └── .gitignore /.prettierrc.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | build 2 | coverage -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | build/ 3 | storybook-static/ -------------------------------------------------------------------------------- /nodemon.json: -------------------------------------------------------------------------------- 1 | { 2 | "ignore": ["client/*", "db.json"] 3 | } 4 | -------------------------------------------------------------------------------- /client/src/pages/index.js: -------------------------------------------------------------------------------- 1 | export { default } from "./CreateToDo"; 2 | -------------------------------------------------------------------------------- /client/src/components/ToDoListItem/index.js: -------------------------------------------------------------------------------- 1 | export { default } from "./ToDoList"; 2 | -------------------------------------------------------------------------------- /client/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /client/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlexRyzhkova/MarryMe_App/HEAD/client/public/favicon.ico -------------------------------------------------------------------------------- /client/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlexRyzhkova/MarryMe_App/HEAD/client/public/logo192.png -------------------------------------------------------------------------------- /client/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlexRyzhkova/MarryMe_App/HEAD/client/public/logo512.png -------------------------------------------------------------------------------- /client/src/assets/signUpBg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlexRyzhkova/MarryMe_App/HEAD/client/src/assets/signUpBg.png -------------------------------------------------------------------------------- /client/src/assets/homeBgImage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlexRyzhkova/MarryMe_App/HEAD/client/src/assets/homeBgImage.png -------------------------------------------------------------------------------- /client/src/fonts/roboto-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlexRyzhkova/MarryMe_App/HEAD/client/src/fonts/roboto-regular.ttf -------------------------------------------------------------------------------- /client/src/fonts/lora-mediumItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlexRyzhkova/MarryMe_App/HEAD/client/src/fonts/lora-mediumItalic.ttf -------------------------------------------------------------------------------- /client/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "@testing-library/react"; 3 | import App from "./App"; 4 | 5 | test("renders App", () => { 6 | render(); 7 | }); 8 | -------------------------------------------------------------------------------- /client/src/components/form/Button.stories.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Button from "./Button"; 3 | 4 | export default { 5 | title: "Button", 6 | component: Button, 7 | }; 8 | 9 | export const SubmitButton = () => 23 | ); 24 | }; 25 | 26 | Button.propTypes = { 27 | /** 28 | * Is this the principal call to action on the page? 29 | */ 30 | primary: PropTypes.bool, 31 | /** 32 | * What background color to use 33 | */ 34 | backgroundColor: PropTypes.string, 35 | /** 36 | * How large should the button be? 37 | */ 38 | size: PropTypes.oneOf(["small", "medium", "large"]), 39 | /** 40 | * Button contents 41 | */ 42 | label: PropTypes.string.isRequired, 43 | /** 44 | * Optional click handler 45 | */ 46 | onClick: PropTypes.func, 47 | }; 48 | 49 | Button.defaultProps = { 50 | backgroundColor: null, 51 | primary: false, 52 | size: "medium", 53 | onClick: undefined, 54 | }; 55 | -------------------------------------------------------------------------------- /client/src/stories/assets/flow.svg: -------------------------------------------------------------------------------- 1 | illustration/flow -------------------------------------------------------------------------------- /client/src/components/Header/Header.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import styled from "@emotion/styled"; 3 | import logoSrc from "../../assets/logo.svg"; 4 | import MenuIconSrc from "../../assets/menu.svg"; 5 | import Menu from "../menu/Menu"; 6 | 7 | const Header = () => { 8 | const [open, setOpen] = useState(false); 9 | 10 | return ( 11 | 12 | 13 | setOpen(!open)} 16 | src={MenuIconSrc} 17 | alt="Menu icon" 18 | /> 19 | 20 | 21 | 22 | 23 | ); 24 | }; 25 | 26 | export default Header; 27 | 28 | //Styling 29 | const Container = styled.div` 30 | background-color: #a79292; 31 | display: flex; 32 | padding: 5px; 33 | align-items: center; 34 | position: relative; 35 | `; 36 | const MenuButton = styled.button` 37 | justify-self: flex-start; 38 | padding: 0px 0px 0px 10px; 39 | outline: none; 40 | background-color: #a79292; 41 | border: none; 42 | position: absolute; 43 | left: 2 rem; 44 | 45 | img { 46 | position: ${({ open }) => (open ? "fixed" : "relative")}; 47 | fill: ${({ open }) => (open ? "#383636" : "#fff")}; 48 | z-index: 50; 49 | } 50 | `; 51 | 52 | const Logo = styled.img` 53 | margin: auto; 54 | `; 55 | -------------------------------------------------------------------------------- /client/src/pages/SignUpPage.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import SignUpForm from "../components/signUpForm/SignUpForm"; 3 | import HeaderSignUp from "../components/headerSignUp/HeaderSignUp"; 4 | import signUpPictureSrc from "../assets/signUpBg.png"; 5 | import styled from "@emotion/styled"; 6 | 7 | export const SignUpPage = () => { 8 | return ( 9 | 10 | 11 | 12 |

13 | Willkommen bei 14 |
15 | Marry Me 16 |

17 | 18 |

Melde dich an

19 | 20 | 21 | ); 22 | }; 23 | 24 | export default SignUpPage; 25 | 26 | // styling 27 | const Container = styled.div` 28 | display: flex; 29 | flex-direction: column; 30 | height: 100vh; 31 | form { 32 | padding: 3em 0; 33 | align-self: stretch; 34 | } 35 | h2 { 36 | padding-top: 1em; 37 | align-self: center; 38 | } 39 | `; 40 | const ImageContainer = styled.div` 41 | display: flex; 42 | padding: 3.1em 0; 43 | height: 100%; 44 | background: url(${signUpPictureSrc}); 45 | background-repeat: no-repeat; 46 | background-position: 40% 60%; 47 | background-size: cover; 48 | background-position: right; 49 | align-items: center; 50 | justify-items: center; 51 | 52 | h1 { 53 | text-align: center; 54 | margin: auto; 55 | } 56 | `; 57 | -------------------------------------------------------------------------------- /client/src/pages/AddListItem.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Modal from "../components/Modal"; 3 | import styled from "@emotion/styled"; 4 | import PropTypes from "prop-types"; 5 | import closeIconSrc from "../assets/close.svg"; 6 | import AddNewItemForm from "../components/addNewItemForm/AddNewItemForm"; 7 | 8 | export default function AddListItem({ 9 | handleCloseClick, 10 | guest, 11 | onSetShowModal, 12 | onRefetch, 13 | }) { 14 | return ( 15 | 16 | 17 | 18 | close button 19 | 20 |

Neuer Gast

21 | 26 | 27 | 28 | ); 29 | } 30 | 31 | //styling 32 | const Container = styled.div` 33 | display: flex; 34 | flex-direction: column; 35 | align-items: center; 36 | 37 | h2 { 38 | padding-bottom: 2em; 39 | } 40 | `; 41 | const CloseButton = styled.button` 42 | background: transparent; 43 | border: none; 44 | align-self: flex-start; 45 | outline: none; 46 | cursor: pointer; 47 | `; 48 | 49 | AddListItem.propTypes = { 50 | handleCloseClick: PropTypes.func, 51 | guest: PropTypes.any, 52 | onSetShowModal: PropTypes.func, 53 | onRefetch: PropTypes.func, 54 | }; 55 | -------------------------------------------------------------------------------- /client/src/stories/assets/code-brackets.svg: -------------------------------------------------------------------------------- 1 | illustration/code-brackets -------------------------------------------------------------------------------- /client/src/pages/CreateToDo.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "react-dropdown/style.css"; 3 | import Form from "../components/form/Form"; 4 | import Modal from "../components/Modal"; 5 | import styled from "@emotion/styled"; 6 | import PropTypes from "prop-types"; 7 | import closeIconSrc from "../assets/close.svg"; 8 | 9 | export default function CreateToDo({ 10 | handleCloseClick, 11 | toDo, 12 | onSetShowModal, 13 | onRefetch, 14 | }) { 15 | return ( 16 | 17 | 18 | 19 | close button 20 | 21 |

Neues ToDo

22 | 27 | 28 | 29 | ); 30 | } 31 | 32 | //styling 33 | const CreateToDoContainer = styled.div` 34 | display: flex; 35 | flex-direction: column; 36 | align-items: center; 37 | 38 | h2 { 39 | padding-bottom: 2em; 40 | } 41 | `; 42 | const CloseButton = styled.button` 43 | background: transparent; 44 | border: none; 45 | align-self: flex-start; 46 | outline: none; 47 | cursor: pointer; 48 | `; 49 | 50 | CreateToDo.propTypes = { 51 | handleCloseClick: PropTypes.func, 52 | toDo: PropTypes.any, 53 | onSetShowModal: PropTypes.func, 54 | onRefetch: PropTypes.func, 55 | }; 56 | -------------------------------------------------------------------------------- /client/src/pages/Home.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { getAccount } from "../apiAccount/fetchAccount"; 3 | import Countdown from "../components/countDown/CountDown"; 4 | import Header from "../components/Header/Header"; 5 | import UserDataDate from "../components/userData/UserDataDate"; 6 | import UserDataNames from "../components/userData/UserDataNames"; 7 | import useAsync from "../hooks/useAsync"; 8 | import bgImageSrc from "../assets/homeBgImage.png"; 9 | import styled from "@emotion/styled"; 10 | 11 | export default function Home() { 12 | const { data: account, error, loading } = useAsync(getAccount); 13 | 14 | return ( 15 | 16 |
17 | {error &&

Error

} 18 | {loading &&

Loading ...

} 19 | {account && } 20 |
{account && }
21 | {account && } 22 | 23 | ); 24 | } 25 | 26 | // Styling 27 | 28 | const HomeContainer = styled.div` 29 | display: flex; 30 | flex-direction: column; 31 | height: 100vh; 32 | h1, 33 | p { 34 | margin-top: 0.5em; 35 | } 36 | section { 37 | display: flex; 38 | flex-direction: column; 39 | background-image: url(${bgImageSrc}); 40 | background-repeat: no-repeat; 41 | background-position: center; 42 | height: 100%; 43 | div { 44 | margin: auto; 45 | } 46 | } 47 | `; 48 | -------------------------------------------------------------------------------- /client/src/stories/assets/comments.svg: -------------------------------------------------------------------------------- 1 | illustration/comments -------------------------------------------------------------------------------- /client/src/stories/assets/repo.svg: -------------------------------------------------------------------------------- 1 | illustration/repo -------------------------------------------------------------------------------- /client/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "client", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@babel/core": "^7.11.6", 7 | "@emotion/core": "^10.0.35", 8 | "@emotion/styled": "^10.0.27", 9 | "@storybook/addon-actions": "^6.0.21", 10 | "@storybook/addon-essentials": "^6.0.21", 11 | "@storybook/addon-links": "^6.0.21", 12 | "@storybook/node-logger": "^6.0.21", 13 | "@storybook/preset-create-react-app": "^3.1.4", 14 | "@storybook/react": "^6.0.21", 15 | "@testing-library/jest-dom": "^4.2.4", 16 | "@testing-library/react": "^9.5.0", 17 | "@testing-library/user-event": "^7.2.1", 18 | "babel-loader": "^8.1.0", 19 | "prop-types": "^15.7.2", 20 | "react": "^16.13.1", 21 | "react-dom": "^16.13.1", 22 | "react-dropdown": "^1.8.0", 23 | "react-hook-form": "^6.9.0", 24 | "react-is": "^16.13.1", 25 | "react-router-dom": "^5.2.0", 26 | "react-scripts": "3.4.3" 27 | }, 28 | "scripts": { 29 | "start": "react-scripts start", 30 | "build": "react-scripts build", 31 | "test": "react-scripts test", 32 | "eject": "react-scripts eject", 33 | "storybook": "start-storybook -p 6006 -s public", 34 | "build-storybook": "build-storybook -s public" 35 | }, 36 | "browserslist": { 37 | "production": [ 38 | ">0.2%", 39 | "not dead", 40 | "not op_mini all" 41 | ], 42 | "development": [ 43 | "last 1 chrome version", 44 | "last 1 firefox version", 45 | "last 1 safari version" 46 | ] 47 | }, 48 | "proxy": "http://localhost:3001", 49 | "devDependencies": { 50 | "mutationobserver-shim": "^0.3.7" 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /client/src/components/listItem/ListItem.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import deleteIconSrc from "../../assets/delete.svg"; 3 | import styled from "@emotion/styled"; 4 | import PropTypes from "prop-types"; 5 | import deleteGuest from "../../api/deleteGuest"; 6 | 7 | export default function ListItem({ 8 | guest, 9 | firstname, 10 | lastname, 11 | onRefetch, 12 | guestId, 13 | }) { 14 | async function handleDeleteGuest(event) { 15 | event.preventDefault(); 16 | await deleteGuest(guestId); 17 | await onRefetch(); 18 | } 19 | 20 | return ( 21 | 22 |

23 | {firstname} {lastname} 24 |

25 | 28 | 29 | ); 30 | } 31 | 32 | //Styling 33 | 34 | const Container = styled.li` 35 | display: flex; 36 | justify-content: space-between; 37 | align-items: center; 38 | padding: 1em; 39 | border-radius: 30px; 40 | margin: 5px; 41 | background-color: #ffffff; 42 | color: #141313; 43 | box-shadow: 2px 2px 6px 0px lightgrey; 44 | margin: 1em 1.7em; 45 | 46 | button { 47 | margin-right: 0.5em; 48 | display: flex; 49 | align-items: center; 50 | outline: none; 51 | border: none; 52 | cursor: pointer; 53 | color: grey; 54 | background-color: transparent; 55 | } 56 | p { 57 | padding-left: 0.7em; 58 | } 59 | `; 60 | 61 | ListItem.propTypes = { 62 | text: PropTypes.string, 63 | firstname: PropTypes.string, 64 | lastname: PropTypes.string, 65 | guest: PropTypes.array, 66 | onRefetch: PropTypes.func, 67 | guestId: PropTypes.any, 68 | }; 69 | -------------------------------------------------------------------------------- /client/src/stories/Header.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import PropTypes from "prop-types"; 3 | 4 | import { Button } from "./Button"; 5 | import "./header.css"; 6 | 7 | export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => ( 8 |
9 |
10 |
11 | 17 | 18 | 22 | 26 | 30 | 31 | 32 |

Acme

33 |
34 |
35 | {user ? ( 36 |
49 |
50 |
51 | ); 52 | 53 | Header.propTypes = { 54 | user: PropTypes.shape({}), 55 | onLogin: PropTypes.func.isRequired, 56 | onLogout: PropTypes.func.isRequired, 57 | onCreateAccount: PropTypes.func.isRequired, 58 | }; 59 | 60 | Header.defaultProps = { 61 | user: null, 62 | }; 63 | -------------------------------------------------------------------------------- /client/src/components/ToDoListItem/ToDoListItem.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styled from "@emotion/styled"; 3 | import PropTypes from "prop-types"; 4 | import completedSrc from "../../assets/completed.svg"; 5 | import uncompletedSrc from "../../assets/uncompleted.svg"; 6 | 7 | const ToDoListItem = ({ 8 | title, 9 | category, 10 | completed, 11 | onCompletedClick, 12 | onClick, 13 | }) => { 14 | return ( 15 | 22 | ); 23 | }; 24 | export default ToDoListItem; 25 | 26 | //Styling 27 | const Button = styled.button` 28 | border-radius: 1.8em; 29 | background-color: #ffffff; 30 | color: #141313; 31 | padding: 0.9em 0.3em 0.3em 0.3em; 32 | display: grid; 33 | grid-template-rows: auto auto; 34 | grid-template-columns: 10% 1fr auto; 35 | outline: none; 36 | box-shadow: 2px 2px 6px 0px lightgrey; 37 | column-gap: 10px; 38 | cursor: pointer; 39 | border: none; 40 | `; 41 | 42 | const CompletedButton = styled.button` 43 | grid-row: 1/3; 44 | grid-column: 1/2; 45 | outline: none; 46 | border: none; 47 | background-color: #ffffff; 48 | align-self: center; 49 | `; 50 | 51 | const TitelSpan = styled.span` 52 | align-self: end; 53 | justify-self: start; 54 | `; 55 | 56 | const CategorySpan = styled.span` 57 | font-size: 0.9rem; 58 | padding-right: 10px; 59 | grid-row: 2/3; 60 | grid-column: 3/4; 61 | `; 62 | 63 | // Proptypes 64 | ToDoListItem.propTypes = { 65 | title: PropTypes.string, 66 | category: PropTypes.string, 67 | completed: PropTypes.bool, 68 | onCompletedClick: PropTypes.func, 69 | onClick: PropTypes.func, 70 | }; 71 | -------------------------------------------------------------------------------- /client/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | Marry Me 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /db.json: -------------------------------------------------------------------------------- 1 | { 2 | "toDos": [ 3 | { 4 | "id": 1, 5 | "title": "Angebot anfordern", 6 | "category": "Location", 7 | "completed": false 8 | }, 9 | { 10 | "id": 2, 11 | "title": "Dj anrufen", 12 | "category": "Musik", 13 | "completed": false 14 | }, 15 | { 16 | "id": 3, 17 | "title": "Kleid auswählen", 18 | "category": "Bekleidung", 19 | "completed": false 20 | }, 21 | { 22 | "id": 4, 23 | "title": "Menü abstimmen", 24 | "category": "Location", 25 | "completed": false 26 | } 27 | ], 28 | "account": { 29 | "yourName": "Anna", 30 | "partnerName": "Max", 31 | "date": "2021-05-10" 32 | }, 33 | 34 | "guests": [ 35 | { 36 | "id": 1, 37 | "firstname": "Max", 38 | "lastname": "Mustermann" 39 | }, 40 | { 41 | "id": 2, 42 | "firstname": "Max", 43 | "lastname": "Mustermann" 44 | }, 45 | { 46 | "id": 3, 47 | "firstname": "Max", 48 | "lastname": "Mustermann" 49 | }, 50 | { 51 | "id": 4, 52 | "firstname": "Max", 53 | "lastname": "Mustermann" 54 | }, 55 | { 56 | "id": 5, 57 | "firstname": "Max", 58 | "lastname": "Mustermann" 59 | }, 60 | { 61 | "id": 6, 62 | "firstname": "Max", 63 | "lastname": "Mustermann" 64 | }, 65 | { 66 | "id": 7, 67 | "firstname": "Max", 68 | "lastname": "Mustermann" 69 | }, 70 | { 71 | "id": 8, 72 | "firstname": "Max", 73 | "lastname": "Mustermann" 74 | }, 75 | { 76 | "id": 9, 77 | "firstname": "Max", 78 | "lastname": "Mustermann" 79 | }, 80 | { 81 | "id": 10, 82 | "firstname": "Max", 83 | "lastname": "Mustermann" 84 | }, 85 | { 86 | "id": 11, 87 | "firstname": "Max", 88 | "lastname": "Mustermann" 89 | } 90 | ] 91 | } 92 | -------------------------------------------------------------------------------- /client/src/components/addNewItemForm/AddNewItemForm.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import PropTypes from "prop-types"; 3 | import styled from "@emotion/styled"; 4 | import Input from "../form/Input"; 5 | import Button from "../form/Button"; 6 | import { postGuest } from "../../api/postGuest"; 7 | 8 | const AddNewItem = ({ guest, onSetShowModal, onRefetch }) => { 9 | const [firstname, setFirstname] = useState(""); 10 | const [lastname, setLastname] = useState(""); 11 | 12 | async function handleSubmit(event) { 13 | event.preventDefault(); 14 | const guest = { firstname, lastname }; 15 | await postGuest(guest); 16 | onSetShowModal(false); 17 | await onRefetch(); 18 | } 19 | 20 | return ( 21 | 22 | { 27 | setFirstname(event.target.value); 28 | }} 29 | /> 30 | { 35 | setLastname(event.target.value); 36 | }} 37 | /> 38 | {/* */} 39 |