Merge pull request #9 from NisanurBulut/dev_eros

Dev eros refreshed for contextApi

Author: NisanurBulut

README.md

@@ -117,7 +117,7 @@ Hestia is a reactjs application that stores a list of books using localStorage.
 <br>
 <hr>
 20. <b>Eros</b> <br>
-This work is practical views of reactJs Hooks.
+This work is practical views of reactJs Hooks. Using hooks: useEffect, useState, useContext.
 
 ![App-Eros](https://github.com/NisanurBulut/MythologyOfReactJs/blob/master/Trailers/Trailer_Eros.gif)
 <br>
@@ -130,7 +130,7 @@ This work is practical views of reactJs tutorials.
 <br>
 <hr>
 
-<hr>
+
 ### Helpfull Websites
 [uidesigndaily](https://uidesigndaily.com/posts/sketch-birthdays-list-card-widget-day-1042)
 [Devto](https://dev.to/) [popmotion](https://popmotion.io) [json-server](https://github.com/typicode/json-server)

Trailers/Trailer_Eros.gif

@@ -1,5 +1,5 @@
 <b>Eros</b> <br>
-This work is practical views of reactJs Hooks.
+This work is practical views of reactJs Hooks. Using hooks: useEffect, useState, useContext.
 
 ![App-Eros](https://github.com/NisanurBulut/MythologyOfReactJs/blob/master/Trailers/Trailer_Eros.gif)
 <br>

Trailers/Trailer_Eros_v1.gif

@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
+import FormContextProvider, { FormContext } from './contexts/FormContext';
 import logo from './logo.svg';
 import Header from './components/Header';
 import './App.css';
@@ -7,7 +8,7 @@ import AddContact from './components/AddContact';
 
 function App() {
   const url = 'http://localhost:5000/contacts';
-  const [showAddContact, setShowAddContact] = useState(false);
+
   const [contacts, setContacts] = useState([]);
   const fetchContacts = async () => {
     const res = await fetch(url);
@@ -29,66 +30,64 @@ function App() {
 
   const deleteContact = async (id) => {
     await fetch(`${url}/${id}`, {
-      method:'DELETE'
+      method: 'DELETE',
     });
     setContacts(contacts.filter((a) => a.id !== id));
   };
   const toggleReminder = async (id) => {
     const reminderContact = await fetchContact(id);
-    const updateContact = {...reminderContact, reminder:!reminderContact.reminder}
-    const res = await fetch (`${url}/${id}`, {
-      method:'PUT',
-      headers:{'Content-type':'application/json'},
-      body:JSON.stringify(updateContact)
-    })
+    const updateContact = {
+      ...reminderContact,
+      reminder: !reminderContact.reminder,
+    };
+    const res = await fetch(`${url}/${id}`, {
+      method: 'PUT',
+      headers: { 'Content-type': 'application/json' },
+      body: JSON.stringify(updateContact),
+    });
     const data = await res.json();
 
     setContacts(
       contacts.map((contact) =>
-        contact.id === id
-          ? { ...contact, reminder: data.reminder }
-          : contact
+        contact.id === id ? { ...contact, reminder: data.reminder } : contact
       )
     );
   };
   const addContact = async (contact) => {
     console.log(JSON.stringify(contact));
-    const res = await fetch (`${url}`, {
-      method:'POST',
-      headers:{'Content-type':'application/json'},
-      body:JSON.stringify(contact)
-    })
+    const res = await fetch(`${url}`, {
+      method: 'POST',
+      headers: { 'Content-type': 'application/json' },
+      body: JSON.stringify(contact),
+    });
     const data = await res.json();
     setContacts([...contacts, data]);
-    setShowAddContact(false);
+    toggleForm();
     // const id = Math.floor(Math.random() * 1000) + 1;
     // const newContact = { id, ...contact };
     // setContacts([...contacts, newContact]);
   };
+  const { isFormOpen, toggleForm } = useContext(FormContext);
   return (
-    <div className="App">
-      <header className="App-header">
-        <h2>Love Tracker</h2>
-        <div className="container">
-          <Header
-            title="Eros"
-            onAdd={() => setShowAddContact(!showAddContact)}
-            showAddContact={showAddContact}
-          />
 
-          {contacts.length > 0 ? (
-            <Contacts
-              contacts={contacts}
-              onDelete={deleteContact}
-              onToggleReminder={toggleReminder}
-            />
-          ) : (
-            'No contacts'
-          )}
-          {showAddContact && <AddContact onAdd={addContact} />}
-        </div>
-      </header>
-    </div>
+    <div className="App">
+        <header className="App-header">
+          <h2>Love Tracker</h2>
+          <div className="container">
+            <Header title="Eros" />
+            {contacts.length > 0 ? (
+              <Contacts
+                contacts={contacts}
+                onDelete={deleteContact}
+                onToggleReminder={toggleReminder}
+              />
+            ) : (
+              'No contacts'
+            )}
+            {isFormOpen && <AddContact onAdd={addContact} />}
+          </div>
+        </header>
+      </div>
   );
 }
 

eros/README.md

@@ -31,9 +31,11 @@ function AddContact({ onAdd }) {
           onChange={(e) => setDay(e.target.value)}
         />
       </div>
-      <button type="submit" className="btn btn-block">
+     <div className="form-control">
+     <button type="submit" className="btn btn-block">
         <RiUserHeartFill className="iconStyle" size={25} />
       </button>
+     </div>
     </form>
   );
 }

eros/src/App.js

@@ -2,12 +2,15 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { HiHeart, HiOutlineHeart } from 'react-icons/all';
 const Button = ({ color, onClick, showAdd }) => {
-
+  console.log(showAdd);
   return (
-<button onClick={onClick}>
-        {showAdd ? <HiHeart className="" size={35} /> :
-        <HiOutlineHeart className="" size={35} />}
-      </button>
+    <button onClick={onClick}>
+      {showAdd ? (
+        <HiHeart className="" size={35} />
+      ) : (
+        <HiOutlineHeart className="" size={35} />
+      )}
+    </button>
   );
 };
 Button.defaultProps = {
@@ -16,6 +19,6 @@ Button.defaultProps = {
 Button.prototype = {
   text: PropTypes.string,
   color: PropTypes.string,
-  onClick:PropTypes.func
+  onClick: PropTypes.func,
 };
 export default Button;

eros/src/components/AddContact.js

@@ -1,12 +1,13 @@
-import React, { Component } from 'react';
+import React, {useContext} from 'react';
 import PropTypes from 'prop-types';
 import Button from './Button';
-
-const Header = ({ title, onAdd, showAddContact }) => {
+import {FormContext} from '../contexts/FormContext';
+const Header = ({title}) => {
+  const { isFormOpen, toggleForm } = useContext(FormContext);
   return (
     <div className="header">
       <h1>{title}</h1>
-      <Button showAdd={showAddContact} onClick={onAdd} />
+      <Button showAdd={isFormOpen} onClick={toggleForm} />
     </div>
   );
 };

eros/src/components/Button.js

@@ -0,0 +1,24 @@
+import React, { Component, createContext } from 'react';
+
+export const FormContext = createContext();
+
+class FormContextProvider extends Component {
+  state = {
+    isFormOpen: false,
+  };
+  toggleForm = () => {
+    console.log(this.state.isFormOpen);
+    this.setState({ isFormOpen: !this.state.isFormOpen });
+  };
+  render() {
+    return (
+      <FormContext.Provider
+        value={{ ...this.state, toggleForm: this.toggleForm }}
+      >
+        {this.props.children}
+      </FormContext.Provider>
+    );
+  }
+}
+
+export default FormContextProvider;

eros/src/components/Header.js

@@ -85,14 +85,14 @@ body {
   text-align: left;
 }
 .add-form {
+  display: flex;
+  justify-content: center;
   margin-bottom: 40px;
-  display: inline;
-  text-align: center !important;
   outline: none;
 }
 
 .form-control {
-  margin: 20px 0;
+  margin: 20px 10px 0;
   outline: none;
 }
 
@@ -104,26 +104,8 @@ body {
   width: 100%;
   height: 40px;
   margin: 5px;
+  text-align: center;
+  border-radius: 5px;
   padding: 3px 7px;
   font-size: 17px;
 }
-
-.form-control-check {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.form-control-check label {
-  flex: 1;
-}
-
-.form-control-check input {
-  flex: 2;
-  height: 20px;
-}
-
-footer {
-  margin-top: 30px;
-  text-align: center;
-}

eros/src/contexts/FormContext.js

@@ -3,10 +3,13 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import FormContextProvider from './contexts/FormContext';
 
 ReactDOM.render(
   <React.StrictMode>
+    <FormContextProvider>
     <App />
+    </FormContextProvider>
   </React.StrictMode>,
   document.getElementById('root')
 );