├── public
    ├── favicon.ico
    ├── logo192.png
    ├── logo512.png
    ├── robots.txt
    ├── manifest.json
    └── index.html
├── src
    ├── components
    │   ├── DateComponent.js
    │   ├── Groceries.js
    │   ├── Greeting.js
    │   ├── Countdown.js
    │   ├── Interval.js
    │   ├── TimeInterval.js
    │   ├── Counter.js
    │   └── GitHubUser.js
    ├── hooks
    │   ├── useIsomorphicLayoutEffect.js
    │   ├── useCounter.js
    │   ├── useBoolean.js
    │   ├── useCustomHookExample.js
    │   ├── useInterval.js
    │   └── useCountDown.js
    ├── setupTests.js
    ├── App.test.js
    ├── App.css
    ├── index.css
    ├── reportWebVitals.js
    ├── index.js
    ├── App.js
    └── logo.svg
├── .gitignore
├── package.json
└── README.md


/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Nyamador/altschool-react/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Nyamador/altschool-react/HEAD/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Nyamador/altschool-react/HEAD/public/logo512.png


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/src/components/DateComponent.js:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | 
3 | export default function DateComponent() {
4 |   return <div>Today is {Date()}</div>
5 | }
6 | 


--------------------------------------------------------------------------------
/src/hooks/useIsomorphicLayoutEffect.js:
--------------------------------------------------------------------------------
1 | import { useEffect, useLayoutEffect } from 'react';
2 | 
3 | const useIsomorphicLayoutEffect =
4 |   typeof window !== 'undefined' ? useLayoutEffect : useEffect;
5 | 
6 | export default useIsomorphicLayoutEffect;
7 | 


--------------------------------------------------------------------------------
/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 | 


--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
1 | import { render, screen } from '@testing-library/react';
2 | import App from './App';
3 | 
4 | test('renders learn react link', () => {
5 |   render(<App />);
6 |   const linkElement = screen.getByText(/learn react/i);
7 |   expect(linkElement).toBeInTheDocument();
8 | });
9 | 


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
 1 | p {
 2 |   margin: 5px;
 3 | }
 4 | .card-details .card-name {
 5 |   font-size: 24px;
 6 |   line-height: 1.25;
 7 | }
 8 | .card-details .card-username {
 9 |   font-size: 20px;
10 |   font-style: normal;
11 |   font-weight: 300;
12 |   line-height: 24px;
13 |   color: #57606a;
14 | }
15 | .card-details .card-bio {
16 | }
17 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 4 |     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 5 |     sans-serif;
 6 |   -webkit-font-smoothing: antialiased;
 7 |   -moz-osx-font-smoothing: grayscale;
 8 | }
 9 | 
10 | code {
11 |   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 |     monospace;
13 | }
14 | 


--------------------------------------------------------------------------------
/src/reportWebVitals.js:
--------------------------------------------------------------------------------
 1 | const reportWebVitals = onPerfEntry => {
 2 |   if (onPerfEntry && onPerfEntry instanceof Function) {
 3 |     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
 4 |       getCLS(onPerfEntry);
 5 |       getFID(onPerfEntry);
 6 |       getFCP(onPerfEntry);
 7 |       getLCP(onPerfEntry);
 8 |       getTTFB(onPerfEntry);
 9 |     });
10 |   }
11 | };
12 | 
13 | export default reportWebVitals;
14 | 


--------------------------------------------------------------------------------
/src/hooks/useCounter.js:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | 
 3 | function useCounter(initialValue) {
 4 |   const [count, setCount] = React.useState(initialValue || 0);
 5 | 
 6 |   const increment = () => setCount((prevValue) => prevValue + 1);
 7 |   const decrement = () => setCount((prevValue) => prevValue - 1);
 8 |   const reset = () => setCount(initialValue || 0);
 9 | 
10 |   return {
11 |     count,
12 |     increment,
13 |     decrement,
14 |     reset,
15 |     setCount,
16 |   };
17 | }
18 | 
19 | export default useCounter;
20 | 


--------------------------------------------------------------------------------
/src/hooks/useBoolean.js:
--------------------------------------------------------------------------------
 1 | import { useCallback, useState } from 'react'
 2 | 
 3 | 
 4 | 
 5 | function useBoolean(defaultValue) {
 6 |   // state to manage the useCustomHook
 7 |   const [value, setValue] = useState(!!defaultValue)
 8 | 
 9 |   // create the data to be returned by the useCustomHook
10 |   const toggle = useCallback(() => setValue(prevValue => !prevValue), [])
11 |   const setTrue = useCallback(() => setValue(true), [])
12 |   const setFalse = useCallback(() => setValue(false), [])
13 | 
14 |   return {
15 |     value, toggle, setTrue, setFalse
16 |   }
17 | }
18 | 
19 | export default useBoolean
20 | 


--------------------------------------------------------------------------------
/src/components/Groceries.js:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | 
 3 | export default function Groceries() {
 4 |   // const myGroceries = ["Apple", "Banana", "Orange"]
 5 |   const myGroceries = [
 6 |     {
 7 |       id: 1,
 8 |       name: "Apple",
 9 |     },
10 |     {
11 |       id: 2,
12 |       name: "Orange",
13 |     },
14 |   ]
15 | 
16 |   const groceryLogger = (e) => {
17 |     console.log(`You clicked the ${e.target.innerText} button`)
18 |   }
19 |   return myGroceries.map((grocery) => (
20 |     <button key={grocery.id} onClick={groceryLogger}>
21 |       {grocery.name}
22 |     </button>
23 |   ))
24 | }
25 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom/client';
 3 | import './index.css';
 4 | import App from './App';
 5 | import reportWebVitals from './reportWebVitals';
 6 | 
 7 | const root = ReactDOM.createRoot(document.getElementById('root'));
 8 | root.render(
 9 |   <React.StrictMode>
10 |     <App />
11 |   </React.StrictMode>
12 | );
13 | 
14 | // If you want to start measuring performance in your app, pass a function
15 | // to log results (for example: reportWebVitals(console.log))
16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
17 | reportWebVitals();
18 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/src/hooks/useCustomHookExample.js:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | 
 3 | export default function useCustomHook(type) {
 4 |   // state
 5 |   const [data, setData] = React.useState([])
 6 | 
 7 |   React.useEffect(() => {
 8 |     if (type === 'cars') {
 9 |       const cars = [
10 |         { id: 1, name: 'Tesla' },
11 |         { id: 2, name: 'BMW' },
12 |         { id: 3, name: 'Jeep' },
13 |       ]
14 |       setData(cars)
15 |     } else if (type === 'books') {
16 |       const books = [
17 |         { id: 1, name: 'Harry Potter' },
18 |         { id: 2, name: 'Lord of the Rings' },
19 |         { id: 3, name: 'Lion King' },
20 |       ]
21 |       setData(books)
22 |     } else {
23 |       setData([])
24 |     }
25 |   }, [type])
26 | 
27 |   // return data
28 |   // return [data, setData]
29 |   return {data, setData}
30 | }


--------------------------------------------------------------------------------
/src/components/Greeting.js:
--------------------------------------------------------------------------------
 1 | // const Greeting = () => {
 2 | //   const [name, setName] = useState('');
 3 | //   console.log(name);
 4 | //   return (
 5 | //     <div>
 6 | //       <h2>I am a Greeting Component</h2>
 7 | //       {name !== '' ? <h4>My name is {name}</h4> : <h4>No Name</h4>}
 8 | //     </div>
 9 | //   );
10 | // };
11 | 
12 | import React from 'react';
13 | 
14 | export default function Greeting(prop) {
15 |   // let stateDispatcher = React.useState('Desmond')
16 |   // const name = stateDispatcher[0]
17 |   // const changeName = stateDispatcher[1]
18 | 
19 |   // destructured
20 |   const [name, setName] = React.useState('Desmond');
21 | 
22 | 
23 | 
24 |   const pElement = <p>Hello Greeting, My name is {name}</p>
25 |   return (
26 |     <div onClick={() => setName('AltSchool')}>{ pElement}</div>
27 |   )
28 | }
29 | 


--------------------------------------------------------------------------------
/src/hooks/useInterval.js:
--------------------------------------------------------------------------------
 1 | import { useEffect, useRef } from 'react';
 2 | 
 3 | // See: https://usehooks-ts.com/react-hook/use-isomorphic-layout-effect
 4 | import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect';
 5 | 
 6 | function useInterval(callback, delay) {
 7 |   const savedCallback = useRef(callback);
 8 | 
 9 |   // Remember the latest callback if it changes.
10 |   useIsomorphicLayoutEffect(() => {
11 |     savedCallback.current = callback;
12 |   }, [callback]);
13 | 
14 |   // Set up the interval.
15 |   useEffect(() => {
16 |     // Don't schedule if no delay is specified.
17 |     // Note: 0 is a valid value for delay.
18 |     if (!delay && delay !== 0) {
19 |       return;
20 |     }
21 | 
22 |     const id = setInterval(() => savedCallback.current(), delay);
23 | 
24 |     return () => clearInterval(id);
25 |   }, [delay]);
26 | }
27 | 
28 | export default useInterval;
29 | 


--------------------------------------------------------------------------------
/src/components/Countdown.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | 
 3 | import useCountdown from '../hooks/useCountDown';
 4 | 
 5 | export default function Countdown() {
 6 |   const [intervalValue, setIntervalValue] = useState(10);
 7 |   const [count, { startCountdown, stopCountdown, resetCountdown }] =
 8 |     useCountdown({
 9 |       countStart: 0,
10 |       countStop: 9999,
11 |       intervalMs: intervalValue,
12 |       isIncrement: true
13 |     });
14 | 
15 |   const handleChangeIntervalValue = (event) => {
16 |     setIntervalValue(Number(event.target.value));
17 |   };
18 |   return (
19 |     <div>
20 |       <p>Count: {count}</p>
21 | 
22 |       <input
23 |         type="number"
24 |         value={intervalValue}
25 |         onChange={handleChangeIntervalValue}
26 |       />
27 |       <button onClick={startCountdown}>start</button>
28 |       <button onClick={stopCountdown}>stop</button>
29 |       <button onClick={resetCountdown}>reset</button>
30 |     </div>
31 |   );
32 | }
33 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "altschool-react",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^5.14.1",
 7 |     "@testing-library/react": "^13.0.0",
 8 |     "@testing-library/user-event": "^13.2.1",
 9 |     "react": "^18.2.0",
10 |     "react-dom": "^18.2.0",
11 |     "react-router-dom": "6",
12 |     "react-scripts": "5.0.1",
13 |     "web-vitals": "^2.1.0"
14 |   },
15 |   "scripts": {
16 |     "start": "react-scripts start",
17 |     "build": "react-scripts build",
18 |     "test": "react-scripts test",
19 |     "eject": "react-scripts eject"
20 |   },
21 |   "eslintConfig": {
22 |     "extends": [
23 |       "react-app",
24 |       "react-app/jest"
25 |     ]
26 |   },
27 |   "browserslist": {
28 |     "production": [
29 |       ">0.2%",
30 |       "not dead",
31 |       "not op_mini all"
32 |     ],
33 |     "development": [
34 |       "last 1 chrome version",
35 |       "last 1 firefox version",
36 |       "last 1 safari version"
37 |     ]
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/src/components/Interval.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | 
 3 | import useInterval from '../hooks/useInterval';
 4 | 
 5 | export default function Interval() {
 6 |   // The counter
 7 |   const [count, setCount] = useState(0);
 8 |   // Dynamic delay
 9 |   const [delay, setDelay] = useState(1000);
10 |   // ON/OFF
11 |   const [isPlaying, setPlaying] = useState(false);
12 | 
13 |   useInterval(
14 |     () => {
15 |       // Your custom logic here
16 |       setCount(count + 1);
17 |     },
18 |     // Delay in milliseconds or null to stop it
19 |     isPlaying ? delay : null
20 |   );
21 | 
22 |   const handleChange = (event) => {
23 |     setDelay(Number(event.target.value));
24 |   };
25 | 
26 |   return (
27 |     <>
28 |       <h1>{count}</h1>
29 |       <button onClick={() => setPlaying(!isPlaying)}>
30 |         {isPlaying ? 'pause' : 'play'}
31 |       </button>
32 |       <p>
33 |         <label htmlFor="delay">Delay: </label>
34 |         <input
35 |           type="number"
36 |           name="delay"
37 |           onChange={handleChange}
38 |           value={delay}
39 |         />
40 |       </p>
41 |     </>
42 |   );
43 | }
44 | 


--------------------------------------------------------------------------------
/src/components/TimeInterval.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | 
 3 | import useInterval from '../hooks/useInterval';
 4 | 
 5 | export default function Interval() {
 6 |   // The counter
 7 |   const [count, setCount] = useState(Date.now());
 8 |   // Dynamic delay
 9 |   const [delay, setDelay] = useState(1000);
10 |   // ON/OFF
11 |   const [isPlaying, setPlaying] = useState(false);
12 | 
13 |   useInterval(
14 |     () => {
15 |       // Your custom logic here
16 |       setCount(count + 1);
17 |     },
18 |     // Delay in milliseconds or null to stop it
19 |     isPlaying ? delay : null
20 |   );
21 | 
22 |   const handleChange = (event) => {
23 |     setDelay(Number(event.target.value));
24 |   };
25 | 
26 |   return (
27 |     <>
28 |       <h1>{new Date().toISOString()}</h1>
29 |       <button onClick={() => setPlaying(!isPlaying)}>
30 |         {isPlaying ? 'pause' : 'play'}
31 |       </button>
32 |       <p>
33 |         <label htmlFor="delay">Delay: </label>
34 |         <input
35 |           type="number"
36 |           name="delay"
37 |           onChange={handleChange}
38 |           value={delay}
39 |         />
40 |       </p>
41 |     </>
42 |   );
43 | }
44 | 


--------------------------------------------------------------------------------
/src/components/Counter.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | 
 3 | function Counter() {
 4 |   let [value, setValue] = useState(1);
 5 | 
 6 |   const handleIncrement = (e) => {
 7 |     setValue(value + 1);
 8 |     console.log('Increment was clicked');
 9 |   };
10 | 
11 |   const handleDecrement = () => {
12 |     if (value <= 0) {
13 |       setValue((prev) => {
14 |         console.log('prev:', prev);
15 | 
16 |         return 0;
17 |       });
18 |     } else {
19 |       setValue(value - 1);
20 |     }
21 | 
22 |     console.log('Decrement was clicked');
23 |   };
24 | 
25 |   const handleReset = () => {
26 |     setValue(0);
27 |     console.log('Reset was clicked');
28 |   };
29 | 
30 | 
31 |   // effect
32 |   React.useEffect(() => {
33 |     // document.title = `I changed the state of my counter component`
34 |     console.log('useEffect was called')
35 |     // addEventListener
36 |     // clean up
37 |     // removeEventListener
38 | 
39 |   }, [value])
40 | 
41 |   return (
42 |     <>
43 |       <h1>{value}</h1>
44 |       <button onClick={handleIncrement}>Increment</button>
45 |       <button onClick={handleReset}>RESET</button>
46 |       <button onClick={handleDecrement}>Decrement</button>
47 |     </>
48 |   );
49 | }
50 | 
51 | export default Counter;


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import React, { useRef } from 'react';
 2 | import './App.css';
 3 | import Countdown from './components/Countdown';
 4 | import Interval from './components/Interval';
 5 | import useBoolean from './hooks/useBoolean';
 6 | import useCounter from './hooks/useCounter';
 7 | 
 8 | // console.log(React.useState)
 9 | 
10 | 
11 | 
12 | 
13 | 
14 | function App() {
15 |   // const data = useCustomHook('books')
16 |   // console.log('data:', data)
17 |   const domRef = useRef(null)
18 |   console.log(domRef.current)
19 | 
20 |   if (domRef.current) {
21 |     domRef.current.textContent = 'Changed Button Name'
22 |   }
23 | 
24 |   const { value, toggle } = useBoolean(false);
25 |   const {count, increment, decrement, reset, setCount} = useCounter(8)
26 | 
27 |   return (
28 |     <>
29 |       {value && <p>My name is Desmond</p>}
30 |       <button ref={domRef} onClick={toggle}>Click me to reveal</button>
31 |       <div className='counter'>
32 |         <h1>count: {count}</h1>
33 |         <button onClick={increment}>Increment</button>
34 |         <button onClick={decrement}>Decrement</button>
35 |         <button onClick={reset}>Reset</button>
36 |         <button onClick={() => setCount(count * 3)}>Multiply By 3</button>
37 | 
38 |       </div>
39 |       <Interval />
40 |       <Countdown />
41 |       {/* <div>
42 |         <Greeting />
43 |         <Greeting />
44 |         <Counter />
45 |         <GitHubUser />
46 |       </div> */}
47 |     </>
48 |   );
49 | }
50 | 
51 | export default App;
52 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>React App</title>
28 |   </head>
29 |   <body>
30 |     <noscript>You need to enable JavaScript to run this app.</noscript>
31 |     <div id="root"></div>
32 |     <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/src/components/GitHubUser.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | function GitHubUser() {
 4 |   let [data, setData] = React.useState({});
 5 |   let [isHover, setIsHover] = React.useState(false)
 6 | 
 7 |   const handleMouseEnter = () => {
 8 |     setIsHover(true);
 9 |   };
10 |   const handleMouseLeave = () => {
11 |     setIsHover(false);
12 |   };
13 | 
14 |   React.useEffect(() => {
15 |     async function gitHubApiCall() {
16 |       const res = await fetch('https://api.github.com/users/oluwasetemi');
17 |       const data = await res.json();
18 |       // console.log('data:', data);
19 |       setData(data);
20 |     }
21 |     // document.title = `I changed the state of my counter component`
22 |     console.log('useEffect was called');
23 |     // addEventListener
24 |     gitHubApiCall();
25 |     // gitHubApiCall2()
26 |   }, []);
27 | 
28 |   if (data?.message) {
29 |     return <p>API was not success: {data.message}</p>;
30 |   }
31 | 
32 |   const clickHandler = () => {
33 |     window.open(`http://twitter.com/${data.twitter_username}`);
34 |   }
35 | 
36 |   return (
37 |     <div
38 |       style={{ margin: '30px', border: isHover ? '2px solid black' : '2px solid transparent', display: 'flex' }}
39 |       onClick={clickHandler}
40 |       onMouseEnter={handleMouseEnter}
41 |       onMouseLeave={handleMouseLeave}
42 |     >
43 |       {/* <a
44 |         href="https://twitter.com/setemiojo/"
45 |         target="_blank"
46 |         rel="noreferrer noopener"
47 |       >
48 |         Twitter
49 |       </a> */}
50 |       <div className="image" >
51 |         <img
52 |           style={{ width: '150px', borderRadius: '50%' }}
53 |           src={data.avatar_url}
54 |           alt={`${data.name}`}
55 |         />
56 |       </div>
57 |       <div className="card-details">
58 |         <p className='card-name'>{data.name}</p>
59 |         <p className='card-username'>{data.login}</p>
60 |         <section className='card-bio'>
61 |           <p>{data.bio}</p>
62 |         </section>
63 |       </div>
64 |     </div>
65 |   );
66 | }
67 | 
68 | export default GitHubUser;
69 | 


--------------------------------------------------------------------------------
/src/hooks/useCountDown.js:
--------------------------------------------------------------------------------
 1 | // TODO: example and test
 2 | import { useCallback } from 'react';
 3 | 
 4 | import useBoolean from './useBoolean';
 5 | import useCounter from './useCounter';
 6 | import useInterval from './useInterval';
 7 | 
 8 | function useCountdown(countdownOption) {
 9 |   let countStart, intervalMs, isIncrement, countStop;
10 | 
11 |   if ('seconds' in countdownOption) {
12 |     console.warn('error');
13 | 
14 |     countStart = countdownOption.seconds;
15 |     intervalMs = countdownOption.interval;
16 |     isIncrement = countdownOption.isIncrement;
17 |   } else {
18 |     // eslint-disable-next-line @typescript-eslint/no-extra-semi
19 |     ({ countStart, intervalMs, isIncrement, countStop } = countdownOption);
20 |   }
21 | 
22 |   // default values
23 |   intervalMs = intervalMs ?? 1000;
24 |   isIncrement = isIncrement ?? false;
25 |   countStop = countStop ?? 0;
26 | 
27 |   const {
28 |     count,
29 |     increment,
30 |     decrement,
31 |     reset: resetCounter,
32 |   } = useCounter(countStart);
33 | 
34 |   /**
35 |    * Note: used to control the useInterval
36 |    * running: If true, the interval is running
37 |    * start: Should set running true to trigger interval
38 |    * stop: Should set running false to remove interval
39 |    */
40 |   const {
41 |     value: isCountdownRunning,
42 |     setTrue: startCountdown,
43 |     setFalse: stopCountdown,
44 |   } = useBoolean(false);
45 | 
46 |   /**
47 |    * Will set running false and reset the seconds to initial value
48 |    */
49 |   const resetCountdown = () => {
50 |     stopCountdown();
51 |     resetCounter();
52 |   };
53 | 
54 |   const countdownCallback = useCallback(() => {
55 |     if (count === countStop) {
56 |       stopCountdown();
57 |       return;
58 |     }
59 | 
60 |     if (isIncrement) {
61 |       increment();
62 |     } else {
63 |       decrement();
64 |     }
65 |   }, [count, countStop, decrement, increment, isIncrement, stopCountdown]);
66 | 
67 |   useInterval(countdownCallback, isCountdownRunning ? intervalMs : null);
68 | 
69 |   return [
70 |     count,
71 |     {
72 |       startCountdown,
73 |       stopCountdown,
74 |       resetCountdown,
75 |     },
76 |   ];
77 | }
78 | 
79 | export default useCountdown;
80 | 


--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## AltSchoolers Frontend Engineering React live class
 2 | 
 3 | Catch the update of live classes by the instructors [Mr Oluwasetemi](https://github.com/Oluwasetemi) and [Mr Desmond](https://github.com/nyamador/) on this Repo and the available links shared in class
 4 | 
 5 | ######  Month 1 Week 1:
 6 | Introduction to React. LMS contd class
 7 | During the Introductory lectures to React [Mr Oluwasetemi](https://github.com/Oluwasetemi) break down how bundling of basic javascript app works before the team at facebook created the React, and he delves a little into webpack
 8 | [Webpack](https://webpack.js.org/)
 9 | 
10 | 
11 | on the introductiory class, he also mentioned importing, exporting and using our bundled app 
12 | [link to the doc he shared here](https://javascript.info/import-export)
13 | 
14 | ######  Month 1 Week 2:
15 | ###### Installing create-react-app
16 | 
17 | This class focuses us on installing and creating react app on our local machine
18 | [link to create react app](https://create-react-app.dev/)
19 | 
20 | as the class proceeds he explain creating components in react, Writing markup with JSX in React. which is just plain javascript and html in react, Importing and Exporting Components, Passing props to a components, Conditional rendering he makes further code examples writting basic jsx elements and rendering them in our react app
21 | 
22 | > He further explain the concept of component and how react is component based library for UI rendering
23 | [view class here](#)
24 | 
25 | ######  Month 1 Week 3:
26 | 
27 | as the classes proceeds he breaks down the concept of states and using states in React, as continuation of the classes on the schol LMS documentation guide below
28 | [States and managing state in React](https://beta.reactjs.org/learn/managing-state)
29 | [Getting started with state](https://reactjs.org/docs/state-and-lifecycle.html)
30 | 
31 | ###### some self assesment questions from the instructor posted on frontend engineering slack channel 
32 | 
33 | ![github-readme-question](https://user-images.githubusercontent.com/64507182/190521102-d7ad57e2-31de-437a-9d8e-f657d8012856.png)
34 | 
35 | ######  Month 1 Week 4:
36 | ###### Hooks in React 
37 | 
38 | [Mr Desmond](https://github.com/nyamador/) and [Mr Oluwasetemi](https://github.com/Oluwasetemi) further use a little counter game of incrementing and decremeting to explain some basic react concepts, which includes the useState hook, useEffect and so on, docs below for further explanation
39 | [useEffect Hook](https://reactjs.org/docs/hooks-effect.html)
40 | 
41 | [Mr Setemi](https://github.com/Oluwasetemi) contd to focuses on creating and using custom hooks in react with code examples
42 | [find code here](https://replit.com/@Oluwasetemi/understanding-usefetch?v=1#src/App.jsx)
43 | 
44 | ######  Month 2 Week 1:
45 | ###### Hooks contd
46 | 
47 | Further classes focus on React router dom, React router dom as a third party library for rounting pages in our React Application. It was explained deeply with examples by the instructor @oluwasetemi, he touches installing the library itself in our app using ```npm install react-router-dom which download other dependencies for us
48 | He went further to explain importing and using with the elements that are provided to us by the library, such as <Routes />, <Link /> , <Navlink /> 
49 | 
50 | [The doc he was using in class](https://reactrouter.com/en/main)
51 | 
52 | **he further hooks provided by the third party router** <br/>
53 | He explained with code example the following
54 | - useLocation 
55 | - useParams 
56 | - useNavigate 
57 | - useOutlet
58 | 
59 | [view code here](https://stackblitz.com/edit/vitejs-vite-hswavt?file=src%2FApp.jsx)
60 | [further link](https://replit.com/@Oluwasetemi/understanding-usefetch?v=1#src/App.jsx)
61 | 
62 | further link he shared, Input valid github account name 
63 | [see here](https://stackblitz.com/edit/vitejs-vite-fdk26g?file=src%2FApp.jsx)
64 | 
65 | 
66 |  **further explanations he made in the last class includes ** <br/>
67 |   - composition vs inheritance using `props.children` and managing layouts in our Application-
68 | 
69 | [find doc and code examples here](https://reactjs.org/docs/composition-vs-inheritance.html)
70 | 
71 | 
72 | ######  Getting Started with this Repo
73 | 
74 | Fork the project to a new repositery<br/>
75 | clone the repo on your terminal
76 | 
77 | cd to the project directory
78 | `code .` to open in your vscode
79 | 
80 |  ```
81 |   yarn start or
82 |   `npm start` to run the app on your local
83 |  ```
84 | 
85 | navigate to [localhost:3000](http://localhost:3000) on your browser.
86 | 
87 | 
88 | This project was bootstrapped with [create react app](https://github.com/facebook/create-react-app).
89 | 
90 | 


--------------------------------------------------------------------------------