├── config.ts
├── src
    ├── react-app-env.d.ts
    ├── service
    │   └── index.ts
    ├── setupTests.js
    ├── components
    │   ├── Navbar.tsx
    │   ├── Header.tsx
    │   ├── Toggle.tsx
    │   └── Player.tsx
    ├── App.tsx
    ├── reportWebVitals.js
    ├── index.js
    ├── hooks
    │   ├── useToggle.ts
    │   ├── useMedia.ts
    │   ├── useLocalStorage.ts
    │   ├── useDarkmode.ts
    │   └── useFetch.ts
    ├── pages
    │   └── Playlist.tsx
    └── index.css
├── public
    ├── robots.txt
    ├── Eater.mp3
    ├── Neon.mp3
    ├── Space.mp3
    ├── cover.jpg
    ├── favicon.ico
    ├── logo192.png
    ├── logo512.png
    ├── Playlist.jpg
    ├── manifest.json
    └── index.html
├── .gitignore
├── tsconfig.json
├── package.json
├── README.md
└── server
    └── db.json


/config.ts:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="react-scripts" />
2 | 


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


--------------------------------------------------------------------------------
/public/Eater.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rocketseat-creators-program/React-Hooks-com-Typescript-2021-06-30/HEAD/public/Eater.mp3


--------------------------------------------------------------------------------
/public/Neon.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rocketseat-creators-program/React-Hooks-com-Typescript-2021-06-30/HEAD/public/Neon.mp3


--------------------------------------------------------------------------------
/public/Space.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rocketseat-creators-program/React-Hooks-com-Typescript-2021-06-30/HEAD/public/Space.mp3


--------------------------------------------------------------------------------
/public/cover.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rocketseat-creators-program/React-Hooks-com-Typescript-2021-06-30/HEAD/public/cover.jpg


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rocketseat-creators-program/React-Hooks-com-Typescript-2021-06-30/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rocketseat-creators-program/React-Hooks-com-Typescript-2021-06-30/HEAD/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rocketseat-creators-program/React-Hooks-com-Typescript-2021-06-30/HEAD/public/logo512.png


--------------------------------------------------------------------------------
/public/Playlist.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rocketseat-creators-program/React-Hooks-com-Typescript-2021-06-30/HEAD/public/Playlist.jpg


--------------------------------------------------------------------------------
/src/service/index.ts:
--------------------------------------------------------------------------------
1 | export const axiosOptions = {
2 |   baseURL: "http://localhost:3001/",
3 |   timeout: 15000,
4 | };
5 | 
6 | export const tracksUrl = "tracks";
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/components/Navbar.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Toggle from "./Toggle";
 3 | import useDarkMode from "../hooks/useDarkmode";
 4 | 
 5 | export default function Navbar() {
 6 |   const [darkMode, setDarkMode] = useDarkMode();
 7 |   return (
 8 |     <div className="navbar">
 9 |       <Toggle darkMode={darkMode} setDarkMode={setDarkMode} />
10 |     </div>
11 |   );
12 | }
13 | 


--------------------------------------------------------------------------------
/.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/App.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | import Playlist from "./pages/Playlist";
 4 | import Header from "./components/Header";
 5 | import Navbar from "./components/Navbar";
 6 | 
 7 | function App() {
 8 |   return (
 9 |     <div>
10 |       <Navbar />
11 |       <div className="container">
12 |         <Header />
13 |         <Playlist />
14 |       </div>
15 |     </div>
16 |   );
17 | }
18 | 
19 | export default App;
20 | 


--------------------------------------------------------------------------------
/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/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom";
 3 | import "./index.css";
 4 | import App from "./App";
 5 | import reportWebVitals from "./reportWebVitals";
 6 | 
 7 | ReactDOM.render(
 8 |   <React.StrictMode>
 9 |     <App />
10 |   </React.StrictMode>,
11 |   document.getElementById("root")
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 | 


--------------------------------------------------------------------------------
/src/components/Header.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | export default function Header() {
 4 |   return (
 5 |     <>
 6 |       <div className="header" style={{ backgroundImage: `url(Playlist.jpg)` }}>
 7 |         <div className="heading">
 8 |           <span>This is </span>
 9 |           <h1>Experts Club</h1>
10 |           <p className="listeners-head">9999 Monthly Listeners</p>
11 |         </div>
12 |       </div>
13 | 
14 |       <div className="btn-heads">
15 |         <button className="btn-shuffle">SHUFFLE PLAY</button>
16 |       </div>
17 |     </>
18 |   );
19 | }
20 | 


--------------------------------------------------------------------------------
/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/useToggle.ts:
--------------------------------------------------------------------------------
 1 | import { useCallback, useState } from "react";
 2 | // Hook
 3 | // Parameter is the boolean, with default "false" value
 4 | const useToggle = (initialState: boolean = false): [boolean, () => void] => {
 5 |   // Initialize the state
 6 |   const [state, setState] = useState<boolean>(initialState);
 7 | 
 8 |   // Define and memorize toggler function in case we pass down the comopnent,
 9 |   // This function change the boolean value to it's opposite value
10 |   const toggle = useCallback((): void => setState((state) => !state), []);
11 |   return [state, toggle];
12 | };
13 | 
14 | export default useToggle;
15 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": [
 5 |       "dom",
 6 |       "dom.iterable",
 7 |       "esnext"
 8 |     ],
 9 |     "allowJs": true,
10 |     "skipLibCheck": true,
11 |     "esModuleInterop": true,
12 |     "allowSyntheticDefaultImports": true,
13 |     "strict": true,
14 |     "forceConsistentCasingInFileNames": true,
15 |     "noFallthroughCasesInSwitch": true,
16 |     "module": "esnext",
17 |     "moduleResolution": "node",
18 |     "resolveJsonModule": true,
19 |     "isolatedModules": true,
20 |     "noEmit": true,
21 |     "jsx": "react-jsx"
22 |   },
23 |   "include": [
24 |     "src"
25 |   ]
26 | }
27 | 


--------------------------------------------------------------------------------
/src/components/Toggle.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | const Toggle = (props: any) => (
 4 |   <div className="dark-mode-toggle">
 5 |     <button type="button" onClick={() => props.setDarkMode(false)}>
 6 |       ☀
 7 |     </button>
 8 |     <span className="toggle-control">
 9 |       <input
10 |         className="dmcheck"
11 |         id="dmcheck"
12 |         type="checkbox"
13 |         checked={props.darkMode}
14 |         onChange={() => props.setDarkMode(!props.darkMode)}
15 |       />
16 |       <label htmlFor="dmcheck" />
17 |     </span>
18 |     <button type="button" onClick={() => props.setDarkMode(true)}>
19 |       ☾
20 |     </button>
21 |   </div>
22 | );
23 | 
24 | export default Toggle;
25 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "share-hooks-with-typescript",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@react-firebase/firestore": "^0.5.5",
 7 |     "@testing-library/jest-dom": "^5.11.4",
 8 |     "@testing-library/react": "^11.1.0",
 9 |     "@testing-library/user-event": "^12.1.10",
10 |     "@types/react": "^17.0.11",
11 |     "axios": "^0.21.1",
12 |     "firebase": "^8.6.8",
13 |     "json-server": "^0.16.3",
14 |     "react": "^17.0.2",
15 |     "react-dom": "^17.0.2",
16 |     "react-scripts": "4.0.3",
17 |     "react-use-audio-player": "^1.2.4",
18 |     "typescript": "^4.3.4",
19 |     "web-vitals": "^1.0.1"
20 |   },
21 |   "scripts": {
22 |     "start": "react-scripts start",
23 |     "build": "react-scripts build",
24 |     "test": "react-scripts test",
25 |     "eject": "react-scripts eject",
26 |     "start:server": "json-server --watch server/db.json --port 3001"
27 |   },
28 |   "eslintConfig": {
29 |     "extends": [
30 |       "react-app",
31 |       "react-app/jest"
32 |     ]
33 |   },
34 |   "browserslist": {
35 |     "production": [
36 |       ">0.2%",
37 |       "not dead",
38 |       "not op_mini all"
39 |     ],
40 |     "development": [
41 |       "last 1 chrome version",
42 |       "last 1 firefox version",
43 |       "last 1 safari version"
44 |     ]
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/src/hooks/useMedia.ts:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from "react";
 2 | 
 3 | const useMedia = <T>(queries: string[], values: T[], defaultValue: T) => {
 4 | 
 5 |   // Array containing a media query list for each query
 6 |   const mediaQueryLists = queries.map((q) => window.matchMedia(q));
 7 | 
 8 |   // Function that gets value based on matching media query
 9 |   const getValue = () => {
10 |     // Get index of first media query that matches
11 |     const index = mediaQueryLists.findIndex((mql) => mql.matches);
12 |     // Return related value or defaultValue if none
13 |     return values?.[index] || defaultValue;
14 |   };
15 | 
16 |   // State and setter for matched value
17 |   const [value, setValue] = useState<T>(getValue);
18 | 
19 |   useEffect(() => {
20 |     // Event listener callback
21 |     // Note: By defining getValue outside of useEffect we ensure that it has ...
22 |     // ... current values of hook args (as this hook callback is created once on mount).
23 |     const handler = () => setValue(getValue);
24 |     // Set a listener for each media query with above handler as callback.
25 |     mediaQueryLists.forEach((mql) => mql.addListener(handler));
26 |     // Remove listeners on cleanup
27 |     return () => mediaQueryLists.forEach((mql) => mql.removeListener(handler));
28 |   });
29 |   return value;
30 | };
31 | 
32 | export default useMedia;
33 | 


--------------------------------------------------------------------------------
/src/components/Player.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { useAudioPlayer } from "react-use-audio-player";
 3 | 
 4 | const AudioPlayer = ({
 5 |   file,
 6 |   title,
 7 |   artWork,
 8 | }: {
 9 |   file?: string;
10 |   title?: string;
11 |   artWork?: string;
12 | }) => {
13 |   const { togglePlayPause, ready, loading, playing } = useAudioPlayer({
14 |     src: file,
15 |     autoplay: true,
16 |     onend: () => console.log("sound has ended!"),
17 |   });
18 | 
19 |   if (!ready && !loading) return <div>No audio to play</div>;
20 |   if (loading) return <div>Loading audio</div>;
21 | 
22 |   return (
23 |     <div className="audio-player-wrapper">
24 |       <div className="audio-player">
25 |         <div className="art-work">
26 |           <img
27 |             className="album__cover"
28 |             width={50}
29 |             height={50}
30 |             src={artWork}
31 |             alt={`Album artwork from track`}
32 |           />
33 |         </div>
34 |         <div className="album-title">{title}</div>
35 |       </div>
36 | 
37 |       <div className="controls">
38 |         <button className="play-btn" onClick={togglePlayPause}>
39 |           <i
40 |             className={`fa ${playing ? "fa-pause" : "fa-play"}`}
41 |             aria-hidden="true"
42 |           ></i>
43 |         </button>
44 |       </div>
45 |     </div>
46 |   );
47 | };
48 | 
49 | export default AudioPlayer;
50 | 


--------------------------------------------------------------------------------
/src/hooks/useLocalStorage.ts:
--------------------------------------------------------------------------------
 1 | import { useState } from "react";
 2 | 
 3 | function useLocalStorage<T>(key: string, initialValue: T) {
 4 |   // State to store our value
 5 |   // Pass initial state function to useState so logic is only executed once
 6 |   const [storedValue, setStoredValue] = useState<T>(() => {
 7 |     try {
 8 |       // Get from local storage by key
 9 |       const item = window.localStorage.getItem(key);
10 |       // Parse stored json or if none return initialValue
11 |       return item ? JSON.parse(item) : initialValue;
12 |     } catch (error) {
13 |       // If error also return initialValue
14 |       console.log(error);
15 |       return initialValue;
16 |     }
17 |   });
18 | 
19 |   // Return a wrapped version of useState's setter function that ...
20 |   // ... persists the new value to localStorage.
21 |   const setValue = (value: T | ((val: T) => T)) => {
22 |     try {
23 |       // Allow value to be a function so we have same API as useState
24 |       const valueToStore = value instanceof Function ? value(storedValue) : value;
25 | 
26 |       // Save state
27 |       setStoredValue(valueToStore);
28 | 
29 |       // Save to local storage
30 |       window.localStorage.setItem(key, JSON.stringify(valueToStore));
31 |     } catch (error) {
32 |       // A more advanced implementation would handle the error case
33 |       console.log(error);
34 |     }
35 |   };
36 |   return [storedValue, setValue] as const;
37 | }
38 | 
39 | export default useLocalStorage;
40 | 


--------------------------------------------------------------------------------
/src/hooks/useDarkmode.ts:
--------------------------------------------------------------------------------
 1 | import { useEffect } from "react";
 2 | import useLocalStorage from "./useLocalStorage";
 3 | import useMedia from "./useMedia";
 4 | 
 5 | // Hook
 6 | function useDarkMode() {
 7 |   // Use our useLocalStorage hook to persist state through a page refresh.
 8 |   const [enabledState, setEnabledState] = useLocalStorage<boolean>(
 9 |     "dark-mode-enabled",
10 |     false
11 |   );
12 | 
13 |   // See if user has set a browser or OS preference for dark mode.
14 |   // The usePrefersDarkMode hook composes a useMedia hook (see code below).
15 |   const prefersDarkMode = usePrefersDarkMode();
16 | 
17 |   // If enabledState is defined use it, otherwise fallback to prefersDarkMode.
18 |   // This allows user to override OS level setting on our website.
19 |   const enabled = enabledState ?? prefersDarkMode;
20 | 
21 |   // Fire off effect that add/removes dark mode class
22 |   useEffect(
23 |     () => {
24 |       const className = "dark-mode";
25 |       const element = window.document.body;
26 |       if (enabled) {
27 |         element.classList.add(className);
28 |       } else {
29 |         element.classList.remove(className);
30 |       }
31 |     },
32 |     [enabled] // Only re-call effect when value changes
33 |   );
34 |   // Return enabled state and setter
35 |   return [enabled, setEnabledState];
36 | }
37 | 
38 | // Compose our useMedia hook to detect dark mode preference.
39 | // The API for useMedia looks a bit weird, but that's because ...
40 | // ... it was designed to support multiple media queries and return values.
41 | // Thanks to hook composition we can hide away that extra complexity!
42 | function usePrefersDarkMode() {
43 |   return useMedia<boolean>(["(prefers-color-scheme: dark)"], [true], false);
44 | }
45 | 
46 | export default useDarkMode;
47 | 


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


--------------------------------------------------------------------------------
/src/pages/Playlist.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react";
 2 | import useFetch, { RequestStatus } from "../hooks/useFetch";
 3 | import { axiosOptions, tracksUrl } from "../service/index";
 4 | import Player from "../components/Player";
 5 | import {  AudioPlayerProvider } from "react-use-audio-player";
 6 | 
 7 | interface Track {
 8 |   id: number;
 9 |   uri: string;
10 |   title: string;
11 |   index: number;
12 |   artist: string;
13 |   paused: boolean;
14 |   played: boolean;
15 |   playing: boolean;
16 |   duration: number;
17 |   percentage: number;
18 |   stream_url: string;
19 |   currentTime: number;
20 |   artwork_url: string;
21 |   permalink_url: string;
22 |   favoritings_count: number;
23 | }
24 | 
25 | function Playlist() {
26 |   const { status, data, error, } = useFetch<Track[]>(tracksUrl, axiosOptions);
27 |   const [track, setTrack] = useState<Track>();
28 | 
29 |   if (status === RequestStatus.fetching) {
30 |     return <h1>loading...</h1>;
31 |   }
32 | 
33 |   if (error) {
34 |     return <h1>${error}</h1>;
35 |   }
36 | 
37 |   return (
38 |     <div className="playlists">
39 |       <div className="list">
40 |         <ul className="track-list">
41 |           {data?.map((track: Track, index) => (
42 |             <li key={`track-${index}`} className="row">
43 |               <button className="btn" onClick={() => setTrack(track)}>
44 |                 <div className="album">
45 |                   <img
46 |                     className="album__cover"
47 |                     width={80}
48 |                     height={80}
49 |                     src={track.artwork_url}
50 |                     alt={`Album artwork from track ${track.title}.`}
51 |                   />
52 |                 </div>
53 |                 <div className="info">
54 |                   <h2 className="info__track">{track.title}</h2>
55 |                   <span className="info__artist">{track.artist}</span>
56 |                 </div>
57 | 
58 |                 <div className="more">
59 |                   <i className="fas fa-ellipsis-v" />
60 |                 </div>
61 |               </button>
62 |             </li>
63 |           ))}
64 |         </ul>
65 |       </div>
66 |       <AudioPlayerProvider>
67 |         <Player
68 |           title={track?.title}
69 |           file={track?.stream_url}
70 |           artWork={track?.artwork_url}
71 |         />
72 |       </AudioPlayerProvider>
73 |     </div>
74 |   );
75 | }
76 | 
77 | export default Playlist;
78 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <img src="https://storage.googleapis.com/golden-wind/experts-club/capa-github.svg" />
 2 | 
 3 | ## Compartilhando React Hooks com o Typescript
 4 | 
 5 | Olá experts, nessa aula vamos aprender como criar e compartilhar hooks com TypeScript,
 6 | criando hooks de forma modular para que possam ser usados em vários
 7 | partes de uma aplicação e também combiná-las para criar outros
 8 | hooks personalizados, vamos aprender como usar o TypeScript para prover uma
 9 | boa experiência de desenvolvimento aumentando assim a qualidade do nosso código.
10 | 
11 | ## Primeiros passos 🏁
12 | 
13 | Clone o repositório.
14 | 
15 | ```sh
16 | gh repo clone git@github.com:rocketseat-experts-club/React-Hooks-com-Typescript-2021-06-30.git
17 | react-hooks-typescript
18 | ```
19 | 
20 | `cd` no diretório.
21 | 
22 | ```sh
23 | cd react-hooks-typescript
24 | ```
25 | 
26 | Instale as dependências do projeto:
27 | 
28 | ```sh
29 | yarn install
30 | ```
31 | 
32 | Inicie o servidor de desenvolvimento:
33 | 
34 | ```sh
35 | yarn start
36 | ```
37 | 
38 | Inicie o servidor da API
39 | 
40 | ```sh
41 | yarn start:server
42 | ```
43 | 
44 | Finalmente, vá para [localhost: 3000](http://localhost:3000) no navegador de sua escolha e você está pronto para ir 🚀.
45 | 
46 | 💡 **Dica profissional** use o branch `main` como guia de referência final, este branch contém o projeto final para que você possa acompanhar, para inciar o projeto utilize o branch **start**
47 | 
48 | ## Ferramentas 🧰
49 | 
50 | - [x] React como uma linguagem de IU
51 | - [x] Typescript
52 | - [x] json-server como local API
53 | ## Estrutura do Projeto 🏗
54 | 
55 | Na pasta src, temos:
56 | 
57 | - `hooks`: pasta onde vamos criar e compartilhar nossos hooks
58 | - `pages` :  pasta com as rotas das nossa aplicação
59 | - `components` :  pasta contendo os componentes compartilhados
60 | - `service`: configuração basica do nossos serviços
61 | - `server` :  json contendo o nosso db local
62 | 
63 | ## Expert
64 | 
65 | | [<img src="https://avatars.githubusercontent.com/u/7741167?s=460&u=41e738d1178fcf31656665fe34c1c490d9c271cb&v=4" width="75px;"/>](https://github.com/vitormalencar) |
66 | | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------: |
67 | |                                                          [Vitor Alencar](https://github.com/vitormalencar)                                                          |
68 | 
69 | ## Licença
70 | 
71 | Projetado com ♥ por [vitormalencar](https://vitormalencar.com). Licenciado sob a [Licença MIT](licença).
72 | 


--------------------------------------------------------------------------------
/src/hooks/useFetch.ts:
--------------------------------------------------------------------------------
  1 | import { useEffect, useReducer, useRef } from "react";
  2 | import axios, { AxiosRequestConfig } from "axios";
  3 | 
  4 | export enum RequestType {
  5 |   request = "request",
  6 |   success = "success",
  7 |   failure = "failure",
  8 | }
  9 | 
 10 | export enum RequestStatus {
 11 |   init = "init",
 12 |   error = "error",
 13 |   fetched = "fetched",
 14 |   fetching = "fetching",
 15 | }
 16 | 
 17 | // State & hook output
 18 | interface State<T> {
 19 |   status: RequestStatus;
 20 |   data?: T;
 21 |   error?: string;
 22 | }
 23 | 
 24 | interface Cache<T> {
 25 |   [url: string]: T;
 26 | }
 27 | 
 28 | // discriminated union type
 29 | type Action<T> =
 30 |   | { type: RequestType.request }
 31 |   | { type: RequestType.success; payload: T }
 32 |   | { type: RequestType.failure; payload: string };
 33 | 
 34 | function useFetch<T = unknown>(
 35 |   url?: string,
 36 |   options?: AxiosRequestConfig
 37 | ): State<T> {
 38 | 
 39 |   const cache = useRef<Cache<T>>({});
 40 |   const cancelRequest = useRef<boolean>(false);
 41 | 
 42 |   const initialState: State<T> = {
 43 |     status: RequestStatus.init,
 44 |     error: undefined,
 45 |     data: undefined,
 46 |   };
 47 | 
 48 |   // Keep state logic separated
 49 |   const fetchReducer = (state: State<T>, action: Action<T>): State<T> => {
 50 |     switch (action.type) {
 51 |       case RequestType.request:
 52 |         return {
 53 |           ...initialState,
 54 |           status: RequestStatus.fetching,
 55 |         };
 56 |       case RequestType.success:
 57 |         return {
 58 |           ...initialState,
 59 |           data: action.payload,
 60 |           status: RequestStatus.fetched,
 61 |         };
 62 |       case RequestType.failure:
 63 |         return {
 64 |           ...initialState,
 65 |           error: action.payload,
 66 |           status: RequestStatus.error,
 67 |         };
 68 |       default:
 69 |         return state;
 70 |     }
 71 |   };
 72 | 
 73 |   const [state, dispatch] = useReducer(fetchReducer, initialState);
 74 | 
 75 |   useEffect(() => {
 76 |     if (!url) {
 77 |       return;
 78 |     }
 79 | 
 80 |     const fetchData = async () => {
 81 |       dispatch({ type: RequestType.request });
 82 | 
 83 |       if (cache.current[url]) {
 84 |         dispatch({ type: RequestType.success, payload: cache.current[url] });
 85 |       } else {
 86 |         try {
 87 |           const response = await axios(url, options);
 88 |           cache.current[url] = response.data;
 89 |           if (cancelRequest.current) return;
 90 | 
 91 |           dispatch({ type: RequestType.success, payload: response.data });
 92 |         } catch (error) {
 93 |           if (cancelRequest.current) return;
 94 | 
 95 |           dispatch({ type: RequestType.failure, payload: error.message });
 96 |         }
 97 |       }
 98 |     };
 99 | 
100 |     fetchData();
101 | 
102 |     return () => {
103 |       cancelRequest.current = true;
104 |     };
105 |   }, [options, url]);
106 | 
107 |   return state;
108 | }
109 | 
110 | export default useFetch;
111 | 


--------------------------------------------------------------------------------
/server/db.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "tracks": [
  3 |     {
  4 |       "uri": "",
  5 |       "index": 0,
  6 |       "paused": true,
  7 |       "id": 26814427,
  8 |       "percentage": 0,
  9 |       "played": false,
 10 |       "currentTime": 0,
 11 |       "playing": false,
 12 |       "artist": "Nasa",
 13 |       "title": "crypt",
 14 |       "duration": 312909,
 15 |       "permalink_url": "",
 16 |       "favoritings_count": 3866,
 17 |       "stream_url": "./Neon.mp3",
 18 |       "artwork_url": "https://i1.sndcdn.com/artworks-000046852128-jih3ck-large.jpg"
 19 |     },
 20 |     {
 21 |       "uri": "",
 22 |       "index": 1,
 23 |       "paused": true,
 24 |       "id": 35814195,
 25 |       "percentage": 0,
 26 |       "played": false,
 27 |       "currentTime": 0,
 28 |       "playing": false,
 29 |       "duration": 304101,
 30 |       "permalink_url": "",
 31 |       "artist": "Lazerhawk",
 32 |       "favoritings_count": 1972,
 33 |       "stream_url": "./Space.mp3",
 34 |       "title": "shoulder of orion",
 35 |       "artwork_url": "https://i1.sndcdn.com/artworks-000248988358-e53rr9-large.jpg"
 36 |     },
 37 |     {
 38 |       "uri": "",
 39 |       "index": 2,
 40 |       "paused": true,
 41 |       "id": 35847035,
 42 |       "percentage": 0,
 43 |       "played": false,
 44 |       "currentTime": 0,
 45 |       "playing": false,
 46 |       "duration": 259702,
 47 |       "artist": "SpaceX",
 48 |       "title": "visitors",
 49 |       "permalink_url": "",
 50 |       "favoritings_count": 1513,
 51 |       "stream_url": "./Eater.mp3",
 52 |       "artwork_url": "https://i1.sndcdn.com/artworks-000017982089-mohaw4-t80x80.jpg"
 53 |     },
 54 |     {
 55 |       "uri": "",
 56 |       "index": 3,
 57 |       "paused": true,
 58 |       "id": 43801515,
 59 |       "percentage": 0,
 60 |       "played": false,
 61 |       "currentTime": 0,
 62 |       "playing": false,
 63 |       "duration": 178249,
 64 |       "permalink_url": "",
 65 |       "title": "Pluto beams",
 66 |       "artist": "PD AeroSpace",
 67 |       "favoritings_count": 2589,
 68 |       "stream_url": "./Neon.mp3",
 69 |       "artwork_url": "https://i1.sndcdn.com/artworks-000248988498-mcap74-large.jpg"
 70 |     },
 71 |     {
 72 |       "uri": "",
 73 |       "index": 4,
 74 |       "paused": true,
 75 |       "id": 78942602,
 76 |       "percentage": 0,
 77 |       "played": false,
 78 |       "currentTime": 0,
 79 |       "playing": false,
 80 |       "duration": 292128,
 81 |       "permalink_url": "",
 82 |       "artist": "Astra Space",
 83 |       "title": "Mars crawler",
 84 |       "favoritings_count": 2044,
 85 |       "stream_url": "./Space.mp3",
 86 |       "artwork_url": "https://i1.sndcdn.com/artworks-000070564652-615us8-large.jpg"
 87 |     },
 88 |     {
 89 |       "uri": "",
 90 |       "index": 5,
 91 |       "paused": true,
 92 |       "percentage": 0,
 93 |       "played": false,
 94 |       "id": 113268514,
 95 |       "currentTime": 0,
 96 |       "playing": false,
 97 |       "duration": 212420,
 98 |       "permalink_url": "",
 99 |       "artist": "BluShift",
100 |       "favoritings_count": 2807,
101 |       "title": "space scanners",
102 |       "stream_url": "./Eater.mp3",
103 |       "artwork_url": "https://i1.sndcdn.com/artworks-000248987442-rezmu6-large.jpg"
104 |     }
105 |   ]
106 | }
107 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |   margin: 0;
  3 |   padding: 0;
  4 |   box-sizing: border-box;
  5 | }
  6 | .flex-center,
  7 | .container .btn-heads {
  8 |   display: flex;
  9 |   align-items: center;
 10 |   justify-content: center;
 11 | }
 12 | 
 13 | html,
 14 | body {
 15 |   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
 16 |     Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 17 |   background-color: #000;
 18 |   overflow-x: hidden;
 19 | }
 20 | body {
 21 |   background-color: #fff;
 22 |   color: #333;
 23 |   transition: background-color 0.3s ease;
 24 | }
 25 | body.dark-mode {
 26 |   background-color: #232323;
 27 |   color: #dfdfdf;
 28 | }
 29 | body.dark-mode .navbar {
 30 |   background-color: #111;
 31 | }
 32 | 
 33 | .navbar {
 34 |   display: flex;
 35 |   background-color: #111;
 36 |   padding: 20px;
 37 |   justify-content: flex-end;
 38 |   position: fixed;
 39 |   width: 100%;
 40 |   z-index: 99;
 41 | }
 42 | 
 43 | .dark-mode-toggle {
 44 |   display: flex;
 45 | }
 46 | 
 47 | .dark-mode-toggle > button {
 48 |   font-size: 1.2em;
 49 |   background: none;
 50 |   border: none;
 51 |   color: #fff;
 52 |   cursor: pointer;
 53 |   transition: color 0.3s ease;
 54 | }
 55 | .dark-mode-toggle > button:last-child {
 56 |   color: #666;
 57 | }
 58 | .dark-mode-toggle > button:focus {
 59 |   outline: none;
 60 | }
 61 | .toggle-control {
 62 |   position: relative;
 63 |   padding: 0 4px;
 64 |   display: flex;
 65 |   align-items: center;
 66 | }
 67 | input[type="checkbox"].dmcheck {
 68 |   width: 40px;
 69 |   height: 10px;
 70 |   background: #555;
 71 |   position: relative;
 72 |   border-radius: 5px;
 73 |   -webkit-appearance: none;
 74 |   -moz-appearance: none;
 75 |   appearance: none;
 76 |   cursor: pointer;
 77 |   vertical-align: 2px;
 78 |   outline: none;
 79 | }
 80 | input[type="checkbox"].dmcheck:checked + label {
 81 |   left: 30px;
 82 | }
 83 | input[type="checkbox"].dmcheck:focus-visible {
 84 |   outline: solid 2px white;
 85 | }
 86 | input[type="checkbox"].dmcheck + label {
 87 |   display: inline-block;
 88 |   width: 18px;
 89 |   height: 18px;
 90 |   border-radius: 50%;
 91 |   transition: all 0.3s ease;
 92 |   cursor: pointer;
 93 |   position: absolute;
 94 |   left: 2px;
 95 |   background: #fff;
 96 |   opacity: 0.9;
 97 |   background-color: #f6f6f6;
 98 | }
 99 | 
100 | .list {
101 |   padding: 20px 20px;
102 |   background-color: #fff;
103 |   margin-bottom: 80px;
104 | }
105 | 
106 | .dark-mode .list {
107 |   background-color: #000;
108 | }
109 | 
110 | .list .track-list {
111 |   list-style: none;
112 |   margin: 0;
113 |   padding: 0;
114 | }
115 | 
116 | .list .row {
117 |   display: flex;
118 |   position: relative;
119 |   min-height: 80px;
120 |   transition: box-shadow 0.2s, background-color 0.3s;
121 | }
122 | 
123 | .list .row button:hover:not(.playing) {
124 |   background-color: #f1f1f1;
125 |   will-change: background-color;
126 | }
127 | 
128 | .dark-mode .list .row button:hover:not(.playing) {
129 |   background-color: #1c1c1c;
130 |   will-change: background-color;
131 | }
132 | 
133 | .list .row button {
134 |   padding: 10px;
135 |   width: 100%;
136 |   border: 0;
137 |   background: 0;
138 |   display: flex;
139 |   justify-content: flex-start;
140 |   font-family: inherit;
141 |   align-items: center;
142 |   font-size: inherit;
143 | }
144 | 
145 | .list .info {
146 |   margin: 0 10px;
147 |   width: 100%;
148 |   position: relative;
149 |   text-align: left;
150 | }
151 | 
152 | .list .album__cover {
153 |   border-radius: 4px;
154 |   display: block;
155 |   width: 80px;
156 |   height: 80px;
157 |   background-color: #5d5555;
158 | }
159 | 
160 | .list .info__track {
161 |   margin: 0;
162 |   font-size: inherit;
163 |   text-transform: capitalize;
164 |   width: 250px;
165 |   white-space: nowrap;
166 |   overflow: hidden;
167 |   color: #585858;
168 |   text-overflow: ellipsis;
169 | }
170 | 
171 | .list .info__artist {
172 |   color: #5d5555;
173 | }
174 | 
175 | .dark-mode .list .info__track {
176 |   color: #eee;
177 | }
178 | 
179 | .dark-mode .list .info__artist {
180 |   color: #cecece;
181 | }
182 | 
183 | .container {
184 |   height: auto;
185 |   background: #000;
186 |   color: #fff;
187 | }
188 | 
189 | .container .header {
190 |   position: relative;
191 |   height: 400px;
192 |   width: 100%;
193 |   background-attachment: fixed;
194 |   background-size: cover;
195 |   background-position: center;
196 |   background-repeat: no-repeat;
197 | }
198 | .container .header::before {
199 |   content: "";
200 |   position: absolute;
201 |   height: 100%;
202 |   width: 100%;
203 |   background-image: linear-gradient(
204 |     to top,
205 |     rgba(0, 0, 0, 1),
206 |     rgba(0, 0, 0, 0.8),
207 |     rgba(0, 0, 0, 0.6),
208 |     rgba(0, 0, 0, 0.4),
209 |     rgba(0, 0, 0, 0.2)
210 |   );
211 | }
212 | .container .header .nav-wrapper {
213 |   position: absolute;
214 |   left: 50%;
215 |   transform: translateX(-50%);
216 |   display: flex;
217 |   width: 90%;
218 |   height: 40px;
219 |   align-items: center;
220 |   justify-content: space-between;
221 |   z-index: 2;
222 | }
223 | .container .header .nav-wrapper .follow {
224 |   margin-left: auto;
225 | }
226 | .container .header .nav-wrapper {
227 |   margin-right: 20px;
228 |   padding: 4px 25px;
229 |   background: rgba(0, 0, 0, 0.3);
230 |   border: none;
231 |   outline: none;
232 |   border-radius: 5px;
233 |   color: #fff;
234 |   cursor: pointer;
235 | }
236 | .container .header .heading {
237 |   position: absolute;
238 |   bottom: 40px;
239 |   width: 100%;
240 |   text-align: center;
241 | }
242 | .container .header .heading h1 {
243 |   margin: 0 0 7px 0;
244 |   font-size: 4em;
245 | }
246 | .container .header .heading .listeners-head {
247 |   color: #919496;
248 | }
249 | .container .btn-heads {
250 |   position: relative;
251 |   height: 160px;
252 |   flex-direction: column;
253 | }
254 | .container .btn-heads .btn-shuffle {
255 |   font-size: 17px;
256 |   background: #1cb452;
257 |   outline: none;
258 |   color: #fff;
259 |   letter-spacing: 2px;
260 |   font-weight: 600;
261 |   padding: 12px 47px;
262 |   border: none;
263 |   border-radius: 50px;
264 |   margin: 0 0 15px 0;
265 |   cursor: pointer;
266 | }
267 | .container .btn-heads .popular-head {
268 |   font-size: 21px;
269 | }
270 | .container .playlists .songlist li {
271 |   list-style: none;
272 |   padding: 10px;
273 |   margin: 10px;
274 |   position: relative;
275 |   display: flex;
276 | }
277 | .container .playlists .songlist li span {
278 |   display: flex;
279 |   color: #919496;
280 | }
281 | .song-name {
282 |   align-self: center;
283 | }
284 | .container .playlists .songlist li .song-name .song {
285 |   cursor: pointer;
286 |   user-select: none;
287 | }
288 | .container .playlists .songlist li .song-name .listeners {
289 |   color: #919496;
290 |   margin: 8px 0 0 0;
291 |   font-size: 14px;
292 | }
293 | .container .playlists .songlist li .more {
294 |   position: absolute;
295 |   right: 15px;
296 | }
297 | .dark-mode .more i {
298 |   color: white;
299 | }
300 | .sl-btn-sticky {
301 |   position: fixed;
302 |   top: 0;
303 |   z-index: 1;
304 | }
305 | .song-active-color {
306 |   color: #1cb452;
307 | }
308 | 
309 | .audio-player-wrapper {
310 |   background-color: #111;
311 |   position: fixed;
312 |   bottom: 0px;
313 |   height: 80px;
314 |   width: 100%;
315 |   padding: 0px 20px;
316 |   display: flex;
317 |   align-items: center;
318 |   align-content: center;
319 |   justify-content: space-between;
320 | }
321 | 
322 | .album-title {
323 |   margin-left: 10px;
324 | }
325 | 
326 | .audio-player {
327 |   display: flex;
328 |   align-items: center;
329 |   align-content: center;
330 |   justify-content: space-between;
331 | }
332 | 
333 | .play-btn {
334 |   background-color: #1cb452;
335 |   background-size: cover;
336 |   width: 40px;
337 |   height: 40px;
338 |   border: none;
339 |   border-radius: 50%;
340 |   color: white;
341 | }
342 | 


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