merge commit from react-hooks earlier repository

hooks/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "react",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-router-dom": "^5.2.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "devDependencies": {
+    "react-scripts": "latest"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

hooks/public/index.html

@@ -0,0 +1,2 @@
+<div id="app-root"></div>
+<div id="modal-root"></div>

hooks/src/AppFooter.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+
+const AppFooter = () => {
+  return (
+    <footer className="app--footer">
+      <p className="copyright">&copy; 2022 React Implementation | <NavLink to="/screen-about">About</NavLink></p>
+    </footer>
+  );
+};
+
+export default AppFooter;

hooks/src/AppHeader.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+
+const AppHeader = () => {
+  return (
+    <header className="app--header">
+      <h1>React Hooks Implementation</h1>
+      <nav className="app--nav">
+        <NavLink to="/screen-one">State</NavLink>
+        <NavLink to="/screen-two">Effect</NavLink>
+        <NavLink to="/screen-three">Custom Hooks</NavLink>
+        | | |
+        <NavLink to="/screen-four">Context</NavLink>
+        <NavLink to="/screen-five">DOM Interaction</NavLink>
+        | | |
+        <NavLink to="/screen-five">Glossary</NavLink>
+      </nav>
+    </header>
+  );
+};
+
+export default AppHeader;

hooks/src/AppShell.jsx

@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import { BrowserRouter } from 'react-router-dom';
+
+import AppHeader from './AppHeader';
+import AppFooter from './AppFooter';
+
+import ScreenSwitchboard from './ScreenSwitchboard';
+import ModalManager from './ModalManager';
+
+import './app-shell.css';
+
+
+const AppShell = () => {
+  const [modalOpen, setModal] = useState(false);
+
+  const openModal = event => {
+    event.preventDefault();
+    const {
+      target: {
+        dataset: { modal }
+      }
+    } = event;
+    if (modal) setModal(modal);
+  };
+
+  const closeModal = () => {
+    setModal('');
+  };
+
+  return (
+    <BrowserRouter>
+      <div className="app--shell" onClick={openModal}>
+        <AppHeader />
+        <ScreenSwitchboard />
+        <ModalManager closeFn={closeModal} modal={modalOpen} />
+        <AppFooter />
+      </div>
+    </BrowserRouter>
+  );
+};
+
+export default AppShell;

hooks/src/ModalManager.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+import ModalOne from './components/common/modal-one/ModalOne'
+import ModalTwo from './components/common/modal-two/ModalTwo'
+import ModalThree from './components/common/modal-three/ModalThree'
+import ModalFour from './components/common/modal-four/ModalFour'
+import ModalFive from './components/common/modal-five/ModalFive'
+import ModalSix from './components/common/modal-six/ModalSix'
+import ModalSeven from './components/common/modal-seven/ModalSeven'
+import ModalEight from './components/common/modal-eight/ModalEight'
+import ModalNine from './components/common/modal-nine/ModalNine'
+import ModalTen from './components/common/modal-ten/ModalTen'
+import ModalEleven from './components/common/modal-eleven/ModalEleven'
+import ModalTwelve from './components/common/modal-twelve/ModalTwelve'
+import ModalThirteen from './components/common/modal-thirteen/ModalThirteen'
+import ModalFourteen from './components/common/modal-fourteen/ModalFourteen'
+import ModalFifteen from './components/common/modal-fifteen/ModalFifteen'
+import ModalSixteen from './components/common/modal-sixteen/ModalSixteen'
+
+
+
+// this is modal section , not a page
+
+const ModalManager = ({ closeFn, modal = '' }) => {
+  return (
+    <>
+      <ModalOne closeFn={closeFn} open={modal === 'modal-one'} />
+      <ModalTwo closeFn={closeFn} open={modal === 'modal-two'} />
+      <ModalThree closeFn={closeFn} open={modal === 'modal-three'} />
+      <ModalFour closeFn={closeFn} open={modal === 'modal-four'} />
+      <ModalFive closeFn={closeFn} open={modal === 'modal-five'} />
+      <ModalSix closeFn={closeFn} open={modal === 'modal-six'} />
+      <ModalSeven closeFn={closeFn} open={modal === 'modal-seven'} />
+      <ModalEight closeFn={closeFn} open={modal === 'modal-eight'} />
+      <ModalNine closeFn={closeFn} open={modal === 'modal-nine'} />
+      <ModalTen closeFn={closeFn} open={modal === 'modal-ten'} />
+      <ModalEleven closeFn={closeFn} open={modal === 'modal-eleven'} />
+      <ModalTwelve closeFn={closeFn} open={modal === 'modal-twelve'} />
+      <ModalThirteen closeFn={closeFn} open={modal === 'modal-thirteen'} />    
+      <ModalFourteen closeFn={closeFn} open={modal === 'modal-fourteen'} />
+      <ModalFifteen closeFn={closeFn} open={modal === 'modal-fifteen'} />
+      <ModalSixteen closeFn={closeFn} open={modal === 'modal-sixteen'} />
+    </>
+  );
+};
+
+export default ModalManager;

hooks/src/ScreenSwitchboard.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Route, Switch } from 'react-router-dom';
+
+// your route here
+import ScreenOne from './components/screen-one/ScreenOne';
+import ScreenTwo from './components/screen-two/ScreenTwo';
+import ScreenThree from './components/screen-three/ScreenThree';
+import ScreenFour from './components/screen-four/ScreenFour';
+import ScreenFive from './components/screen-five/screen-five';
+import ScreenAbout from './components/screen-about/screen-about';
+
+const ScreenSwitchboard = () => {
+  return (
+    <Switch>
+      <Route path="/screen-about">
+        <ScreenAbout />
+      </Route>
+      <Route path="/screen-five">
+        <ScreenFive />
+      </Route>
+      <Route path="/screen-four">
+    <ScreenFour />
+      </Route>
+      <Route path="/screen-three">
+        <ScreenThree />
+      </Route>
+      <Route path="/screen-two">
+        <ScreenTwo />
+      </Route>
+      <Route path="/screen-one">
+        <ScreenOne />
+      </Route>
+      <Route exact path="/">
+        <ScreenOne />
+      </Route>
+    </Switch>
+  );
+};
+
+export default ScreenSwitchboard;

hooks/src/app-shell.css

@@ -0,0 +1,54 @@
+body {
+  font-family: Roboto, sans-serif;
+  margin: 0;
+  padding: 0;
+}
+
+.app--shell {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 7rem 1fr auto;
+  height: 100%;
+}
+
+.app--header,
+.app--footer {
+  padding: 1rem;
+}
+
+.app--header {
+  background: rgb(225, 225, 225);
+  border-bottom: 1px solid rgb(127, 127, 127);
+  padding: 1rem;
+}
+
+.app--header h1 {
+  margin: 0 0 1rem 0;
+  padding: 0;
+}
+
+.app--nav {
+  display: flex;
+  column-gap: 1rem;
+}
+
+.app--screen {
+  padding: 2rem 1rem;
+}
+
+.app--screen h2 {
+  margin: 0 0 1rem 0;
+  padding: 0;
+}
+
+.app--footer {
+  background: rgb(31, 31, 31);
+  color: rgb(255, 255, 255);
+  padding: 1rem;
+}
+
+.copyright {
+  margin: 0;
+  padding: 0;
+  text-align: center;
+}

hooks/src/components/common/modal-eight/ModalEight.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import App7 from '../../../tutorial/custom-hooks/1-fetch-example';
+import Modal from '../modal/Modal';
+
+const ModalOne = ({ closeFn = () => null, open = false }) => {
+  return (
+    <Modal open={open}>
+      <div className="modal--mask">
+        <div className="modal-window">
+          <header className="modal--header">
+            <h1>Fetch Interaction with Custom Hooks</h1>
+          </header>
+          <div className="modal--body">
+            <p>below are an Example how Custom Hooks Works </p>
+            <App7 />
+          </div>
+          <footer className="modal--footer">
+            <button type="button" onClick={closeFn}>
+              Close
+            </button>
+          </footer>
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default ModalOne;

hooks/src/components/common/modal-eleven/ModalEleven.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import App7 from '../../../tutorial/conditional-rendering/3-show-hide'
+import Modal from '../modal/Modal';
+
+const ModalOne = ({ closeFn = () => null, open = false }) => {
+  return (
+    <Modal open={open}>
+      <div className="modal--mask">
+        <div className="modal-window">
+          <header className="modal--header">
+            <h1>Show/Hide on Conditional Rendering</h1>
+          </header>
+          <div className="modal--body">
+            <p>below are an Example how we can show/hide the button using Conditional Rendering</p>
+            <App7 />
+          </div>
+          <footer className="modal--footer">
+            <button type="button" onClick={closeFn}>
+              Close
+            </button>
+          </footer>
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default ModalOne;

hooks/src/components/common/modal-fifteen/ModalFifteen.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import App2 from '../../../tutorial/useRef/1-useRef-basics'
+import Modal from '../modal/Modal';
+
+const ModalTwo = ({ closeFn = () => null, open = false }) => {
+  return (
+    <Modal open={open}>
+      <div className="modal--mask">
+        <div className="modal-window">
+          <header className="modal--header">
+            <h1>useRef</h1>
+          </header>
+          <div className="modal--body">
+            <p>useRef will work the same like document.getbyID</p>
+            <App2/>
+          </div>
+          <footer className="modal--footer">
+            <button type="button" onClick={closeFn}>
+              Close
+            </button>
+          </footer>
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default ModalTwo;

hooks/src/components/common/modal-five/ModalFive.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import App7 from '../../../tutorial/useEffect/1.-useEffect-basic';
+import Modal from '../modal/Modal';
+
+const ModalOne = ({ closeFn = () => null, open = false }) => {
+  return (
+    <Modal open={open}>
+      <div className="modal--mask">
+        <div className="modal-window">
+          <header className="modal--header">
+            <h1>useEffect Implementation</h1>
+          </header>
+          <div className="modal--body">
+            <p>below are an Example how useEffect running their process with document title and interchange their value using useState</p>
+            <p>Please notice the header on tab or open up console on Web Source to see the process</p>
+            <App7 />
+          </div>
+          <footer className="modal--footer">
+            <button type="button" onClick={closeFn}>
+              Close
+            </button>
+          </footer>
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default ModalOne;