[
{
"path": ".gitignore",
"content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# production\n/build\n\n# misc\n.DS_Store\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n"
},
{
"path": "README.md",
"content": "# Getting Started with Advanced React Patterns\n\nRepository used within the article : https://javascript.plainenglish.io/5-advanced-react-patterns-a6b7624267a6\n\n\n## Available Scripts\n\nIn the project directory, you can run:\n\n### `npm start`\n\nRuns the app in the development mode.\\\nOpen [http://localhost:3000](http://localhost:3000) to view it in the browser.\n\nThe page will reload if you make edits.\\\nYou will also see any lint errors in the console.\n\n### `npm run build`\n\nBuilds the app for production to the `build` folder.\\\nIt correctly bundles React in production mode and optimizes the build for the best performance.\n\nThe build is minified and the filenames include the hashes.\\\nYour app is ready to be deployed!\n\nSee the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.\n\n"
},
{
"path": "package.json",
"content": "{\n \"name\": \"advanced-react-patterns\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"@fortawesome/fontawesome-svg-core\": \"^1.2.35\",\n \"@fortawesome/free-solid-svg-icons\": \"^5.15.3\",\n \"@fortawesome/react-fontawesome\": \"^0.1.14\",\n \"react\": \"^17.0.1\",\n \"react-dom\": \"^17.0.1\",\n \"react-scripts\": \"4.0.3\",\n \"styled-components\": \"^5.2.1\"\n },\n \"scripts\": {\n \"start\": \"react-scripts start\",\n \"build\": \"react-scripts build\"\n },\n \"eslintConfig\": {\n \"extends\": [\n \"react-app\",\n \"react-app/jest\"\n ]\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n }\n}\n"
},
{
"path": "public/index.html",
"content": "\n\n \n React App \n \n \n You need to enable JavaScript to run this app. \n
\n \n \n\n"
},
{
"path": "public/manifest.json",
"content": "{\n \"short_name\": \"React App\",\n \"name\": \"Create React App Sample\",\n \"icons\": [\n {\n \"src\": \"favicon.ico\",\n \"sizes\": \"64x64 32x32 24x24 16x16\",\n \"type\": \"image/x-icon\"\n },\n {\n \"src\": \"logo192.png\",\n \"type\": \"image/png\",\n \"sizes\": \"192x192\"\n },\n {\n \"src\": \"logo512.png\",\n \"type\": \"image/png\",\n \"sizes\": \"512x512\"\n }\n ],\n \"start_url\": \".\",\n \"display\": \"standalone\",\n \"theme_color\": \"#000000\",\n \"background_color\": \"#ffffff\"\n}\n"
},
{
"path": "public/robots.txt",
"content": "# https://www.robotstxt.org/robotstxt.html\nUser-agent: *\nDisallow:\n"
},
{
"path": "src/App.js",
"content": "import React from \"react\";\nimport styled from \"styled-components\";\nimport { Usage as CompoundComponent } from \"./patterns/compound-component/Usage\";\nimport { Usage as ControlProps } from \"./patterns/control-props/Usage\";\nimport { Usage as CustomHooks } from \"./patterns/custom-hooks/Usage\";\nimport { Usage as PropsGetters } from \"./patterns/props-getters/Usage\";\nimport { Usage as StateReducer } from \"./patterns/state-reducer/Usage\";\n\nimport { library } from \"@fortawesome/fontawesome-svg-core\";\nimport {\n faPlus,\n faPlusCircle,\n faPlusSquare,\n faMinus,\n faMinusCircle,\n faMinusSquare\n} from \"@fortawesome/free-solid-svg-icons\";\nlibrary.add(\n faPlus,\n faPlusCircle,\n faPlusSquare,\n faMinus,\n faMinusCircle,\n faMinusSquare\n);\n\nexport default function App() {\n return (\n \n \n Advanced React Pattern \n \n\n \n Compound component pattern \n \n\n \n Control props pattern \n \n\n \n Custom hooks pattern \n \n\n \n Props PropsGetters pattern \n \n\n \n State reducer Pattern \n \n \n );\n}\n\nconst StyledContainer = styled.div`\n text-align: center;\n font-family: sans-serif;\n`;\n\nconst StyledTitleContainer = styled.div`\n background-color: #1428a0;\n color: white;\n padding: 35px;\n\n > h1 {\n margin: 0;\n }\n`;\n\nconst StyledPatternContainer = styled.div`\n padding: 30px;\n border-bottom: 2px solid #d3d3d3;\n\n &:last-child {\n border: none;\n }\n\n > h2 {\n margin-top: 0;\n }\n`;\n"
},
{
"path": "src/App.test.js",
"content": "import { render, screen } from '@testing-library/react';\nimport App from './App';\n\ntest('renders learn react link', () => {\n render(\n ,\n document.getElementById('root')\n);\n\n"
},
{
"path": "src/patterns/compound-component/Counter.js",
"content": "import React, { useEffect, useRef, useState } from \"react\";\nimport styled from \"styled-components\";\nimport { CounterProvider } from \"./useCounterContext\";\nimport { Count, Label, Decrement, Increment } from \"./components\";\n\nfunction Counter({ children, onChange, initialValue = 0 }) {\n const [count, setCount] = useState(initialValue);\n\n const firstMounded = useRef(true);\n useEffect(() => {\n if (!firstMounded.current) {\n onChange && onChange(count);\n }\n firstMounded.current = false;\n }, [count, onChange]);\n\n const handleIncrement = () => {\n setCount(count + 1);\n };\n\n const handleDecrement = () => {\n setCount(Math.max(0, count - 1));\n };\n\n return (\n \n {children} \n \n );\n}\n\nconst StyledCounter = styled.div`\n display: inline-flex;\n border: 1px solid #17a2b8;\n line-height: 1.5;\n border-radius: 0.25rem;\n overflow: hidden;\n`;\n\nCounter.Count = Count;\nCounter.Label = Label;\nCounter.Increment = Increment;\nCounter.Decrement = Decrement;\n\nexport { Counter };\n"
},
{
"path": "src/patterns/compound-component/Usage.js",
"content": "import React from \"react\";\nimport { Counter } from \"./Counter\";\n\nfunction Usage() {\n const handleChangeCounter = (count) => {\n console.log(\"count\", count);\n };\n\n return (\n \n Counter \n \n );\n}\n\nexport { Usage };\n"
},
{
"path": "src/patterns/compound-component/components/Count.js",
"content": "import React from \"react\";\nimport styled from \"styled-components\";\nimport { useCounterContext } from \"../useCounterContext\";\n\nfunction Count({ max }) {\n const { count } = useCounterContext();\n\n const hasError = max ? count >= max : false;\n\n return {count} ;\n}\n\nconst StyledCount = styled.div`\n background-color: ${({ hasError }) => (hasError ? \"#bd2130\" : \"#17a2b8\")};\n color: white;\n padding: 5px 7px;\n`;\n\nexport { Count };\n"
},
{
"path": "src/patterns/compound-component/components/Decrement.js",
"content": "import React from \"react\";\nimport { StyledButton } from \"./styles.js\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { useCounterContext } from \"../useCounterContext\";\n\nfunction Decrement({ icon = \"minus\" }) {\n const { handleDecrement } = useCounterContext();\n return (\n \n \n );\n}\n\nexport { Decrement };\n"
},
{
"path": "src/patterns/compound-component/components/Increment.js",
"content": "import React from \"react\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { StyledButton } from \"./styles.js\";\nimport { useCounterContext } from \"../useCounterContext\";\n\nfunction Increment({ icon = \"plus\" }) {\n const { handleIncrement } = useCounterContext();\n return (\n \n \n );\n}\n\nexport { Increment };\n"
},
{
"path": "src/patterns/compound-component/components/Label.js",
"content": "import React from \"react\";\nimport styled from \"styled-components\";\n\nfunction Label({ children }) {\n return {children} ;\n}\n\nconst StyledLabel = styled.div`\n background-color: #e9ecef;\n color: #495057;\n padding: 5px 7px;\n`;\n\nexport { Label };\n"
},
{
"path": "src/patterns/compound-component/components/index.js",
"content": "export * from \"./Count\";\nexport * from \"./Decrement\";\nexport * from \"./Increment\";\nexport * from \"./Label\";\n"
},
{
"path": "src/patterns/compound-component/components/styles.js",
"content": "import styled from \"styled-components\";\n\nconst StyledButton = styled.button`\n background-color: white;\n border: none;\n &:hover {\n cursor: pointer;\n }\n &:active,\n &:focus {\n outline: none;\n }\n`;\n\nexport { StyledButton };\n"
},
{
"path": "src/patterns/compound-component/useCounterContext.js",
"content": "import React from \"react\";\n\nconst CounterContext = React.createContext(undefined);\n\nfunction CounterProvider({ children, value }) {\n return (\n {children} \n );\n}\n\nfunction useCounterContext() {\n const context = React.useContext(CounterContext);\n if (context === undefined) {\n throw new Error(\"useCounterContext must be used within a CounterProvider\");\n }\n return context;\n}\n\nexport { CounterProvider, useCounterContext };\n"
},
{
"path": "src/patterns/control-props/Counter.js",
"content": "import React, { useState, useRef, useEffect } from \"react\";\nimport styled from \"styled-components\";\nimport { CounterProvider } from \"./useCounterContext\";\nimport { Count, Label, Decrement, Increment } from \"./components\";\n\nfunction Counter({ children, value = null, initialValue = 0, onChange }) {\n const [count, setCount] = useState(initialValue);\n\n const isControlled = value !== null && !!onChange;\n\n const getCount = () => (isControlled ? value : count);\n\n const firstMounded = useRef(true);\n useEffect(() => {\n if (!firstMounded.current && !isControlled) {\n onChange && onChange(count);\n }\n firstMounded.current = false;\n }, [count, onChange, isControlled]);\n\n const handleIncrement = () => {\n handleCountChange(getCount() + 1);\n };\n\n const handleDecrement = () => {\n handleCountChange(Math.max(0, getCount() - 1));\n };\n\n const handleCountChange = (newValue) => {\n isControlled ? onChange(newValue) : setCount(newValue);\n };\n\n return (\n \n {children} \n \n );\n}\n\nconst StyledCounter = styled.div`\n display: inline-flex;\n border: 1px solid #17a2b8;\n line-height: 1.5;\n border-radius: 0.25rem;\n overflow: hidden;\n`;\n\nCounter.Count = Count;\nCounter.Label = Label;\nCounter.Increment = Increment;\nCounter.Decrement = Decrement;\n\nexport { Counter };\n"
},
{
"path": "src/patterns/control-props/Usage.js",
"content": "import React, { useState } from \"react\";\nimport { Counter } from \"./Counter\";\n\nfunction Usage() {\n const [count, setCount] = useState(0);\n\n const handleChangeCounter = (newCount) => {\n setCount(newCount);\n };\n return (\n \n Counter \n \n );\n}\n\nexport { Usage };\n"
},
{
"path": "src/patterns/control-props/components/Count.js",
"content": "import React from \"react\";\nimport styled from \"styled-components\";\nimport { useCounterContext } from \"../useCounterContext\";\n\nfunction Count({ max }) {\n const { count } = useCounterContext();\n\n const hasError = max ? count >= max : false;\n\n return {count} ;\n}\n\nconst StyledCount = styled.div`\n background-color: ${({ hasError }) => (hasError ? \"#bd2130\" : \"#17a2b8\")};\n color: white;\n padding: 5px 7px;\n`;\n\nexport { Count };\n"
},
{
"path": "src/patterns/control-props/components/Decrement.js",
"content": "import React from \"react\";\nimport { StyledButton } from \"./styles.js\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { useCounterContext } from \"../useCounterContext\";\n\nfunction Decrement({ icon = \"minus\" }) {\n const { handleDecrement } = useCounterContext();\n return (\n \n \n );\n}\n\nexport { Decrement };\n"
},
{
"path": "src/patterns/control-props/components/Increment.js",
"content": "import React from \"react\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { StyledButton } from \"./styles.js\";\nimport { useCounterContext } from \"../useCounterContext\";\n\nfunction Increment({ icon = \"plus\" }) {\n const { handleIncrement } = useCounterContext();\n return (\n \n \n );\n}\n\nexport { Increment };\n"
},
{
"path": "src/patterns/control-props/components/Label.js",
"content": "import React from \"react\";\nimport styled from \"styled-components\";\n\nfunction Label({ children }) {\n return {children} ;\n}\n\nconst StyledLabel = styled.div`\n background-color: #e9ecef;\n color: #495057;\n padding: 5px 7px;\n`;\n\nexport { Label };\n"
},
{
"path": "src/patterns/control-props/components/index.js",
"content": "export * from \"./Count\";\nexport * from \"./Decrement\";\nexport * from \"./Increment\";\nexport * from \"./Label\";\n"
},
{
"path": "src/patterns/control-props/components/styles.js",
"content": "import styled from \"styled-components\";\n\nconst StyledButton = styled.button`\n background-color: white;\n border: none;\n &:hover {\n cursor: pointer;\n }\n &:active,\n &:focus {\n outline: none;\n }\n`;\n\nexport { StyledButton };\n"
},
{
"path": "src/patterns/control-props/useCounterContext.js",
"content": "import React from \"react\";\n\nconst CounterContext = React.createContext(undefined);\n\nfunction CounterProvider({ children, value }) {\n return (\n {children} \n );\n}\n\nfunction useCounterContext() {\n const context = React.useContext(CounterContext);\n if (context === undefined) {\n throw new Error(\"useCounterContext must be used within a CounterProvider\");\n }\n return context;\n}\n\nexport { CounterProvider, useCounterContext };\n"
},
{
"path": "src/patterns/custom-hooks/Counter.js",
"content": "import React, { useRef, useEffect } from \"react\";\nimport styled from \"styled-components\";\nimport { CounterProvider } from \"./useCounterContext\";\nimport { Count, Label, Decrement, Increment } from \"./components\";\n\nfunction Counter({ children, value: count, onChange }) {\n const firstMounded = useRef(true);\n useEffect(() => {\n if (!firstMounded.current) {\n onChange && onChange(count);\n }\n firstMounded.current = false;\n }, [count, onChange]);\n\n return (\n \n {children} \n \n );\n}\n\nconst StyledCounter = styled.div`\n display: inline-flex;\n border: 1px solid #17a2b8;\n line-height: 1.5;\n border-radius: 0.25rem;\n overflow: hidden;\n`;\n\nCounter.Count = Count;\nCounter.Label = Label;\nCounter.Increment = Increment;\nCounter.Decrement = Decrement;\n\nexport { Counter };\n"
},
{
"path": "src/patterns/custom-hooks/Usage.js",
"content": "import React from \"react\";\nimport styled from \"styled-components\";\nimport { Counter } from \"./Counter\";\nimport { useCounter } from \"./useCounter\";\n\nfunction Usage() {\n const { count, handleIncrement, handleDecrement } = useCounter(0);\n const MAX_COUNT = 10;\n\n const handleClickIncrement = () => {\n //Put your custom logic\n if (count < MAX_COUNT) {\n handleIncrement();\n }\n };\n\n return (\n <>\n \n Counter \n \n \n \n Custom increment btn 1\n \n \n \n );\n}\n\nexport { Usage };\n\nconst StyledContainer = styled.div`\n margin-top: 20px;\n`;\n"
},
{
"path": "src/patterns/custom-hooks/components/Count.js",
"content": "import React from \"react\";\nimport styled from \"styled-components\";\nimport { useCounterContext } from \"../useCounterContext\";\n\nfunction Count({ max }) {\n const { count } = useCounterContext();\n\n const hasError = max ? count > max : false;\n\n return {count} ;\n}\n\nconst StyledCount = styled.div`\n background-color: ${({ hasError }) => (hasError ? \"#bd2130\" : \"#17a2b8\")};\n color: white;\n padding: 5px 7px;\n`;\n\nexport { Count };\n"
},
{
"path": "src/patterns/custom-hooks/components/Decrement.js",
"content": "import React from \"react\";\nimport { StyledButton } from \"./styles.js\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\n\nfunction Decrement({ icon = \"minus\", onClick }) {\n return (\n \n \n );\n}\n\nexport { Decrement };\n"
},
{
"path": "src/patterns/custom-hooks/components/Increment.js",
"content": "import React from \"react\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { StyledButton } from \"./styles.js\";\n\nfunction Increment({ icon = \"plus\", onClick }) {\n return (\n \n \n );\n}\n\nexport { Increment };\n"
},
{
"path": "src/patterns/custom-hooks/components/Label.js",
"content": "import React from \"react\";\nimport styled from \"styled-components\";\n\nfunction Label({ children }) {\n return {children} ;\n}\n\nconst StyledLabel = styled.div`\n background-color: #e9ecef;\n color: #495057;\n padding: 5px 7px;\n`;\n\nexport { Label };\n"
},
{
"path": "src/patterns/custom-hooks/components/index.js",
"content": "export * from \"./Count\";\nexport * from \"./Decrement\";\nexport * from \"./Increment\";\nexport * from \"./Label\";\n"
},
{
"path": "src/patterns/custom-hooks/components/styles.js",
"content": "import styled from \"styled-components\";\n\nconst StyledButton = styled.button`\n background-color: white;\n border: none;\n &:hover {\n cursor: pointer;\n }\n &:active,\n &:focus {\n outline: none;\n }\n`;\n\nexport { StyledButton };\n"
},
{
"path": "src/patterns/custom-hooks/useCounter.js",
"content": "import { useState } from \"react\";\n\nfunction useCounter(intialeCount) {\n const [count, setCount] = useState(intialeCount);\n\n const handleIncrement = () => {\n setCount((prevCount) => prevCount + 1);\n };\n\n const handleDecrement = () => {\n setCount((prevCount) => Math.max(0, prevCount - 1));\n };\n\n return { count, handleIncrement, handleDecrement };\n}\n\nexport { useCounter };\n"
},
{
"path": "src/patterns/custom-hooks/useCounterContext.js",
"content": "import React from \"react\";\n\nconst CounterContext = React.createContext(undefined);\n\nfunction CounterProvider({ children, value }) {\n return (\n {children} \n );\n}\n\nfunction useCounterContext() {\n const context = React.useContext(CounterContext);\n if (context === undefined) {\n throw new Error(\"useCounterContext must be used within a CounterProvider\");\n }\n return context;\n}\n\nexport { CounterProvider, useCounterContext };\n"
},
{
"path": "src/patterns/props-getters/Counter.js",
"content": "import React, { useRef, useEffect } from \"react\";\nimport styled from \"styled-components\";\nimport { CounterProvider } from \"./useCounterContext\";\nimport { Count, Label, Decrement, Increment } from \"./components\";\n\nfunction Counter({ children, value: count, onChange }) {\n const firstMounded = useRef(true);\n useEffect(() => {\n if (!firstMounded.current) {\n onChange && onChange(count);\n }\n firstMounded.current = false;\n }, [count, onChange]);\n\n return (\n \n {children} \n \n );\n}\n\nconst StyledCounter = styled.div`\n display: inline-flex;\n border: 1px solid #17a2b8;\n line-height: 1.5;\n border-radius: 0.25rem;\n overflow: hidden;\n`;\n\nCounter.Count = Count;\nCounter.Label = Label;\nCounter.Increment = Increment;\nCounter.Decrement = Decrement;\n\nexport { Counter };\n"
},
{
"path": "src/patterns/props-getters/Usage.js",
"content": "import React from \"react\";\nimport styled from \"styled-components\";\nimport { Counter } from \"./Counter\";\nimport { useCounter } from \"./useCounter\";\n\nconst MAX_COUNT = 10;\n\nfunction Usage() {\n const {\n count,\n getCounterProps,\n getIncrementProps,\n getDecrementProps\n } = useCounter({\n initial: 0,\n max: MAX_COUNT\n });\n\n const handleBtn1Clicked = () => {\n console.log(\"btn 1 clicked\");\n };\n\n return (\n <>\n \n Counter \n \n \n \n Custom increment btn 1\n \n \n \n MAX_COUNT - 2 })}>\n Custom increment btn 2\n \n \n \n );\n}\n\nexport { Usage };\n\nconst StyledContainer = styled.div`\n margin-top: 20px;\n`;\n"
},
{
"path": "src/patterns/props-getters/components/Count.js",
"content": "import React from \"react\";\nimport styled from \"styled-components\";\nimport { useCounterContext } from \"../useCounterContext\";\n\nfunction Count({ max }) {\n const { count } = useCounterContext();\n\n const hasError = max ? count >= max : false;\n\n return {count} ;\n}\n\nconst StyledCount = styled.div`\n background-color: ${({ hasError }) => (hasError ? \"#bd2130\" : \"#17a2b8\")};\n color: white;\n padding: 5px 7px;\n`;\n\nexport { Count };\n"
},
{
"path": "src/patterns/props-getters/components/Decrement.js",
"content": "import React from \"react\";\nimport { StyledButton } from \"./styles.js\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\n\nfunction Decrement({ icon = \"minus\", onClick, ...props }) {\n return (\n \n \n );\n}\n\nexport { Decrement };\n"
},
{
"path": "src/patterns/props-getters/components/Increment.js",
"content": "import React from \"react\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { StyledButton } from \"./styles.js\";\n\nfunction Increment({ icon = \"plus\", onClick, ...props }) {\n return (\n \n \n );\n}\n\nexport { Increment };\n"
},
{
"path": "src/patterns/props-getters/components/Label.js",
"content": "import React from \"react\";\nimport styled from \"styled-components\";\n\nfunction Label({ children }) {\n return {children} ;\n}\n\nconst StyledLabel = styled.div`\n background-color: #e9ecef;\n color: #495057;\n padding: 5px 7px;\n`;\n\nexport { Label };\n"
},
{
"path": "src/patterns/props-getters/components/index.js",
"content": "export * from \"./Count\";\nexport * from \"./Decrement\";\nexport * from \"./Increment\";\nexport * from \"./Label\";\n"
},
{
"path": "src/patterns/props-getters/components/styles.js",
"content": "import styled from \"styled-components\";\n\nconst StyledButton = styled.button`\n background-color: white;\n border: none;\n &:hover {\n cursor: pointer;\n }\n &:active,\n &:focus {\n outline: none;\n }\n`;\n\nexport { StyledButton };\n"
},
{
"path": "src/patterns/props-getters/useCounter.js",
"content": "import { useState } from \"react\";\n\n//Function which concat all functions together\nconst callFnsInSequence = (...fns) => (...args) =>\n fns.forEach((fn) => fn && fn(...args));\n\nfunction useCounter({ initial, max }) {\n const [count, setCount] = useState(initial);\n\n const handleIncrement = () => {\n setCount((prevCount) => Math.min(prevCount + 1, max));\n };\n\n const handleDecrement = () => {\n setCount((prevCount) => Math.max(0, prevCount - 1));\n };\n\n //props getter for 'Counter'\n const getCounterProps = ({ ...otherProps } = {}) => ({\n value: count,\n \"aria-valuemax\": max,\n \"aria-valuemin\": 0,\n \"aria-valuenow\": count,\n ...otherProps\n });\n\n //props getter for 'Decrement'\n const getDecrementProps = ({ onClick, ...otherProps } = {}) => ({\n onClick: callFnsInSequence(handleDecrement, onClick),\n disabled: count === 0,\n ...otherProps\n });\n\n //props getter for 'Increment'\n const getIncrementProps = ({ onClick, ...otherProps } = {}) => ({\n onClick: callFnsInSequence(handleIncrement, onClick),\n disabled: count === max,\n ...otherProps\n });\n\n return {\n count,\n handleIncrement,\n handleDecrement,\n getCounterProps,\n getDecrementProps,\n getIncrementProps\n };\n}\n\nexport { useCounter };\n"
},
{
"path": "src/patterns/props-getters/useCounterContext.js",
"content": "import React from \"react\";\n\nconst CounterContext = React.createContext(undefined);\n\nfunction CounterProvider({ children, value }) {\n return (\n {children} \n );\n}\n\nfunction useCounterContext() {\n const context = React.useContext(CounterContext);\n if (context === undefined) {\n throw new Error(\"useCounterContext must be used within a CounterProvider\");\n }\n return context;\n}\n\nexport { CounterProvider, useCounterContext };\n"
},
{
"path": "src/patterns/state-reducer/Counter.js",
"content": "import React, { useRef, useEffect } from \"react\";\nimport styled from \"styled-components\";\nimport { CounterProvider } from \"./useCounterContext\";\nimport { Count, Label, Decrement, Increment } from \"./components\";\n\nfunction Counter({ children, value: count, onChange }) {\n const firstMounded = useRef(true);\n useEffect(() => {\n if (!firstMounded.current) {\n onChange && onChange(count);\n }\n firstMounded.current = false;\n }, [count, onChange]);\n\n return (\n \n {children} \n \n );\n}\n\nconst StyledCounter = styled.div`\n display: inline-flex;\n border: 1px solid #17a2b8;\n line-height: 1.5;\n border-radius: 0.25rem;\n overflow: hidden;\n`;\n\nCounter.Count = Count;\nCounter.Label = Label;\nCounter.Increment = Increment;\nCounter.Decrement = Decrement;\n\nexport { Counter };\n"
},
{
"path": "src/patterns/state-reducer/Usage.js",
"content": "import React from \"react\";\nimport styled from \"styled-components\";\nimport { Counter } from \"./Counter\";\nimport { useCounter } from \"./useCounter\";\n\nconst MAX_COUNT = 10;\nfunction Usage() {\n const reducer = (state, action) => {\n switch (action.type) {\n case \"decrement\":\n return {\n count: Math.max(0, state.count - 2) //The decrement delta was changed for 2 (Default is 1)\n };\n default:\n return useCounter.reducer(state, action);\n }\n };\n\n const { count, handleDecrement, handleIncrement } = useCounter(\n { initial: 0, max: 10 },\n reducer\n );\n\n return (\n <>\n \n Counter \n \n \n \n Custom increment btn 1\n \n \n \n );\n}\n\n\n\nexport { Usage };\n\nconst StyledContainer = styled.div`\n margin-top: 20px;\n`;\n"
},
{
"path": "src/patterns/state-reducer/components/Count.js",
"content": "import React from \"react\";\nimport styled from \"styled-components\";\nimport { useCounterContext } from \"../useCounterContext\";\n\nfunction Count({ max }) {\n const { count } = useCounterContext();\n\n const hasError = max ? count >= max : false;\n\n return {count} ;\n}\n\nconst StyledCount = styled.div`\n background-color: ${({ hasError }) => (hasError ? \"#bd2130\" : \"#17a2b8\")};\n color: white;\n padding: 5px 7px;\n`;\n\nexport { Count };\n"
},
{
"path": "src/patterns/state-reducer/components/Decrement.js",
"content": "import React from \"react\";\nimport { StyledButton } from \"./styles.js\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\n\nfunction Decrement({ icon = \"minus\", onClick, ...props }) {\n return (\n \n \n );\n}\n\nexport { Decrement };\n"
},
{
"path": "src/patterns/state-reducer/components/Increment.js",
"content": "import React from \"react\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { StyledButton } from \"./styles.js\";\n\nfunction Increment({ icon = \"plus\", onClick, ...props }) {\n return (\n \n \n );\n}\n\nexport { Increment };\n"
},
{
"path": "src/patterns/state-reducer/components/Label.js",
"content": "import React from \"react\";\nimport styled from \"styled-components\";\n\nfunction Label({ children }) {\n return {children} ;\n}\n\nconst StyledLabel = styled.div`\n background-color: #e9ecef;\n color: #495057;\n padding: 5px 7px;\n`;\n\nexport { Label };\n"
},
{
"path": "src/patterns/state-reducer/components/index.js",
"content": "export * from \"./Count\";\nexport * from \"./Decrement\";\nexport * from \"./Increment\";\nexport * from \"./Label\";\n"
},
{
"path": "src/patterns/state-reducer/components/styles.js",
"content": "import styled from \"styled-components\";\n\nconst StyledButton = styled.button`\n background-color: white;\n border: none;\n &:hover {\n cursor: pointer;\n }\n &:active,\n &:focus {\n outline: none;\n }\n`;\n\nexport { StyledButton };\n"
},
{
"path": "src/patterns/state-reducer/useCounter.js",
"content": "import { useReducer } from \"react\";\n\nconst internalReducer = ({ count }, { type, payload }) => {\n switch (type) {\n case \"increment\":\n return {\n count: Math.min(count + 1, payload.max)\n };\n case \"decrement\":\n return {\n count: Math.max(0, count - 1)\n };\n default:\n throw new Error(`Unhandled action type: ${type}`);\n }\n};\n\nfunction useCounter({ initial, max }, reducer = internalReducer) {\n const [{ count }, dispatch] = useReducer(reducer, { count: initial });\n\n const handleIncrement = () => {\n dispatch({ type: \"increment\", payload: { max } });\n };\n\n const handleDecrement = () => {\n dispatch({ type: \"decrement\" });\n };\n\n return {\n count,\n handleIncrement,\n handleDecrement\n };\n}\n\nuseCounter.reducer = internalReducer;\nuseCounter.types = {\n increment: \"increment\",\n decrement: \"decrement\"\n};\n\nexport { useCounter };\n"
},
{
"path": "src/patterns/state-reducer/useCounterContext.js",
"content": "import React from \"react\";\n\nconst CounterContext = React.createContext(undefined);\n\nfunction CounterProvider({ children, value }) {\n return (\n {children} \n );\n}\n\nfunction useCounterContext() {\n const context = React.useContext(CounterContext);\n if (context === undefined) {\n throw new Error(\"useCounterContext must be used within a CounterProvider\");\n }\n return context;\n}\n\nexport { CounterProvider, useCounterContext };\n"
}
]