├── .eslintcache ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt ├── src ├── App.css ├── App.js ├── App.test.js ├── app │ └── store.js ├── features │ ├── counter │ │ ├── Counter.js │ │ ├── Counter.module.css │ │ └── counterSlice.js │ ├── posts │ │ ├── Posts.js │ │ └── postsSlice.js │ ├── todos │ │ ├── Todos.js │ │ └── todosSlice.js │ └── users │ │ ├── Users.js │ │ └── usersSlice.js ├── index.css ├── index.js ├── logo.svg ├── serviceWorker.js └── setupTests.js └── thumb.png /.eslintcache: -------------------------------------------------------------------------------- 1 | [{"/Users/mohammed/Desktop/rowad/react-redux-toolkit/src/index.js":"1","/Users/mohammed/Desktop/rowad/react-redux-toolkit/src/serviceWorker.js":"2","/Users/mohammed/Desktop/rowad/react-redux-toolkit/src/app/store.js":"3","/Users/mohammed/Desktop/rowad/react-redux-toolkit/src/App.js":"4","/Users/mohammed/Desktop/rowad/react-redux-toolkit/src/features/counter/counterSlice.js":"5","/Users/mohammed/Desktop/rowad/react-redux-toolkit/src/features/todos/todosSlice.js":"6"},{"size":644,"mtime":1607114211585,"results":"7","hashOfConfig":"8"},{"size":5141,"mtime":1607114211585,"results":"9","hashOfConfig":"8"},{"size":286,"mtime":1607280460873,"results":"10","hashOfConfig":"8"},{"size":1969,"mtime":1607280700390,"results":"11","hashOfConfig":"8"},{"size":713,"mtime":1607118853795,"results":"12","hashOfConfig":"8"},{"size":278,"mtime":1607280428460,"results":"13","hashOfConfig":"8"},{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},"tutlfm",{"filePath":"17","messages":"18","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},{"filePath":"19","messages":"20","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"23","messages":"24","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},{"filePath":"25","messages":"26","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/mohammed/Desktop/rowad/react-redux-toolkit/src/index.js",[],["27","28"],"/Users/mohammed/Desktop/rowad/react-redux-toolkit/src/serviceWorker.js",[],"/Users/mohammed/Desktop/rowad/react-redux-toolkit/src/app/store.js",[],"/Users/mohammed/Desktop/rowad/react-redux-toolkit/src/App.js",[],"/Users/mohammed/Desktop/rowad/react-redux-toolkit/src/features/counter/counterSlice.js",[],"/Users/mohammed/Desktop/rowad/react-redux-toolkit/src/features/todos/todosSlice.js",[],{"ruleId":"29","replacedBy":"30"},{"ruleId":"31","replacedBy":"32"},"no-native-reassign",["33"],"no-negated-in-lhs",["34"],"no-global-assign","no-unsafe-negation"] -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # redux toolkit yt 2 | 3 | 5 | Buy Me A Coffee 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-redux-toolkit", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@reduxjs/toolkit": "^1.5.0", 7 | "@testing-library/jest-dom": "^4.2.4", 8 | "@testing-library/react": "^9.5.0", 9 | "@testing-library/user-event": "^7.2.1", 10 | "react": "^17.0.1", 11 | "react-dom": "^17.0.1", 12 | "react-redux": "^7.2.2", 13 | "react-scripts": "4.0.1", 14 | "rsuite": "^4.8.5" 15 | }, 16 | "scripts": { 17 | "start": "react-scripts start", 18 | "build": "react-scripts build", 19 | "test": "react-scripts test", 20 | "eject": "react-scripts eject" 21 | }, 22 | "eslintConfig": { 23 | "extends": "react-app" 24 | }, 25 | "browserslist": { 26 | "production": [ 27 | ">0.2%", 28 | "not dead", 29 | "not op_mini all" 30 | ], 31 | "development": [ 32 | "last 1 chrome version", 33 | "last 1 firefox version", 34 | "last 1 safari version" 35 | ] 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rowadz/react-redux-toolkit-yt/c141169b66781dab8560c664f2dc9d23131f1979/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React Redux App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rowadz/react-redux-toolkit-yt/c141169b66781dab8560c664f2dc9d23131f1979/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rowadz/react-redux-toolkit-yt/c141169b66781dab8560c664f2dc9d23131f1979/public/logo512.png -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-float infinite 3s ease-in-out; 13 | } 14 | } 15 | 16 | .App-header { 17 | min-height: 100vh; 18 | display: flex; 19 | flex-direction: column; 20 | align-items: center; 21 | justify-content: center; 22 | font-size: calc(10px + 2vmin); 23 | } 24 | 25 | .App-link { 26 | color: rgb(112, 76, 182); 27 | } 28 | 29 | @keyframes App-logo-float { 30 | 0% { 31 | transform: translateY(0); 32 | } 33 | 50% { 34 | transform: translateY(10px) 35 | } 36 | 100% { 37 | transform: translateY(0px) 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import 'rsuite/dist/styles/rsuite-dark.css' 3 | import { useDispatch } from 'react-redux' 4 | import Todos from './features/todos/Todos' 5 | import Posts from './features/posts/Posts' 6 | import Users from './features/users/Users' 7 | import { add } from './features/todos/todosSlice' 8 | import { 9 | Button, 10 | Container, 11 | Header, 12 | Navbar, 13 | Content, 14 | FlexboxGrid, 15 | Panel, 16 | Form, 17 | FormGroup, 18 | ControlLabel, 19 | FormControl, 20 | ButtonToolbar, 21 | Divider, 22 | } from 'rsuite' 23 | import './App.css' 24 | 25 | function App() { 26 | const [todoTxt, setTodoTxt] = useState('') 27 | const dispatch = useDispatch() 28 | return ( 29 |
30 | 31 |
32 | 33 | 34 |

Redux React TODO

35 | 36 | 37 |
38 | 39 | 40 | 41 | Add ToDo} bordered> 42 |
43 | 44 | What you want to do? 45 | 50 | 51 | 52 | 53 | 64 | 65 | 66 |
67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 |
77 | ) 78 | } 79 | 80 | export default App 81 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import { Provider } from 'react-redux'; 4 | import store from './app/store'; 5 | import App from './App'; 6 | 7 | test('renders learn react link', () => { 8 | const { getByText } = render( 9 | 10 | 11 | 12 | ); 13 | 14 | expect(getByText(/learn/i)).toBeInTheDocument(); 15 | }); 16 | -------------------------------------------------------------------------------- /src/app/store.js: -------------------------------------------------------------------------------- 1 | import { configureStore } from '@reduxjs/toolkit' 2 | import counterReducer from '../features/counter/counterSlice' 3 | import todosReducer from '../features/todos/todosSlice' 4 | import postsReducer from '../features/posts/postsSlice' 5 | import usersReducer from '../features/users/usersSlice' 6 | 7 | export default configureStore({ 8 | reducer: { 9 | counter: counterReducer, 10 | todos: todosReducer, 11 | posts: postsReducer, 12 | users: usersReducer, 13 | }, 14 | }) 15 | -------------------------------------------------------------------------------- /src/features/counter/Counter.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { useSelector, useDispatch } from 'react-redux'; 3 | import { 4 | decrement, 5 | increment, 6 | incrementByAmount, 7 | incrementAsync, 8 | selectCount, 9 | } from './counterSlice'; 10 | import styles from './Counter.module.css'; 11 | 12 | export function Counter() { 13 | const count = useSelector(selectCount); 14 | const dispatch = useDispatch(); 15 | const [incrementAmount, setIncrementAmount] = useState('2'); 16 | 17 | return ( 18 |
19 |
20 | 27 | {count} 28 | 35 |
36 |
37 | setIncrementAmount(e.target.value)} 42 | /> 43 | 51 | 57 |
58 |
59 | ); 60 | } 61 | -------------------------------------------------------------------------------- /src/features/counter/Counter.module.css: -------------------------------------------------------------------------------- 1 | .row { 2 | display: flex; 3 | align-items: center; 4 | justify-content: center; 5 | } 6 | 7 | .row:not(:last-child) { 8 | margin-bottom: 16px; 9 | } 10 | 11 | .value { 12 | font-size: 78px; 13 | padding-left: 16px; 14 | padding-right: 16px; 15 | margin-top: 2px; 16 | font-family: 'Courier New', Courier, monospace; 17 | } 18 | 19 | .button { 20 | appearance: none; 21 | background: none; 22 | font-size: 32px; 23 | padding-left: 12px; 24 | padding-right: 12px; 25 | outline: none; 26 | border: 2px solid transparent; 27 | color: rgb(112, 76, 182); 28 | padding-bottom: 4px; 29 | cursor: pointer; 30 | background-color: rgba(112, 76, 182, 0.1); 31 | border-radius: 2px; 32 | transition: all 0.15s; 33 | } 34 | 35 | .textbox { 36 | font-size: 32px; 37 | padding: 2px; 38 | width: 64px; 39 | text-align: center; 40 | margin-right: 8px; 41 | } 42 | 43 | .button:hover, .button:focus { 44 | border: 2px solid rgba(112, 76, 182, 0.4); 45 | } 46 | 47 | .button:active { 48 | background-color: rgba(112, 76, 182, 0.2); 49 | } 50 | 51 | .asyncButton { 52 | composes: button; 53 | position: relative; 54 | margin-left: 8px; 55 | } 56 | 57 | .asyncButton:after { 58 | content: ""; 59 | background-color: rgba(112, 76, 182, 0.15); 60 | display: block; 61 | position: absolute; 62 | width: 100%; 63 | height: 100%; 64 | left: 0; 65 | top: 0; 66 | opacity: 0; 67 | transition: width 1s linear, opacity 0.5s ease 1s; 68 | } 69 | 70 | .asyncButton:active:after { 71 | width: 0%; 72 | opacity: 1; 73 | transition: 0s 74 | } 75 | -------------------------------------------------------------------------------- /src/features/counter/counterSlice.js: -------------------------------------------------------------------------------- 1 | import { createSlice } from '@reduxjs/toolkit'; 2 | 3 | export const counterSlice = createSlice({ 4 | name: 'counter', 5 | initialState: { 6 | value: 0, 7 | }, 8 | reducers: { 9 | increment: state => { 10 | state.value += 1; 11 | }, 12 | decrement: state => { 13 | state.value -= 1; 14 | }, 15 | incrementByAmount: (state, action) => { 16 | state.value += action.payload; 17 | }, 18 | }, 19 | }); 20 | 21 | export const { increment, decrement, incrementByAmount } = counterSlice.actions; 22 | 23 | export const incrementAsync = amount => dispatch => { 24 | setTimeout(() => { 25 | dispatch(incrementByAmount(amount)); 26 | }, 1000); 27 | }; 28 | 29 | export const selectCount = state => state.counter.value; 30 | 31 | export default counterSlice.reducer; 32 | -------------------------------------------------------------------------------- /src/features/posts/Posts.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from 'react' 2 | import { useDispatch } from 'react-redux' 3 | import { getPosts } from './postsSlice' 4 | 5 | const Posts = () => { 6 | const dispatch = useDispatch() 7 | 8 | useEffect(() => { 9 | dispatch(getPosts({ limit: 5 })) 10 | }, [dispatch]) 11 | 12 | return ( 13 |
14 |

posts...

15 |
16 | ) 17 | } 18 | 19 | export default Posts 20 | -------------------------------------------------------------------------------- /src/features/posts/postsSlice.js: -------------------------------------------------------------------------------- 1 | import { createSlice, createAsyncThunk } from '@reduxjs/toolkit' 2 | 3 | export const getPosts = createAsyncThunk( 4 | 'posts/getPosts', 5 | async ({ limit }, { dispatch, getState }) => { 6 | // const { todos } = getState() 7 | // console.log({ todos }) 8 | // you can dispatch any action from here! 9 | // dispatch(del(2)) 10 | return fetch( 11 | `https://jsonplaceholder.typicode.com/posts?_limit=${limit}` 12 | ).then((res) => res.json()) 13 | } 14 | ) 15 | 16 | const postsSlice = createSlice({ 17 | name: 'posts', 18 | initialState: { 19 | list: [], 20 | status: null, 21 | }, 22 | extraReducers: { 23 | [getPosts.pending]: (state, action) => { 24 | state.status = 'loading' 25 | }, 26 | [getPosts.fulfilled]: (state, { payload }) => { 27 | state.list = payload 28 | state.status = 'success' 29 | }, 30 | [getPosts.rejected]: (state, action) => { 31 | state.status = 'failed' 32 | }, 33 | }, 34 | }) 35 | 36 | export default postsSlice.reducer 37 | -------------------------------------------------------------------------------- /src/features/todos/Todos.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { useSelector, useDispatch } from 'react-redux' 3 | import { selectTodos, del, patch, delProp } from './todosSlice' 4 | import { List, FlexboxGrid, IconButton, Icon } from 'rsuite' 5 | 6 | export default function Todos() { 7 | const todos = useSelector(selectTodos) 8 | const dispatch = useDispatch() 9 | return ( 10 | 11 | {todos.map(({ txt, id }, index) => ( 12 | 13 | 14 | {txt} 15 | 16 | 17 | dispatch(del(index))} 19 | icon={} 20 | color="red" 21 | circle 22 | /> 23 | dispatch(patch({ index, txt: 'Rowadz' }))} 25 | icon={} 26 | color="blue" 27 | circle 28 | /> 29 | dispatch(delProp({ index, prop: 'txt' }))} 31 | icon={} 32 | color="yellow" 33 | circle 34 | /> 35 | 36 | 37 | 38 | ))} 39 | 40 | ) 41 | } 42 | -------------------------------------------------------------------------------- /src/features/todos/todosSlice.js: -------------------------------------------------------------------------------- 1 | import { createSlice } from '@reduxjs/toolkit' 2 | 3 | const todoSlice = createSlice({ 4 | name: 'todos', 5 | initialState: [ 6 | { id: 1, txt: 'rowadz' }, 7 | { id: 2, txt: 'rowadz02' }, 8 | { id: 3, txt: 'rowadz03' }, 9 | ], 10 | reducers: { 11 | add(state, { payload }) { 12 | state.push(payload) 13 | }, 14 | del(state, { payload: index }) { 15 | state.splice(index, 1) 16 | }, 17 | patch(state, { payload: { index, txt } }) { 18 | state[index].txt = txt 19 | }, 20 | delProp(state, { payload: { index, prop } }) { 21 | delete state[index][prop] 22 | }, 23 | }, 24 | }) 25 | 26 | export const { add, del, patch, delProp } = todoSlice.actions 27 | 28 | export const selectTodos = ({ todos }) => todos 29 | 30 | export default todoSlice.reducer 31 | -------------------------------------------------------------------------------- /src/features/users/Users.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from 'react' 2 | import { useDispatch } from 'react-redux' 3 | import { fetchData } from './usersSlice' 4 | 5 | const Users = () => { 6 | const dispatch = useDispatch() 7 | useEffect(() => { 8 | dispatch(fetchData()) 9 | }, [dispatch]) 10 | return
11 | } 12 | 13 | export default Users 14 | -------------------------------------------------------------------------------- /src/features/users/usersSlice.js: -------------------------------------------------------------------------------- 1 | import { 2 | createSlice, 3 | createEntityAdapter, 4 | createAsyncThunk, 5 | createSelector, 6 | } from '@reduxjs/toolkit' 7 | 8 | export const fetchData = createAsyncThunk( 9 | 'users/fetchData', 10 | async (_, { dispatch }) => { 11 | const data = await fetch('http://localhost:3001/users').then((res) => 12 | res.json() 13 | ) 14 | const users = data.map(({ articles, comments, ...user }) => ({ ...user })) 15 | dispatch(setUsers(users)) 16 | 17 | const articles = data 18 | .map((user) => 19 | user.articles.map((article) => ({ ...article, userId: user.id })) 20 | ) 21 | .flat() 22 | 23 | dispatch(setArticles(articles)) 24 | 25 | const comments = data 26 | .map((user) => 27 | user.comments.map((comment) => ({ ...comment, userId: user.id })) 28 | ) 29 | .flat() 30 | 31 | dispatch(setComments(comments)) 32 | } 33 | ) 34 | 35 | const usersAdapter = createEntityAdapter({ 36 | selectId: ({ id }) => id, 37 | }) 38 | 39 | const commentsAdapter = createEntityAdapter({ 40 | selectId: ({ id }) => id, 41 | }) 42 | 43 | const articlesAdapter = createEntityAdapter({ 44 | selectId: ({ id }) => id, 45 | }) 46 | 47 | const usersSlice = createSlice({ 48 | name: 'users', 49 | initialState: usersAdapter.getInitialState({ 50 | comments: commentsAdapter.getInitialState(), 51 | articles: articlesAdapter.getInitialState(), 52 | }), 53 | reducers: { 54 | addUser: usersAdapter.addOne, 55 | setUsers: usersAdapter.setAll, 56 | addUsers: usersAdapter.addMany, 57 | setComments(state, { payload }) { 58 | commentsAdapter.setAll(state.comments, payload) 59 | }, 60 | setArticles(state, { payload }) { 61 | articlesAdapter.setAll(state.articles, payload) 62 | }, 63 | }, 64 | }) 65 | 66 | export const { 67 | addUser, 68 | setUsers, 69 | addUsers, 70 | setComments, 71 | setArticles, 72 | } = usersSlice.actions 73 | 74 | export const { 75 | selectAll: selectAllUsers, 76 | selectById: selectUsersById, 77 | selectEntities: selectUsersEntities, 78 | selectIds: selectUsersIds, 79 | selectTotal: selectTotalUsers, 80 | } = usersAdapter.getSelectors() 81 | 82 | export const selectUsersAdapter = (state) => state.users 83 | 84 | export const selectAtricles = createSelector(selectUsersAdapter, (state) => 85 | articlesAdapter.getSelectors().selectAll(state.articles) 86 | ) 87 | 88 | export const selectAtriclesIds = createSelector(selectUsersAdapter, (state) => 89 | articlesAdapter.getSelectors().selectIds(state.articles) 90 | ) 91 | 92 | export default usersSlice.reducer 93 | 94 | // http://localhost:3001/users response:: 95 | // [{ 96 | // "id": "843e9362-bf59-4701-ac75-805e56bfbab4", 97 | // "email": "Emily.Brown36@yahoo.com", 98 | // "name": "Edwin Mayert", 99 | // "articles": [ 100 | // { 101 | // "id": "5a8b3480-5218-4eb9-b983-0f032311b6cf", 102 | // "paragraphs": "Illo quisquam suscipit magnam qui autem sit nulla enim. Aut est porro et sed animi. Labore eius sit odit. Laborum quasi aut qui. Delectus ea sed non et.\n \rVelit enim occaecati nulla sint. Non quia molestiae soluta temporibus non omnis aut. Iure facere mollitia est est repellendus consequatur.\n \rExplicabo sequi ea saepe quia tenetur quae illum. Optio officia sit voluptatem accusantium iure. Repellendus excepturi nemo quam ipsam dicta et consectetur asperiores consequuntur.", 103 | // "image": "http://lorempixel.com/640/480/nature" 104 | // }, 105 | // { 106 | // "id": "06a894e5-f11d-4ad1-be47-c795ea69cd8b", 107 | // "paragraphs": "Nulla doloremque ratione sed id et sit rerum earum amet. Odio rerum ea unde qui quod. Modi in labore reprehenderit. Vero alias sit consequatur.\n \rQuis quis impedit architecto. Enim rerum ad et dolore eum error est. Voluptatem accusantium ut quo quo eum iusto repudiandae est est. Et beatae perspiciatis.\n \rConsequatur qui repudiandae omnis nesciunt similique. Velit eum tempore saepe odit distinctio voluptas ad consequatur. Impedit quos quae et placeat quia harum reiciendis accusamus. Nesciunt ducimus fugiat deserunt inventore. Eum architecto delectus. Consectetur aut quia rerum ut nemo dolor.", 108 | // "image": "http://lorempixel.com/640/480/food" 109 | // } 110 | // ], 111 | // "comments": [ 112 | // { 113 | // "id": "cb15983b-2e86-44c2-9ef7-27b6162cfc71", 114 | // "paragraph": "Autem sed quam veniam ut iure sunt modi placeat. Neque in fugit eligendi architecto dolores doloremque. In neque voluptatem voluptates voluptatem ut aut sed inventore. Laboriosam tenetur itaque delectus itaque quaerat. Eos et adipisci aliquam consequatur est perferendis ipsam. Ipsam omnis ut nihil et." 115 | // }, 116 | // { 117 | // "id": "9a0b1ff5-8d71-40c0-91a5-cd3e9987474c", 118 | // "paragraph": "Nulla cupiditate itaque facilis. Accusantium quae repudiandae qui sit expedita omnis unde. Neque quidem animi aut itaque voluptatem aut omnis excepturi. Atque ipsam laborum." 119 | // } 120 | // ] 121 | // }] 122 | -------------------------------------------------------------------------------- /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/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import store from './app/store'; 6 | import { Provider } from 'react-redux'; 7 | import * as serviceWorker from './serviceWorker'; 8 | 9 | ReactDOM.render( 10 | 11 | 12 | 13 | 14 | , 15 | document.getElementById('root') 16 | ); 17 | 18 | // If you want your app to work offline and load faster, you can change 19 | // unregister() to register() below. Note this comes with some pitfalls. 20 | // Learn more about service workers: https://bit.ly/CRA-PWA 21 | serviceWorker.unregister(); 22 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/serviceWorker.js: -------------------------------------------------------------------------------- 1 | // This optional code is used to register a service worker. 2 | // register() is not called by default. 3 | 4 | // This lets the app load faster on subsequent visits in production, and gives 5 | // it offline capabilities. However, it also means that developers (and users) 6 | // will only see deployed updates on subsequent visits to a page, after all the 7 | // existing tabs open on the page have been closed, since previously cached 8 | // resources are updated in the background. 9 | 10 | // To learn more about the benefits of this model and instructions on how to 11 | // opt-in, read https://bit.ly/CRA-PWA 12 | 13 | const isLocalhost = Boolean( 14 | window.location.hostname === 'localhost' || 15 | // [::1] is the IPv6 localhost address. 16 | window.location.hostname === '[::1]' || 17 | // 127.0.0.0/8 are considered localhost for IPv4. 18 | window.location.hostname.match( 19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 20 | ) 21 | ); 22 | 23 | export function register(config) { 24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 25 | // The URL constructor is available in all browsers that support SW. 26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); 27 | if (publicUrl.origin !== window.location.origin) { 28 | // Our service worker won't work if PUBLIC_URL is on a different origin 29 | // from what our page is served on. This might happen if a CDN is used to 30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374 31 | return; 32 | } 33 | 34 | window.addEventListener('load', () => { 35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 36 | 37 | if (isLocalhost) { 38 | // This is running on localhost. Let's check if a service worker still exists or not. 39 | checkValidServiceWorker(swUrl, config); 40 | 41 | // Add some additional logging to localhost, pointing developers to the 42 | // service worker/PWA documentation. 43 | navigator.serviceWorker.ready.then(() => { 44 | console.log( 45 | 'This web app is being served cache-first by a service ' + 46 | 'worker. To learn more, visit https://bit.ly/CRA-PWA' 47 | ); 48 | }); 49 | } else { 50 | // Is not localhost. Just register service worker 51 | registerValidSW(swUrl, config); 52 | } 53 | }); 54 | } 55 | } 56 | 57 | function registerValidSW(swUrl, config) { 58 | navigator.serviceWorker 59 | .register(swUrl) 60 | .then(registration => { 61 | registration.onupdatefound = () => { 62 | const installingWorker = registration.installing; 63 | if (installingWorker == null) { 64 | return; 65 | } 66 | installingWorker.onstatechange = () => { 67 | if (installingWorker.state === 'installed') { 68 | if (navigator.serviceWorker.controller) { 69 | // At this point, the updated precached content has been fetched, 70 | // but the previous service worker will still serve the older 71 | // content until all client tabs are closed. 72 | console.log( 73 | 'New content is available and will be used when all ' + 74 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.' 75 | ); 76 | 77 | // Execute callback 78 | if (config && config.onUpdate) { 79 | config.onUpdate(registration); 80 | } 81 | } else { 82 | // At this point, everything has been precached. 83 | // It's the perfect time to display a 84 | // "Content is cached for offline use." message. 85 | console.log('Content is cached for offline use.'); 86 | 87 | // Execute callback 88 | if (config && config.onSuccess) { 89 | config.onSuccess(registration); 90 | } 91 | } 92 | } 93 | }; 94 | }; 95 | }) 96 | .catch(error => { 97 | console.error('Error during service worker registration:', error); 98 | }); 99 | } 100 | 101 | function checkValidServiceWorker(swUrl, config) { 102 | // Check if the service worker can be found. If it can't reload the page. 103 | fetch(swUrl, { 104 | headers: { 'Service-Worker': 'script' }, 105 | }) 106 | .then(response => { 107 | // Ensure service worker exists, and that we really are getting a JS file. 108 | const contentType = response.headers.get('content-type'); 109 | if ( 110 | response.status === 404 || 111 | (contentType != null && contentType.indexOf('javascript') === -1) 112 | ) { 113 | // No service worker found. Probably a different app. Reload the page. 114 | navigator.serviceWorker.ready.then(registration => { 115 | registration.unregister().then(() => { 116 | window.location.reload(); 117 | }); 118 | }); 119 | } else { 120 | // Service worker found. Proceed as normal. 121 | registerValidSW(swUrl, config); 122 | } 123 | }) 124 | .catch(() => { 125 | console.log( 126 | 'No internet connection found. App is running in offline mode.' 127 | ); 128 | }); 129 | } 130 | 131 | export function unregister() { 132 | if ('serviceWorker' in navigator) { 133 | navigator.serviceWorker.ready.then(registration => { 134 | registration.unregister(); 135 | }); 136 | } 137 | } 138 | -------------------------------------------------------------------------------- /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/extend-expect'; 6 | -------------------------------------------------------------------------------- /thumb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rowadz/react-redux-toolkit-yt/c141169b66781dab8560c664f2dc9d23131f1979/thumb.png --------------------------------------------------------------------------------