├── .gitignore
├── .idea
    ├── .gitignore
    ├── modules.xml
    ├── react-pizza.iml
    ├── vcs.xml
    └── workspace.xml
├── README.md
├── package-lock.json
├── package.json
├── public
    ├── arrow-top.svg
    ├── cart.svg
    ├── empty-cart.png
    ├── favicon.ico
    ├── grey-arrow-left.svg
    ├── index.html
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    ├── pizza-logo.svg
    ├── plus.svg
    ├── robots.txt
    └── trash.svg
├── src
    ├── @types
    │   └── assets.d.ts
    ├── App.css
    ├── App.test.js
    ├── App.tsx
    ├── assets
    │   └── img
    │   │   ├── arrow-top.svg
    │   │   ├── cart.svg
    │   │   ├── empty-cart.png
    │   │   ├── grey-arrow-left.svg
    │   │   ├── pizza-logo.svg
    │   │   ├── plus.svg
    │   │   └── trash.svg
    ├── components
    │   ├── CartEmpty.tsx
    │   ├── CartItem.tsx
    │   ├── Categories.tsx
    │   ├── Header.tsx
    │   ├── NotFoundBlock
    │   │   ├── NotFoundBlock.module.scss
    │   │   └── index.tsx
    │   ├── Pagination
    │   │   ├── Pagination.module.scss
    │   │   └── index.tsx
    │   ├── PizzaBlock
    │   │   ├── Skeleton.tsx
    │   │   └── index.tsx
    │   ├── Search
    │   │   ├── Search.module.scss
    │   │   └── index.tsx
    │   ├── Sort.tsx
    │   └── index.ts
    ├── index.tsx
    ├── layouts
    │   └── MainLayout.tsx
    ├── logo.svg
    ├── pages
    │   ├── Cart.tsx
    │   ├── FullPizza.tsx
    │   ├── Home.tsx
    │   └── NotFound.tsx
    ├── redux
    │   ├── cart
    │   │   ├── selectors.ts
    │   │   ├── slice.ts
    │   │   └── types.ts
    │   ├── filter
    │   │   ├── selectors.ts
    │   │   ├── slice.ts
    │   │   └── types.ts
    │   ├── pizza
    │   │   ├── asyncActions.ts
    │   │   ├── selectors.ts
    │   │   ├── slice.ts
    │   │   └── types.ts
    │   └── store.ts
    ├── reportWebVitals.js
    ├── scss
    │   ├── _variables.scss
    │   ├── app.scss
    │   ├── components
    │   │   ├── _all.scss
    │   │   ├── _button.scss
    │   │   ├── _categories.scss
    │   │   ├── _header.scss
    │   │   ├── _pizza-block.scss
    │   │   └── _sort.scss
    │   └── libs
    │   │   └── _normalize.scss
    ├── setupTests.js
    └── utils
    │   ├── calcTotalPrice.ts
    │   ├── getCartFromLS.ts
    │   └── math.ts
└── tsconfig.json


/.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 | 


--------------------------------------------------------------------------------
/.idea/.gitignore:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dacorm/react-pizza/4897bf2844b55476cb682d0cdf4feccf3a2cad0b/.idea/.gitignore


--------------------------------------------------------------------------------
/.idea/modules.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="ProjectModuleManager">
4 |     <modules>
5 |       <module fileurl="file://$PROJECT_DIR$/.idea/react-pizza.iml" filepath="$PROJECT_DIR$/.idea/react-pizza.iml" />
6 |     </modules>
7 |   </component>
8 | </project>


--------------------------------------------------------------------------------
/.idea/react-pizza.iml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <module type="WEB_MODULE" version="4">
 3 |   <component name="NewModuleRootManager">
 4 |     <content url="file://$MODULE_DIR$">
 5 |       <excludeFolder url="file://$MODULE_DIR$/temp" />
 6 |       <excludeFolder url="file://$MODULE_DIR$/.tmp" />
 7 |       <excludeFolder url="file://$MODULE_DIR$/tmp" />
 8 |       <excludeFolder url="file://$MODULE_DIR$/build" />
 9 |     </content>
10 |     <orderEntry type="inheritedJdk" />
11 |     <orderEntry type="sourceFolder" forTests="false" />
12 |   </component>
13 | </module>


--------------------------------------------------------------------------------
/.idea/vcs.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="VcsDirectoryMappings">
4 |     <mapping directory="$PROJECT_DIR$" vcs="Git" />
5 |   </component>
6 | </project>


--------------------------------------------------------------------------------
/.idea/workspace.xml:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" encoding="UTF-8"?>
  2 | <project version="4">
  3 |   <component name="ChangeListManager">
  4 |     <list default="true" id="d5968668-764e-485f-8e2a-6882f8d39ee7" name="Changes" comment="feat: almost all functional">
  5 |       <change afterPath="$PROJECT_DIR$/src/components/CartEmpty.tsx" afterDir="false" />
  6 |       <change afterPath="$PROJECT_DIR$/src/components/CartItem.tsx" afterDir="false" />
  7 |       <change afterPath="$PROJECT_DIR$/src/components/Categories.tsx" afterDir="false" />
  8 |       <change afterPath="$PROJECT_DIR$/src/components/Header.tsx" afterDir="false" />
  9 |       <change afterPath="$PROJECT_DIR$/src/components/NotFoundBlock/index.tsx" afterDir="false" />
 10 |       <change afterPath="$PROJECT_DIR$/src/components/Pagination/Pagination.module.scss" afterDir="false" />
 11 |       <change afterPath="$PROJECT_DIR$/src/components/Pagination/index.tsx" afterDir="false" />
 12 |       <change afterPath="$PROJECT_DIR$/src/components/PizzaBlock/Skeleton.tsx" afterDir="false" />
 13 |       <change afterPath="$PROJECT_DIR$/src/components/PizzaBlock/index.tsx" afterDir="false" />
 14 |       <change afterPath="$PROJECT_DIR$/src/components/Search/index.tsx" afterDir="false" />
 15 |       <change afterPath="$PROJECT_DIR$/src/components/Sort.tsx" afterDir="false" />
 16 |       <change afterPath="$PROJECT_DIR$/src/components/index.ts" afterDir="false" />
 17 |       <change afterPath="$PROJECT_DIR$/tsconfig.json" afterDir="false" />
 18 |       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
 19 |       <change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
 20 |       <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
 21 |       <change beforePath="$PROJECT_DIR$/src/App.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/App.tsx" afterDir="false" />
 22 |       <change beforePath="$PROJECT_DIR$/src/components/CartEmpty.jsx" beforeDir="false" />
 23 |       <change beforePath="$PROJECT_DIR$/src/components/CartItem.jsx" beforeDir="false" />
 24 |       <change beforePath="$PROJECT_DIR$/src/components/Categories.jsx" beforeDir="false" />
 25 |       <change beforePath="$PROJECT_DIR$/src/components/Header.jsx" beforeDir="false" />
 26 |       <change beforePath="$PROJECT_DIR$/src/components/NotFoundBlock/NotFoundBlock.module.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/NotFoundBlock/NotFoundBlock.module.scss" afterDir="false" />
 27 |       <change beforePath="$PROJECT_DIR$/src/components/NotFoundBlock/index.jsx" beforeDir="false" />
 28 |       <change beforePath="$PROJECT_DIR$/src/components/Paggination/Paggination.module.scss" beforeDir="false" />
 29 |       <change beforePath="$PROJECT_DIR$/src/components/Paggination/index.jsx" beforeDir="false" />
 30 |       <change beforePath="$PROJECT_DIR$/src/components/PizzaBlock/PizzaBlock.jsx" beforeDir="false" />
 31 |       <change beforePath="$PROJECT_DIR$/src/components/PizzaBlock/Skeleton.jsx" beforeDir="false" />
 32 |       <change beforePath="$PROJECT_DIR$/src/components/Search/Search.module.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Search/Search.module.scss" afterDir="false" />
 33 |       <change beforePath="$PROJECT_DIR$/src/components/Search/index.jsx" beforeDir="false" />
 34 |       <change beforePath="$PROJECT_DIR$/src/components/Sort.jsx" beforeDir="false" />
 35 |       <change beforePath="$PROJECT_DIR$/src/index.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.tsx" afterDir="false" />
 36 |       <change beforePath="$PROJECT_DIR$/src/pages/Cart.jsx" beforeDir="false" />
 37 |       <change beforePath="$PROJECT_DIR$/src/pages/Home.jsx" beforeDir="false" />
 38 |       <change beforePath="$PROJECT_DIR$/src/pages/NotFound.jsx" beforeDir="false" />
 39 |       <change beforePath="$PROJECT_DIR$/src/redux/slices/cartSlice.js" beforeDir="false" />
 40 |       <change beforePath="$PROJECT_DIR$/src/redux/slices/filterSlice.js" beforeDir="false" />
 41 |       <change beforePath="$PROJECT_DIR$/src/redux/store.js" beforeDir="false" />
 42 |     </list>
 43 |     <option name="SHOW_DIALOG" value="false" />
 44 |     <option name="HIGHLIGHT_CONFLICTS" value="true" />
 45 |     <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
 46 |     <option name="LAST_RESOLUTION" value="IGNORE" />
 47 |   </component>
 48 |   <component name="Git.Settings">
 49 |     <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
 50 |   </component>
 51 |   <component name="GitSEFilterConfiguration">
 52 |     <file-type-list>
 53 |       <filtered-out-file-type name="LOCAL_BRANCH" />
 54 |       <filtered-out-file-type name="REMOTE_BRANCH" />
 55 |       <filtered-out-file-type name="TAG" />
 56 |       <filtered-out-file-type name="COMMIT_BY_MESSAGE" />
 57 |     </file-type-list>
 58 |   </component>
 59 |   <component name="ProjectId" id="29cQuExEgX7EZaX2KG3qqk6kf1G" />
 60 |   <component name="ProjectLevelVcsManager">
 61 |     <ConfirmationsSetting value="2" id="Add" />
 62 |   </component>
 63 |   <component name="ProjectViewState">
 64 |     <option name="hideEmptyMiddlePackages" value="true" />
 65 |     <option name="showLibraryContents" value="true" />
 66 |   </component>
 67 |   <component name="PropertiesComponent">
 68 |     <property name="ASKED_ADD_EXTERNAL_FILES" value="true" />
 69 |     <property name="RunOnceActivity.OpenProjectViewOnStart" value="true" />
 70 |     <property name="RunOnceActivity.ShowReadmeOnStart" value="true" />
 71 |     <property name="WebServerToolWindowFactoryState" value="false" />
 72 |     <property name="last_opened_file_path" value="$PROJECT_DIR$/../liveHTML" />
 73 |     <property name="nodejs_interpreter_path" value="node" />
 74 |     <property name="nodejs_package_manager_path" value="npm" />
 75 |     <property name="settings.editor.selected.configurable" value="preferences.pluginManager" />
 76 |     <property name="ts.external.directory.path" value="C:\Users\user\dev\react-pizza\node_modules\typescript\lib" />
 77 |     <property name="vue.rearranger.settings.migration" value="true" />
 78 |   </component>
 79 |   <component name="RecentsManager">
 80 |     <key name="MoveFile.RECENT_KEYS">
 81 |       <recent name="C:\Users\user\dev\react-pizza\src" />
 82 |       <recent name="C:\Users\user\dev\react-pizza" />
 83 |       <recent name="C:\Users\user\dev\react-pizza\src\redux\slices" />
 84 |       <recent name="C:\Users\user\dev\react-pizza\src\components\PizzaBlock" />
 85 |       <recent name="C:\Users\user\dev\react-pizza\src\assets" />
 86 |     </key>
 87 |   </component>
 88 |   <component name="RunManager" selected="npm.npm start">
 89 |     <configuration name="Debug Application" type="JavascriptDebugType" uri="http://localhost:3000">
 90 |       <method v="2" />
 91 |     </configuration>
 92 |     <configuration name="npm start" type="js.build_tools.npm">
 93 |       <package-json value="$PROJECT_DIR$/package.json" />
 94 |       <command value="run" />
 95 |       <scripts>
 96 |         <script value="start" />
 97 |       </scripts>
 98 |       <node-interpreter value="project" />
 99 |       <envs />
100 |       <method v="2" />
101 |     </configuration>
102 |   </component>
103 |   <component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
104 |   <component name="TaskManager">
105 |     <task active="true" id="Default" summary="Default task">
106 |       <changelist id="d5968668-764e-485f-8e2a-6882f8d39ee7" name="Changes" comment="" />
107 |       <created>1653410114388</created>
108 |       <option name="number" value="Default" />
109 |       <option name="presentableId" value="Default" />
110 |       <updated>1653410114388</updated>
111 |       <workItem from="1653410115717" duration="234000" />
112 |       <workItem from="1653410432117" duration="7804000" />
113 |       <workItem from="1653422989481" duration="5087000" />
114 |       <workItem from="1653459824017" duration="2875000" />
115 |       <workItem from="1653462945404" duration="14215000" />
116 |       <workItem from="1653478214035" duration="203000" />
117 |       <workItem from="1653482190046" duration="13000" />
118 |       <workItem from="1653650379363" duration="76000" />
119 |       <workItem from="1653670754933" duration="32000" />
120 |       <workItem from="1653999095711" duration="9000" />
121 |       <workItem from="1654027003574" duration="2952000" />
122 |       <workItem from="1654091356272" duration="373000" />
123 |       <workItem from="1654092401145" duration="758000" />
124 |       <workItem from="1654094585329" duration="2178000" />
125 |       <workItem from="1654113527959" duration="17000" />
126 |       <workItem from="1654375586079" duration="4567000" />
127 |       <workItem from="1654452770575" duration="4670000" />
128 |       <workItem from="1654457622763" duration="50000" />
129 |       <workItem from="1654467611186" duration="52000" />
130 |       <workItem from="1654467774966" duration="205000" />
131 |       <workItem from="1654467996353" duration="436000" />
132 |       <workItem from="1654522625025" duration="17000" />
133 |       <workItem from="1654535732668" duration="4174000" />
134 |       <workItem from="1654602389125" duration="5948000" />
135 |       <workItem from="1654636674106" duration="26000" />
136 |       <workItem from="1655465322510" duration="2514000" />
137 |       <workItem from="1655474469557" duration="84000" />
138 |       <workItem from="1655565956533" duration="5545000" />
139 |       <workItem from="1655725644069" duration="10000" />
140 |       <workItem from="1656761260277" duration="4351000" />
141 |       <workItem from="1656769140315" duration="3357000" />
142 |       <workItem from="1656776068302" duration="8107000" />
143 |       <workItem from="1656844063983" duration="5621000" />
144 |       <workItem from="1656859664110" duration="1260000" />
145 |     </task>
146 |     <task id="LOCAL-00001" summary="feat: pizza online store create">
147 |       <created>1653418426341</created>
148 |       <option name="number" value="00001" />
149 |       <option name="presentableId" value="LOCAL-00001" />
150 |       <option name="project" value="LOCAL" />
151 |       <updated>1653418426341</updated>
152 |     </task>
153 |     <task id="LOCAL-00002" summary="feat: switch categories">
154 |       <created>1653424054299</created>
155 |       <option name="number" value="00002" />
156 |       <option name="presentableId" value="LOCAL-00002" />
157 |       <option name="project" value="LOCAL" />
158 |       <updated>1653424054299</updated>
159 |     </task>
160 |     <task id="LOCAL-00003" summary="feat: switch pizza types">
161 |       <created>1653427638122</created>
162 |       <option name="number" value="00003" />
163 |       <option name="presentableId" value="LOCAL-00003" />
164 |       <option name="project" value="LOCAL" />
165 |       <updated>1653427638122</updated>
166 |     </task>
167 |     <task id="LOCAL-00004" summary="feat: readme">
168 |       <created>1653428100685</created>
169 |       <option name="number" value="00004" />
170 |       <option name="presentableId" value="LOCAL-00004" />
171 |       <option name="project" value="LOCAL" />
172 |       <updated>1653428100685</updated>
173 |     </task>
174 |     <task id="LOCAL-00005" summary="feat: popup sort create">
175 |       <created>1653462359983</created>
176 |       <option name="number" value="00005" />
177 |       <option name="presentableId" value="LOCAL-00005" />
178 |       <option name="project" value="LOCAL" />
179 |       <updated>1653462359983</updated>
180 |     </task>
181 |     <task id="LOCAL-00006" summary="fix: sort popup fix">
182 |       <created>1653462555362</created>
183 |       <option name="number" value="00006" />
184 |       <option name="presentableId" value="LOCAL-00006" />
185 |       <option name="project" value="LOCAL" />
186 |       <updated>1653462555362</updated>
187 |     </task>
188 |     <task id="LOCAL-00007" summary="feat: popup show selected list">
189 |       <created>1653462706767</created>
190 |       <option name="number" value="00007" />
191 |       <option name="presentableId" value="LOCAL-00007" />
192 |       <option name="project" value="LOCAL" />
193 |       <updated>1653462706767</updated>
194 |     </task>
195 |     <task id="LOCAL-00008" summary="feat: react router include">
196 |       <created>1653472791325</created>
197 |       <option name="number" value="00008" />
198 |       <option name="presentableId" value="LOCAL-00008" />
199 |       <option name="project" value="LOCAL" />
200 |       <updated>1653472791325</updated>
201 |     </task>
202 |     <task id="LOCAL-00009" summary="feat: adaptive and cart">
203 |       <created>1653477870897</created>
204 |       <option name="number" value="00009" />
205 |       <option name="presentableId" value="LOCAL-00009" />
206 |       <option name="project" value="LOCAL" />
207 |       <updated>1653477870897</updated>
208 |     </task>
209 |     <task id="LOCAL-00010" summary="feat: pizza search and sort">
210 |       <created>1654380177135</created>
211 |       <option name="number" value="00010" />
212 |       <option name="presentableId" value="LOCAL-00010" />
213 |       <option name="project" value="LOCAL" />
214 |       <updated>1654380177135</updated>
215 |     </task>
216 |     <task id="LOCAL-00011" summary="feat: paggination">
217 |       <created>1654457327431</created>
218 |       <option name="number" value="00011" />
219 |       <option name="presentableId" value="LOCAL-00011" />
220 |       <option name="project" value="LOCAL" />
221 |       <updated>1654457327431</updated>
222 |     </task>
223 |     <task id="LOCAL-00012" summary="feat: deploy">
224 |       <created>1654457567671</created>
225 |       <option name="number" value="00012" />
226 |       <option name="presentableId" value="LOCAL-00012" />
227 |       <option name="project" value="LOCAL" />
228 |       <updated>1654457567671</updated>
229 |     </task>
230 |     <task id="LOCAL-00013" summary="fix: deploy">
231 |       <created>1654467649444</created>
232 |       <option name="number" value="00013" />
233 |       <option name="presentableId" value="LOCAL-00013" />
234 |       <option name="project" value="LOCAL" />
235 |       <updated>1654467649444</updated>
236 |     </task>
237 |     <task id="LOCAL-00014" summary="feat: redux">
238 |       <created>1656762945715</created>
239 |       <option name="number" value="00014" />
240 |       <option name="presentableId" value="LOCAL-00014" />
241 |       <option name="project" value="LOCAL" />
242 |       <updated>1656762945715</updated>
243 |     </task>
244 |     <task id="LOCAL-00015" summary="fix: deploy">
245 |       <created>1656763716630</created>
246 |       <option name="number" value="00015" />
247 |       <option name="presentableId" value="LOCAL-00015" />
248 |       <option name="project" value="LOCAL" />
249 |       <updated>1656763716630</updated>
250 |     </task>
251 |     <task id="LOCAL-00016" summary="fix: deploy2">
252 |       <created>1656764148975</created>
253 |       <option name="number" value="00016" />
254 |       <option name="presentableId" value="LOCAL-00016" />
255 |       <option name="project" value="LOCAL" />
256 |       <updated>1656764148975</updated>
257 |     </task>
258 |     <task id="LOCAL-00017" summary="feat: almost all functional">
259 |       <created>1656848224026</created>
260 |       <option name="number" value="00017" />
261 |       <option name="presentableId" value="LOCAL-00017" />
262 |       <option name="project" value="LOCAL" />
263 |       <updated>1656848224026</updated>
264 |     </task>
265 |     <option name="localTasksCounter" value="18" />
266 |     <servers />
267 |   </component>
268 |   <component name="TypeScriptGeneratedFilesManager">
269 |     <option name="version" value="3" />
270 |     <option name="exactExcludedFiles">
271 |       <list>
272 |         <option value="$PROJECT_DIR$/src/components/Sort.jsx" />
273 |       </list>
274 |     </option>
275 |   </component>
276 |   <component name="Vcs.Log.Tabs.Properties">
277 |     <option name="TAB_STATES">
278 |       <map>
279 |         <entry key="MAIN">
280 |           <value>
281 |             <State />
282 |           </value>
283 |         </entry>
284 |       </map>
285 |     </option>
286 |     <option name="oldMeFiltersMigrated" value="true" />
287 |   </component>
288 |   <component name="VcsManagerConfiguration">
289 |     <option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
290 |     <MESSAGE value="feat: pizza online store create" />
291 |     <MESSAGE value="feat: switch categories" />
292 |     <MESSAGE value="feat: switch pizza types" />
293 |     <MESSAGE value="feat: readme" />
294 |     <MESSAGE value="feat: popup sort create" />
295 |     <MESSAGE value="fix: sort popup fix" />
296 |     <MESSAGE value="feat: popup show selected list" />
297 |     <MESSAGE value="feat: react router include" />
298 |     <MESSAGE value="feat: adaptive and cart" />
299 |     <MESSAGE value="feat: pizza search and sort" />
300 |     <MESSAGE value="feat: paggination" />
301 |     <MESSAGE value="feat: deploy" />
302 |     <MESSAGE value="feat: redux" />
303 |     <MESSAGE value="fix: deploy" />
304 |     <MESSAGE value="fix: deploy2" />
305 |     <MESSAGE value="feat: almost all functional" />
306 |     <option name="LAST_COMMIT_MESSAGE" value="feat: almost all functional" />
307 |   </component>
308 | </project>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 🍕 React Pizza  🍕
 2 | 
 3 | Веб приложение пиццерии с функцией выбора пиццы и заказа по аналогии DodoPizza
 4 | 
 5 | 
 6 | # 🛠 Технологии:
 7 | 
 8 | - **TypeScript**
 9 | - **ReactJS 18**
10 | - **React Hooks** (хуки)
11 | - **Redux Toolkit** (Хранение данных)
12 | - **Axios + fetch** (Отправка запроса на бэкенд)
13 | - **Prettier** (форматирование кода)
14 | - **Webpack**
15 | - **React Router v6**
16 | - React Content Loader (скелетон)
17 | - React Pagination (пагинация)
18 | - Lodash.Debounce
19 | - Code Splitting, React Loadable, useWhyDidYouUpdate
20 | - CSS-Modules / SCSS (стилизация)
21 | 
22 | 
23 | # Функционал:
24 | 
25 | - **Выбор теста пиццы**
26 | - **Выбор размера пиццы** 
27 | - **Выбор категории пиццы**
28 | - **Сортировка пиццы** 
29 | - **Поиск пиццы** 
30 | - **Добавление в корзину**
31 | - **Адаптивность до 320px**
32 | 
33 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-pizza-v2",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@reduxjs/toolkit": "^1.8.1",
 7 |     "@testing-library/jest-dom": "^5.16.4",
 8 |     "@testing-library/react": "^13.1.1",
 9 |     "@testing-library/user-event": "^13.5.0",
10 |     "@types/jest": "^27.5.0",
11 |     "@types/lodash.debounce": "^4.0.7",
12 |     "@types/node": "^17.0.31",
13 |     "@types/react": "^18.0.8",
14 |     "@types/react-dom": "^18.0.3",
15 |     "@types/react-loadable": "^5.5.6",
16 |     "ahooks": "^3.3.10",
17 |     "axios": "^0.27.2",
18 |     "clsx": "^1.1.1",
19 |     "lodash.debounce": "^4.0.8",
20 |     "qs": "^6.10.3",
21 |     "react": "^18.1.0",
22 |     "react-content-loader": "^6.2.0",
23 |     "react-dom": "^18.1.0",
24 |     "react-loadable": "^5.5.0",
25 |     "react-paginate": "^8.1.3",
26 |     "react-redux": "^8.0.1",
27 |     "react-router-dom": "^6.3.0",
28 |     "react-scripts": "5.0.1",
29 |     "sass": "^1.51.0",
30 |     "typescript": "^4.6.4",
31 |     "web-vitals": "^2.1.4"
32 |   },
33 |   "scripts": {
34 |     "start": "react-scripts start",
35 |     "build": "react-scripts build",
36 |     "test": "react-scripts test",
37 |     "eject": "react-scripts eject"
38 |   },
39 |   "eslintConfig": {
40 |     "extends": [
41 |       "react-app",
42 |       "react-app/jest"
43 |     ]
44 |   },
45 |   "browserslist": {
46 |     "production": [
47 |       ">0.2%",
48 |       "not dead",
49 |       "not op_mini all"
50 |     ],
51 |     "development": [
52 |       "last 1 chrome version",
53 |       "last 1 firefox version",
54 |       "last 1 safari version"
55 |     ]
56 |   }
57 | }
58 | 


--------------------------------------------------------------------------------
/public/arrow-top.svg:
--------------------------------------------------------------------------------
1 | <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M10 5C10 5.16927 9.93815 5.31576 9.81445 5.43945C9.69075 5.56315 9.54427 5.625 9.375 5.625H0.625C0.455729 5.625 0.309245 5.56315 0.185547 5.43945C0.061849 5.31576 0 5.16927 0 5C0 4.83073 0.061849 4.68424 0.185547 4.56055L4.56055 0.185547C4.68424 0.061849 4.83073 0 5 0C5.16927 0 5.31576 0.061849 5.43945 0.185547L9.81445 4.56055C9.93815 4.68424 10 4.83073 10 5Z" fill="#2C2C2C"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/public/cart.svg:
--------------------------------------------------------------------------------
1 | <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M6.33333 16.3333C7.06971 16.3333 7.66667 15.7364 7.66667 15C7.66667 14.2636 7.06971 13.6667 6.33333 13.6667C5.59695 13.6667 5 14.2636 5 15C5 15.7364 5.59695 16.3333 6.33333 16.3333Z" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
3 | <path d="M14.3333 16.3333C15.0697 16.3333 15.6667 15.7364 15.6667 15C15.6667 14.2636 15.0697 13.6667 14.3333 13.6667C13.597 13.6667 13 14.2636 13 15C13 15.7364 13.597 16.3333 14.3333 16.3333Z" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
4 | <path d="M4.78002 4.99999H16.3334L15.2134 10.5933C15.1524 10.9003 14.9854 11.176 14.7417 11.3722C14.4979 11.5684 14.1929 11.6727 13.88 11.6667H6.83335C6.50781 11.6694 6.1925 11.553 5.94689 11.3393C5.70128 11.1256 5.54233 10.8295 5.50002 10.5067L4.48669 2.82666C4.44466 2.50615 4.28764 2.21182 4.04482 1.99844C3.80201 1.78505 3.48994 1.66715 3.16669 1.66666H1.66669" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
5 | </svg>
6 | 


--------------------------------------------------------------------------------
/public/empty-cart.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dacorm/react-pizza/4897bf2844b55476cb682d0cdf4feccf3a2cad0b/public/empty-cart.png


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dacorm/react-pizza/4897bf2844b55476cb682d0cdf4feccf3a2cad0b/public/favicon.ico


--------------------------------------------------------------------------------
/public/grey-arrow-left.svg:
--------------------------------------------------------------------------------
1 | <svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M7 13L1 6.93015L6.86175 1" stroke="#D3D3D3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
3 | </svg>
4 | 


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


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dacorm/react-pizza/4897bf2844b55476cb682d0cdf4feccf3a2cad0b/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dacorm/react-pizza/4897bf2844b55476cb682d0cdf4feccf3a2cad0b/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/pizza-logo.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" ?><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:#8a490e;}.cls-2{fill:#a16d3e;}.cls-3{fill:#f6b361;}.cls-4{fill:#f8c281;}.cls-5{fill:#ffff97;}.cls-6{fill:#ffffac;}.cls-7{fill:red;}.cls-8{fill:#d39953;}</style></defs><title/><g id="Layer_25"><path class="cls-1" d="M32,53A43.539,43.539,0,0,1,5.615,44.16L1.288,51.239a1.983,1.983,0,0,0,.627,2.693,54.441,54.441,0,0,0,60.17,0,1.983,1.983,0,0,0,.627-2.693L58.385,44.16A43.539,43.539,0,0,1,32,53Z"/><path class="cls-2" d="M62.712,51.239,58.385,44.16c-.681.516-1.382,1.006-2.094,1.483l3.421,5.6a1.983,1.983,0,0,1-.627,2.693A53.965,53.965,0,0,1,30.5,62.972c.5.013,1,.028,1.5.028a54.008,54.008,0,0,0,30.085-9.068A1.983,1.983,0,0,0,62.712,51.239Z"/><path class="cls-3" d="M58.385,44.16a43.8,43.8,0,0,1-52.77,0L26.206,10.48,32,1l5.794,9.48Z"/><path class="cls-4" d="M37.794,10.48,32,1,30.5,3.454l4.294,7.026L55.385,44.16A43.523,43.523,0,0,1,30.5,52.969c.5.017,1,.031,1.5.031a43.547,43.547,0,0,0,26.385-8.84Z"/><path class="cls-5" d="M37.65,10.48A6.88,6.88,0,0,1,35,11a6.986,6.986,0,0,1-3-.68A6.986,6.986,0,0,1,29,11a6.88,6.88,0,0,1-2.65-.52L32,1Z"/><path class="cls-6" d="M32,1,30.5,3.517l4.15,6.963a6.757,6.757,0,0,1-1.143.353,6.92,6.92,0,0,0,4.143-.353Z"/><path d="M63.565,50.718l-4.327-7.079L32.867.5,32.859.488h0L32.854.479a.792.792,0,0,0-.111-.132c-.017-.019-.03-.042-.048-.059a1.075,1.075,0,0,0-1.39,0c-.019.018-.033.042-.051.062a.849.849,0,0,0-.108.129l-.005.008h0L31.133.5,4.762,43.639.435,50.718a2.989,2.989,0,0,0,.924,4.046,55.445,55.445,0,0,0,61.282,0A2.989,2.989,0,0,0,63.565,50.718ZM56.7,44.15c-.224.159-.448.316-.674.47q-.366.251-.737.492c-.232.151-.465.3-.7.447s-.495.306-.745.455-.478.284-.719.421-.5.282-.755.42-.489.265-.735.392-.513.261-.771.388-.5.245-.747.362-.521.239-.782.355-.508.226-.764.333-.529.217-.8.322-.512.2-.77.3-.544.2-.817.292-.516.182-.775.268c-.276.09-.554.175-.832.26-.26.079-.52.161-.781.235-.284.081-.569.155-.855.229-.259.068-.518.139-.778.2-.292.071-.587.133-.88.2-.258.057-.515.116-.774.168-.3.061-.609.113-.914.167-.252.045-.5.093-.756.134-.318.05-.638.091-.958.135-.244.033-.486.07-.731.1-.336.04-.674.07-1.012.1-.231.022-.461.049-.693.067-.375.03-.754.048-1.131.068-.2.01-.391.026-.587.034Q32.869,52,32,52t-1.731-.034c-.2-.008-.391-.024-.587-.034-.377-.02-.756-.038-1.131-.068-.232-.018-.462-.045-.693-.067-.338-.032-.676-.062-1.012-.1-.245-.029-.488-.066-.732-.1-.319-.044-.639-.085-.957-.135-.253-.041-.5-.089-.757-.134-.3-.054-.61-.106-.913-.167-.259-.052-.516-.111-.774-.168-.293-.065-.588-.127-.88-.2-.26-.063-.519-.134-.778-.2-.286-.074-.571-.148-.855-.229-.261-.074-.521-.156-.781-.235-.278-.085-.556-.17-.832-.26-.259-.086-.517-.178-.775-.268-.273-.1-.546-.191-.817-.292s-.514-.2-.77-.3-.531-.211-.8-.322-.51-.22-.764-.333-.523-.233-.782-.355-.5-.239-.748-.362-.514-.255-.769-.387-.492-.26-.736-.393-.505-.277-.755-.42-.48-.279-.719-.421-.5-.3-.745-.455-.467-.3-.7-.447-.493-.325-.737-.492c-.226-.154-.45-.311-.674-.47-.118-.084-.235-.17-.352-.256L26.661,11.651A8.039,8.039,0,0,0,32,11.412a7.985,7.985,0,0,0,5.339.24L57.05,43.894C56.933,43.98,56.816,44.066,56.7,44.15ZM36.137,9.894a6.07,6.07,0,0,1-3.709-.478,1,1,0,0,0-.856,0,6.073,6.073,0,0,1-3.709.478L32,2.953ZM61.529,53.1a53.442,53.442,0,0,1-59.058,0,.981.981,0,0,1-.329-1.34L5.9,45.614c.105.075.213.145.318.219.222.158.446.312.671.465q.4.275.811.541c.228.148.458.293.688.437q.411.256.824.5.352.208.706.411c.279.159.558.314.84.466q.358.2.72.383.423.219.851.428c.245.121.491.24.738.355.287.135.575.264.865.392.249.11.5.22.749.325.292.123.585.24.879.356.253.1.507.2.762.3.3.11.594.215.893.319.256.09.512.18.771.265.3.1.6.191.909.284.259.079.517.159.778.233.308.088.618.168.929.249.259.068.517.138.777.2.316.076.633.144.951.214.26.056.518.116.779.168.324.065.651.121.976.178.257.046.512.094.769.135.337.054.676.1,1.014.143.251.034.5.073.752.1.356.043.715.074,1.074.108.235.022.469.049.7.068.4.031.8.051,1.2.072.2.01.4.026.6.034Q31.093,54,32,54t1.807-.036c.2-.008.4-.024.595-.034.4-.021.8-.041,1.2-.072.235-.018.469-.046.7-.068.359-.034.718-.065,1.075-.108.252-.029.5-.068.752-.1.338-.045.677-.089,1.014-.143.257-.041.512-.089.769-.135.325-.057.652-.113.976-.178.261-.052.519-.112.779-.168.318-.07.635-.138.951-.214.26-.063.518-.133.777-.2.311-.081.621-.161.929-.249.261-.074.519-.154.778-.233.3-.093.608-.185.909-.284.259-.085.515-.175.771-.265.3-.1.6-.209.893-.319.255-.1.508-.2.761-.3.295-.117.588-.234.88-.357.251-.105.5-.214.749-.324.289-.129.578-.258.865-.393.247-.115.493-.234.738-.355q.427-.21.851-.428.361-.187.72-.383c.282-.152.561-.307.84-.466q.354-.2.706-.411.414-.246.824-.5c.23-.144.46-.289.688-.437q.408-.266.811-.541c.225-.153.449-.307.671-.465.105-.074.213-.144.318-.219l3.756,6.147A.981.981,0,0,1,61.529,53.1Z"/><circle class="cls-7" cx="32" cy="20" r="3"/><path d="M32,24a4,4,0,1,1,4-4A4,4,0,0,1,32,24Zm0-6a2,2,0,1,0,2,2A2,2,0,0,0,32,18Z"/><circle class="cls-7" cx="18" cy="41" r="3"/><path d="M18,45a4,4,0,1,1,4-4A4,4,0,0,1,18,45Zm0-6a2,2,0,1,0,2,2A2,2,0,0,0,18,39Z"/><circle class="cls-7" cx="46" cy="41" r="3"/><path d="M46,45a4,4,0,1,1,4-4A4,4,0,0,1,46,45Zm0-6a2,2,0,1,0,2,2A2,2,0,0,0,46,39Z"/><circle class="cls-7" cx="32" cy="44" r="3"/><path d="M32,48a4,4,0,1,1,4-4A4,4,0,0,1,32,48Zm0-6a2,2,0,1,0,2,2A2,2,0,0,0,32,42Z"/><circle class="cls-7" cx="24" cy="30" r="3"/><path d="M24,34a4,4,0,1,1,4-4A4,4,0,0,1,24,34Zm0-6a2,2,0,1,0,2,2A2,2,0,0,0,24,28Z"/><circle class="cls-7" cx="40" cy="30" r="3"/><path d="M40,34a4,4,0,1,1,4-4A4,4,0,0,1,40,34Zm0-6a2,2,0,1,0,2,2A2,2,0,0,0,40,28Z"/><path class="cls-8" d="M27,38H25a1,1,0,0,1,0-2h2a1,1,0,0,1,0,2Z"/><path class="cls-8" d="M39,38H37a1,1,0,0,1,0-2h2a1,1,0,0,1,0,2Z"/><path class="cls-8" d="M33,30H31a1,1,0,0,1,0-2h2a1,1,0,0,1,0,2Z"/><path class="cls-8" d="M25,24H23a1,1,0,0,1,0-2h2a1,1,0,0,1,0,2Z"/><path class="cls-8" d="M41,24H39a1,1,0,0,1,0-2h2a1,1,0,0,1,0,2Z"/></g></svg>


--------------------------------------------------------------------------------
/public/plus.svg:
--------------------------------------------------------------------------------
1 | <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M5.92001 3.84V5.76V8.64C5.92001 9.17016 5.49017 9.6 4.96001 9.6C4.42985 9.6 4.00001 9.17016 4.00001 8.64L4 5.76L4.00001 3.84V0.96C4.00001 0.42984 4.42985 0 4.96001 0C5.49017 0 5.92001 0.42984 5.92001 0.96V3.84Z" fill="#EB5A1E"/>
3 | <path d="M5.75998 5.92001L3.83998 5.92001L0.959977 5.92001C0.429817 5.92001 -2.29533e-05 5.49017 -2.29301e-05 4.96001C-2.2907e-05 4.42985 0.429817 4.00001 0.959977 4.00001L3.83998 4L5.75998 4.00001L8.63998 4.00001C9.17014 4.00001 9.59998 4.42985 9.59998 4.96001C9.59998 5.49017 9.17014 5.92001 8.63998 5.92001L5.75998 5.92001Z" fill="#EB5A1E"/>
4 | </svg>
5 | 


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


--------------------------------------------------------------------------------
/public/trash.svg:
--------------------------------------------------------------------------------
1 | <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M2.5 5H4.16667H17.5" stroke="#B6B6B6" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
3 | <path d="M6.66663 5.00001V3.33334C6.66663 2.89131 6.84222 2.46739 7.15478 2.15483C7.46734 1.84227 7.89127 1.66667 8.33329 1.66667H11.6666C12.1087 1.66667 12.5326 1.84227 12.8451 2.15483C13.1577 2.46739 13.3333 2.89131 13.3333 3.33334V5.00001M15.8333 5.00001V16.6667C15.8333 17.1087 15.6577 17.5326 15.3451 17.8452C15.0326 18.1577 14.6087 18.3333 14.1666 18.3333H5.83329C5.39127 18.3333 4.96734 18.1577 4.65478 17.8452C4.34222 17.5326 4.16663 17.1087 4.16663 16.6667V5.00001H15.8333Z" stroke="#B6B6B6" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
4 | <path d="M8.33337 9.16667V14.1667" stroke="#B6B6B6" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
5 | <path d="M11.6666 9.16667V14.1667" stroke="#B6B6B6" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
6 | </svg>
7 | 


--------------------------------------------------------------------------------
/src/@types/assets.d.ts:
--------------------------------------------------------------------------------
 1 | declare module '*.svg' {
 2 |   const content: any;
 3 |   export default content;
 4 | }
 5 | 
 6 | declare module '*.png' {
 7 |   const content: any;
 8 |   export default content;
 9 | }
10 | 
11 | declare module '*.scss' {
12 |   const content: any;
13 |   export default content;
14 | }
15 | 


--------------------------------------------------------------------------------
/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-spin infinite 20s linear;
13 |   }
14 | }
15 | 
16 | .App-header {
17 |   background-color: #282c34;
18 |   min-height: 100vh;
19 |   display: flex;
20 |   flex-direction: column;
21 |   align-items: center;
22 |   justify-content: center;
23 |   font-size: calc(10px + 2vmin);
24 |   color: white;
25 | }
26 | 
27 | .App-link {
28 |   color: #61dafb;
29 | }
30 | 
31 | @keyframes App-logo-spin {
32 |   from {
33 |     transform: rotate(0deg);
34 |   }
35 |   to {
36 |     transform: rotate(360deg);
37 |   }
38 | }
39 | 


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


--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
 1 | import Loadable from 'react-loadable';
 2 | import React, { Suspense } from 'react';
 3 | import { Routes, Route } from 'react-router-dom';
 4 | 
 5 | import Home from './pages/Home';
 6 | 
 7 | import './scss/app.scss';
 8 | import MainLayout from './layouts/MainLayout';
 9 | 
10 | const Cart = Loadable({
11 |     loader: () => import(/* webpackChunkName: "Cart" */ './pages/Cart'),
12 |     loading: () => <div>Идёт загрузка корзины...</div>,
13 | });
14 | 
15 | const FullPizza = React.lazy(() => import(/* webpackChunkName: "FullPizza" */ './pages/FullPizza'));
16 | const NotFound = React.lazy(() => import(/* webpackChunkName: "NotFound" */ './pages/NotFound'));
17 | 
18 | function App() {
19 |     return (
20 |         <Routes>
21 |             <Route path="/" element={<MainLayout />}>
22 |                 <Route path="" element={<Home />} />
23 |                 <Route
24 |                     path="cart"
25 |                     element={
26 |                         <Suspense fallback={<div>Идёт загрузка корзины...</div>}>
27 |                             <Cart />
28 |                         </Suspense>
29 |                     }
30 |                 />
31 |                 <Route
32 |                     path="pizza/:id"
33 |                     element={
34 |                         <Suspense fallback={<div>Идёт загрузка...</div>}>
35 |                             <FullPizza />
36 |                         </Suspense>
37 |                     }
38 |                 />
39 |                 <Route
40 |                     path="*"
41 |                     element={
42 |                         <Suspense fallback={<div>Идёт загрузка...</div>}>
43 |                             <NotFound />
44 |                         </Suspense>
45 |                     }
46 |                 />
47 |             </Route>
48 |         </Routes>
49 |     );
50 | }
51 | 
52 | export default App;


--------------------------------------------------------------------------------
/src/assets/img/arrow-top.svg:
--------------------------------------------------------------------------------
1 | <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M10 5C10 5.16927 9.93815 5.31576 9.81445 5.43945C9.69075 5.56315 9.54427 5.625 9.375 5.625H0.625C0.455729 5.625 0.309245 5.56315 0.185547 5.43945C0.061849 5.31576 0 5.16927 0 5C0 4.83073 0.061849 4.68424 0.185547 4.56055L4.56055 0.185547C4.68424 0.061849 4.83073 0 5 0C5.16927 0 5.31576 0.061849 5.43945 0.185547L9.81445 4.56055C9.93815 4.68424 10 4.83073 10 5Z" fill="#2C2C2C"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/src/assets/img/cart.svg:
--------------------------------------------------------------------------------
1 | <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M6.33333 16.3333C7.06971 16.3333 7.66667 15.7364 7.66667 15C7.66667 14.2636 7.06971 13.6667 6.33333 13.6667C5.59695 13.6667 5 14.2636 5 15C5 15.7364 5.59695 16.3333 6.33333 16.3333Z" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
3 | <path d="M14.3333 16.3333C15.0697 16.3333 15.6667 15.7364 15.6667 15C15.6667 14.2636 15.0697 13.6667 14.3333 13.6667C13.597 13.6667 13 14.2636 13 15C13 15.7364 13.597 16.3333 14.3333 16.3333Z" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
4 | <path d="M4.78002 4.99999H16.3334L15.2134 10.5933C15.1524 10.9003 14.9854 11.176 14.7417 11.3722C14.4979 11.5684 14.1929 11.6727 13.88 11.6667H6.83335C6.50781 11.6694 6.1925 11.553 5.94689 11.3393C5.70128 11.1256 5.54233 10.8295 5.50002 10.5067L4.48669 2.82666C4.44466 2.50615 4.28764 2.21182 4.04482 1.99844C3.80201 1.78505 3.48994 1.66715 3.16669 1.66666H1.66669" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
5 | </svg>
6 | 


--------------------------------------------------------------------------------
/src/assets/img/empty-cart.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dacorm/react-pizza/4897bf2844b55476cb682d0cdf4feccf3a2cad0b/src/assets/img/empty-cart.png


--------------------------------------------------------------------------------
/src/assets/img/grey-arrow-left.svg:
--------------------------------------------------------------------------------
1 | <svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M7 13L1 6.93015L6.86175 1" stroke="#D3D3D3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/src/assets/img/pizza-logo.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" ?><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:#8a490e;}.cls-2{fill:#a16d3e;}.cls-3{fill:#f6b361;}.cls-4{fill:#f8c281;}.cls-5{fill:#ffff97;}.cls-6{fill:#ffffac;}.cls-7{fill:red;}.cls-8{fill:#d39953;}</style></defs><title/><g id="Layer_25"><path class="cls-1" d="M32,53A43.539,43.539,0,0,1,5.615,44.16L1.288,51.239a1.983,1.983,0,0,0,.627,2.693,54.441,54.441,0,0,0,60.17,0,1.983,1.983,0,0,0,.627-2.693L58.385,44.16A43.539,43.539,0,0,1,32,53Z"/><path class="cls-2" d="M62.712,51.239,58.385,44.16c-.681.516-1.382,1.006-2.094,1.483l3.421,5.6a1.983,1.983,0,0,1-.627,2.693A53.965,53.965,0,0,1,30.5,62.972c.5.013,1,.028,1.5.028a54.008,54.008,0,0,0,30.085-9.068A1.983,1.983,0,0,0,62.712,51.239Z"/><path class="cls-3" d="M58.385,44.16a43.8,43.8,0,0,1-52.77,0L26.206,10.48,32,1l5.794,9.48Z"/><path class="cls-4" d="M37.794,10.48,32,1,30.5,3.454l4.294,7.026L55.385,44.16A43.523,43.523,0,0,1,30.5,52.969c.5.017,1,.031,1.5.031a43.547,43.547,0,0,0,26.385-8.84Z"/><path class="cls-5" d="M37.65,10.48A6.88,6.88,0,0,1,35,11a6.986,6.986,0,0,1-3-.68A6.986,6.986,0,0,1,29,11a6.88,6.88,0,0,1-2.65-.52L32,1Z"/><path class="cls-6" d="M32,1,30.5,3.517l4.15,6.963a6.757,6.757,0,0,1-1.143.353,6.92,6.92,0,0,0,4.143-.353Z"/><path d="M63.565,50.718l-4.327-7.079L32.867.5,32.859.488h0L32.854.479a.792.792,0,0,0-.111-.132c-.017-.019-.03-.042-.048-.059a1.075,1.075,0,0,0-1.39,0c-.019.018-.033.042-.051.062a.849.849,0,0,0-.108.129l-.005.008h0L31.133.5,4.762,43.639.435,50.718a2.989,2.989,0,0,0,.924,4.046,55.445,55.445,0,0,0,61.282,0A2.989,2.989,0,0,0,63.565,50.718ZM56.7,44.15c-.224.159-.448.316-.674.47q-.366.251-.737.492c-.232.151-.465.3-.7.447s-.495.306-.745.455-.478.284-.719.421-.5.282-.755.42-.489.265-.735.392-.513.261-.771.388-.5.245-.747.362-.521.239-.782.355-.508.226-.764.333-.529.217-.8.322-.512.2-.77.3-.544.2-.817.292-.516.182-.775.268c-.276.09-.554.175-.832.26-.26.079-.52.161-.781.235-.284.081-.569.155-.855.229-.259.068-.518.139-.778.2-.292.071-.587.133-.88.2-.258.057-.515.116-.774.168-.3.061-.609.113-.914.167-.252.045-.5.093-.756.134-.318.05-.638.091-.958.135-.244.033-.486.07-.731.1-.336.04-.674.07-1.012.1-.231.022-.461.049-.693.067-.375.03-.754.048-1.131.068-.2.01-.391.026-.587.034Q32.869,52,32,52t-1.731-.034c-.2-.008-.391-.024-.587-.034-.377-.02-.756-.038-1.131-.068-.232-.018-.462-.045-.693-.067-.338-.032-.676-.062-1.012-.1-.245-.029-.488-.066-.732-.1-.319-.044-.639-.085-.957-.135-.253-.041-.5-.089-.757-.134-.3-.054-.61-.106-.913-.167-.259-.052-.516-.111-.774-.168-.293-.065-.588-.127-.88-.2-.26-.063-.519-.134-.778-.2-.286-.074-.571-.148-.855-.229-.261-.074-.521-.156-.781-.235-.278-.085-.556-.17-.832-.26-.259-.086-.517-.178-.775-.268-.273-.1-.546-.191-.817-.292s-.514-.2-.77-.3-.531-.211-.8-.322-.51-.22-.764-.333-.523-.233-.782-.355-.5-.239-.748-.362-.514-.255-.769-.387-.492-.26-.736-.393-.505-.277-.755-.42-.48-.279-.719-.421-.5-.3-.745-.455-.467-.3-.7-.447-.493-.325-.737-.492c-.226-.154-.45-.311-.674-.47-.118-.084-.235-.17-.352-.256L26.661,11.651A8.039,8.039,0,0,0,32,11.412a7.985,7.985,0,0,0,5.339.24L57.05,43.894C56.933,43.98,56.816,44.066,56.7,44.15ZM36.137,9.894a6.07,6.07,0,0,1-3.709-.478,1,1,0,0,0-.856,0,6.073,6.073,0,0,1-3.709.478L32,2.953ZM61.529,53.1a53.442,53.442,0,0,1-59.058,0,.981.981,0,0,1-.329-1.34L5.9,45.614c.105.075.213.145.318.219.222.158.446.312.671.465q.4.275.811.541c.228.148.458.293.688.437q.411.256.824.5.352.208.706.411c.279.159.558.314.84.466q.358.2.72.383.423.219.851.428c.245.121.491.24.738.355.287.135.575.264.865.392.249.11.5.22.749.325.292.123.585.24.879.356.253.1.507.2.762.3.3.11.594.215.893.319.256.09.512.18.771.265.3.1.6.191.909.284.259.079.517.159.778.233.308.088.618.168.929.249.259.068.517.138.777.2.316.076.633.144.951.214.26.056.518.116.779.168.324.065.651.121.976.178.257.046.512.094.769.135.337.054.676.1,1.014.143.251.034.5.073.752.1.356.043.715.074,1.074.108.235.022.469.049.7.068.4.031.8.051,1.2.072.2.01.4.026.6.034Q31.093,54,32,54t1.807-.036c.2-.008.4-.024.595-.034.4-.021.8-.041,1.2-.072.235-.018.469-.046.7-.068.359-.034.718-.065,1.075-.108.252-.029.5-.068.752-.1.338-.045.677-.089,1.014-.143.257-.041.512-.089.769-.135.325-.057.652-.113.976-.178.261-.052.519-.112.779-.168.318-.07.635-.138.951-.214.26-.063.518-.133.777-.2.311-.081.621-.161.929-.249.261-.074.519-.154.778-.233.3-.093.608-.185.909-.284.259-.085.515-.175.771-.265.3-.1.6-.209.893-.319.255-.1.508-.2.761-.3.295-.117.588-.234.88-.357.251-.105.5-.214.749-.324.289-.129.578-.258.865-.393.247-.115.493-.234.738-.355q.427-.21.851-.428.361-.187.72-.383c.282-.152.561-.307.84-.466q.354-.2.706-.411.414-.246.824-.5c.23-.144.46-.289.688-.437q.408-.266.811-.541c.225-.153.449-.307.671-.465.105-.074.213-.144.318-.219l3.756,6.147A.981.981,0,0,1,61.529,53.1Z"/><circle class="cls-7" cx="32" cy="20" r="3"/><path d="M32,24a4,4,0,1,1,4-4A4,4,0,0,1,32,24Zm0-6a2,2,0,1,0,2,2A2,2,0,0,0,32,18Z"/><circle class="cls-7" cx="18" cy="41" r="3"/><path d="M18,45a4,4,0,1,1,4-4A4,4,0,0,1,18,45Zm0-6a2,2,0,1,0,2,2A2,2,0,0,0,18,39Z"/><circle class="cls-7" cx="46" cy="41" r="3"/><path d="M46,45a4,4,0,1,1,4-4A4,4,0,0,1,46,45Zm0-6a2,2,0,1,0,2,2A2,2,0,0,0,46,39Z"/><circle class="cls-7" cx="32" cy="44" r="3"/><path d="M32,48a4,4,0,1,1,4-4A4,4,0,0,1,32,48Zm0-6a2,2,0,1,0,2,2A2,2,0,0,0,32,42Z"/><circle class="cls-7" cx="24" cy="30" r="3"/><path d="M24,34a4,4,0,1,1,4-4A4,4,0,0,1,24,34Zm0-6a2,2,0,1,0,2,2A2,2,0,0,0,24,28Z"/><circle class="cls-7" cx="40" cy="30" r="3"/><path d="M40,34a4,4,0,1,1,4-4A4,4,0,0,1,40,34Zm0-6a2,2,0,1,0,2,2A2,2,0,0,0,40,28Z"/><path class="cls-8" d="M27,38H25a1,1,0,0,1,0-2h2a1,1,0,0,1,0,2Z"/><path class="cls-8" d="M39,38H37a1,1,0,0,1,0-2h2a1,1,0,0,1,0,2Z"/><path class="cls-8" d="M33,30H31a1,1,0,0,1,0-2h2a1,1,0,0,1,0,2Z"/><path class="cls-8" d="M25,24H23a1,1,0,0,1,0-2h2a1,1,0,0,1,0,2Z"/><path class="cls-8" d="M41,24H39a1,1,0,0,1,0-2h2a1,1,0,0,1,0,2Z"/></g></svg>


--------------------------------------------------------------------------------
/src/assets/img/plus.svg:
--------------------------------------------------------------------------------
1 | <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M5.92001 3.84V5.76V8.64C5.92001 9.17016 5.49017 9.6 4.96001 9.6C4.42985 9.6 4.00001 9.17016 4.00001 8.64L4 5.76L4.00001 3.84V0.96C4.00001 0.42984 4.42985 0 4.96001 0C5.49017 0 5.92001 0.42984 5.92001 0.96V3.84Z" fill="#EB5A1E"/>
3 | <path d="M5.75998 5.92001L3.83998 5.92001L0.959977 5.92001C0.429817 5.92001 -2.29533e-05 5.49017 -2.29301e-05 4.96001C-2.2907e-05 4.42985 0.429817 4.00001 0.959977 4.00001L3.83998 4L5.75998 4.00001L8.63998 4.00001C9.17014 4.00001 9.59998 4.42985 9.59998 4.96001C9.59998 5.49017 9.17014 5.92001 8.63998 5.92001L5.75998 5.92001Z" fill="#EB5A1E"/>
4 | </svg>
5 | 


--------------------------------------------------------------------------------
/src/assets/img/trash.svg:
--------------------------------------------------------------------------------
1 | <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M2.5 5H4.16667H17.5" stroke="#B6B6B6" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
3 | <path d="M6.66663 5.00001V3.33334C6.66663 2.89131 6.84222 2.46739 7.15478 2.15483C7.46734 1.84227 7.89127 1.66667 8.33329 1.66667H11.6666C12.1087 1.66667 12.5326 1.84227 12.8451 2.15483C13.1577 2.46739 13.3333 2.89131 13.3333 3.33334V5.00001M15.8333 5.00001V16.6667C15.8333 17.1087 15.6577 17.5326 15.3451 17.8452C15.0326 18.1577 14.6087 18.3333 14.1666 18.3333H5.83329C5.39127 18.3333 4.96734 18.1577 4.65478 17.8452C4.34222 17.5326 4.16663 17.1087 4.16663 16.6667V5.00001H15.8333Z" stroke="#B6B6B6" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
4 | <path d="M8.33337 9.16667V14.1667" stroke="#B6B6B6" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
5 | <path d="M11.6666 9.16667V14.1667" stroke="#B6B6B6" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
6 | </svg>
7 | 


--------------------------------------------------------------------------------
/src/components/CartEmpty.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Link } from 'react-router-dom';
 3 | 
 4 | import cartEmptyImg from '../assets/img/empty-cart.png';
 5 | 
 6 | export const CartEmpty: React.FC = () => (
 7 |     <div className="cart cart--empty">
 8 |         <h2>
 9 |             Корзина пустая <span>😕</span>
10 |         </h2>
11 |         <p>
12 |             Вероятней всего, вы не заказывали ещё пиццу.
13 |             <br />
14 |             Для того, чтобы заказать пиццу, перейди на главную страницу.
15 |         </p>
16 |         <img src={cartEmptyImg} alt="Empty cart" />
17 |         <Link to="/" className="button button--black">
18 |             <span>Вернуться назад</span>
19 |         </Link>
20 |     </div>
21 | );


--------------------------------------------------------------------------------
/src/components/CartItem.tsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { useDispatch } from 'react-redux';
  3 | import { addItem, minusItem, removeItem } from '../redux/cart/slice';
  4 | import { CartItem as CartItemType } from '../redux/cart/types';
  5 | 
  6 | type CartItemProps = {
  7 |   id: string;
  8 |   title: string;
  9 |   type: string;
 10 |   size: number;
 11 |   price: number;
 12 |   count: number;
 13 |   imageUrl: string;
 14 | };
 15 | 
 16 | export const CartItem: React.FC<CartItemProps> = ({
 17 |                                                     id,
 18 |                                                     title,
 19 |                                                     type,
 20 |                                                     size,
 21 |                                                     price,
 22 |                                                     count,
 23 |                                                     imageUrl,
 24 |                                                   }) => {
 25 |   const dispatch = useDispatch();
 26 | 
 27 |   const onClickPlus = () => {
 28 |     dispatch(
 29 |         addItem({
 30 |           id,
 31 |         } as CartItemType),
 32 |     );
 33 |   };
 34 | 
 35 |   const onClickMinus = () => {
 36 |     dispatch(minusItem(id));
 37 |   };
 38 | 
 39 |   const onClickRemove = () => {
 40 |     if (window.confirm('Ты действительно хочешь удалить товар?')) {
 41 |       dispatch(removeItem(id));
 42 |     }
 43 |   };
 44 | 
 45 |   return (
 46 |       <div className="cart__item">
 47 |         <div className="cart__item-img">
 48 |           <img className="pizza-block__image" src={imageUrl} alt="Pizza" />
 49 |         </div>
 50 |         <div className="cart__item-info">
 51 |           <h3>{title}</h3>
 52 |           <p>
 53 |             {type}, {size} см.
 54 |           </p>
 55 |         </div>
 56 |         <div className="cart__item-count">
 57 |           <button
 58 |               disabled={count === 1}
 59 |               onClick={onClickMinus}
 60 |               className="button button--outline button--circle cart__item-count-minus">
 61 |             <svg
 62 |                 width="10"
 63 |                 height="10"
 64 |                 viewBox="0 0 10 10"
 65 |                 fill="none"
 66 |                 xmlns="http://www.w3.org/2000/svg">
 67 |               <path
 68 |                   d="M5.92001 3.84V5.76V8.64C5.92001 9.17016 5.49017 9.6 4.96001 9.6C4.42985 9.6 4.00001 9.17016 4.00001 8.64L4 5.76L4.00001 3.84V0.96C4.00001 0.42984 4.42985 0 4.96001 0C5.49017 0 5.92001 0.42984 5.92001 0.96V3.84Z"
 69 |                   fill="#EB5A1E"></path>
 70 |               <path
 71 |                   d="M5.75998 5.92001L3.83998 5.92001L0.959977 5.92001C0.429817 5.92001 -2.29533e-05 5.49017 -2.29301e-05 4.96001C-2.2907e-05 4.42985 0.429817 4.00001 0.959977 4.00001L3.83998 4L5.75998 4.00001L8.63998 4.00001C9.17014 4.00001 9.59998 4.42985 9.59998 4.96001C9.59998 5.49017 9.17014 5.92001 8.63998 5.92001L5.75998 5.92001Z"
 72 |                   fill="#EB5A1E"></path>
 73 |             </svg>
 74 |           </button>
 75 |           <b>{count}</b>
 76 |           <button
 77 |               onClick={onClickPlus}
 78 |               className="button button--outline button--circle cart__item-count-plus">
 79 |             <svg
 80 |                 width="10"
 81 |                 height="10"
 82 |                 viewBox="0 0 10 10"
 83 |                 fill="none"
 84 |                 xmlns="http://www.w3.org/2000/svg">
 85 |               <path
 86 |                   d="M5.92001 3.84V5.76V8.64C5.92001 9.17016 5.49017 9.6 4.96001 9.6C4.42985 9.6 4.00001 9.17016 4.00001 8.64L4 5.76L4.00001 3.84V0.96C4.00001 0.42984 4.42985 0 4.96001 0C5.49017 0 5.92001 0.42984 5.92001 0.96V3.84Z"
 87 |                   fill="#EB5A1E"></path>
 88 |               <path
 89 |                   d="M5.75998 5.92001L3.83998 5.92001L0.959977 5.92001C0.429817 5.92001 -2.29533e-05 5.49017 -2.29301e-05 4.96001C-2.2907e-05 4.42985 0.429817 4.00001 0.959977 4.00001L3.83998 4L5.75998 4.00001L8.63998 4.00001C9.17014 4.00001 9.59998 4.42985 9.59998 4.96001C9.59998 5.49017 9.17014 5.92001 8.63998 5.92001L5.75998 5.92001Z"
 90 |                   fill="#EB5A1E"></path>
 91 |             </svg>
 92 |           </button>
 93 |         </div>
 94 |         <div className="cart__item-price">
 95 |           <b>{price * count} ₽</b>
 96 |         </div>
 97 |         <div className="cart__item-remove">
 98 |           <div onClick={onClickRemove} className="button button--outline button--circle">
 99 |             <svg
100 |                 width="10"
101 |                 height="10"
102 |                 viewBox="0 0 10 10"
103 |                 fill="none"
104 |                 xmlns="http://www.w3.org/2000/svg">
105 |               <path
106 |                   d="M5.92001 3.84V5.76V8.64C5.92001 9.17016 5.49017 9.6 4.96001 9.6C4.42985 9.6 4.00001 9.17016 4.00001 8.64L4 5.76L4.00001 3.84V0.96C4.00001 0.42984 4.42985 0 4.96001 0C5.49017 0 5.92001 0.42984 5.92001 0.96V3.84Z"
107 |                   fill="#EB5A1E"></path>
108 |               <path
109 |                   d="M5.75998 5.92001L3.83998 5.92001L0.959977 5.92001C0.429817 5.92001 -2.29533e-05 5.49017 -2.29301e-05 4.96001C-2.2907e-05 4.42985 0.429817 4.00001 0.959977 4.00001L3.83998 4L5.75998 4.00001L8.63998 4.00001C9.17014 4.00001 9.59998 4.42985 9.59998 4.96001C9.59998 5.49017 9.17014 5.92001 8.63998 5.92001L5.75998 5.92001Z"
110 |                   fill="#EB5A1E"></path>
111 |             </svg>
112 |           </div>
113 |         </div>
114 |       </div>
115 |   );
116 | };


--------------------------------------------------------------------------------
/src/components/Categories.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | type CategoriesProps = {
 4 |     value: number;
 5 |     onChangeCategory: (idx: number) => void;
 6 | };
 7 | 
 8 | const categories = ['Все', 'Мясные', 'Вегетарианская', 'Гриль', 'Острые', 'Закрытые'];
 9 | 
10 | export const Categories: React.FC<CategoriesProps> = React.memo(({ value, onChangeCategory }) => {
11 |     return (
12 |         <div className="categories">
13 |             <ul>
14 |                 {categories.map((categoryName, i) => (
15 |                     <li key={i} onClick={() => onChangeCategory(i)} className={value === i ? 'active' : ''}>
16 |                         {categoryName}
17 |                     </li>
18 |                 ))}
19 |             </ul>
20 |         </div>
21 |     );
22 | });


--------------------------------------------------------------------------------
/src/components/Header.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Link, useLocation } from 'react-router-dom';
 3 | import { useSelector } from 'react-redux';
 4 | 
 5 | import logoSvg from '../assets/img/pizza-logo.svg';
 6 | import { Search } from './';
 7 | import { selectCart } from '../redux/cart/selectors';
 8 | 
 9 | export const Header: React.FC = () => {
10 |   const { items, totalPrice } = useSelector(selectCart);
11 |   const location = useLocation();
12 |   const isMounted = React.useRef(false);
13 | 
14 |   const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
15 | 
16 |   React.useEffect(() => {
17 |     if (isMounted.current) {
18 |       const json = JSON.stringify(items);
19 |       localStorage.setItem('cart', json);
20 |     }
21 |     isMounted.current = true;
22 |   }, [items]);
23 | 
24 |   return (
25 |       <div className="header">
26 |         <div className="container">
27 |           <Link to="/">
28 |             <div className="header__logo">
29 |               <img width="38" src={logoSvg} alt="Pizza logo" />
30 |               <div>
31 |                 <h1>React Pizza V2</h1>
32 |                 <p>самая вкусная пицца во вселенной</p>
33 |               </div>
34 |             </div>
35 |           </Link>
36 |           {location.pathname !== '/cart' && <Search />}
37 |           <div className="header__cart">
38 |             {location.pathname !== '/cart' && (
39 |                 <Link to="/cart" className="button button--cart">
40 |                   <span>{totalPrice} ₽</span>
41 |                   <div className="button__delimiter"></div>
42 |                   <svg
43 |                       width="18"
44 |                       height="18"
45 |                       viewBox="0 0 18 18"
46 |                       fill="none"
47 |                       xmlns="http://www.w3.org/2000/svg">
48 |                     <path
49 |                         d="M6.33333 16.3333C7.06971 16.3333 7.66667 15.7364 7.66667 15C7.66667 14.2636 7.06971 13.6667 6.33333 13.6667C5.59695 13.6667 5 14.2636 5 15C5 15.7364 5.59695 16.3333 6.33333 16.3333Z"
50 |                         stroke="white"
51 |                         strokeWidth="1.8"
52 |                         strokeLinecap="round"
53 |                         strokeLinejoin="round"
54 |                     />
55 |                     <path
56 |                         d="M14.3333 16.3333C15.0697 16.3333 15.6667 15.7364 15.6667 15C15.6667 14.2636 15.0697 13.6667 14.3333 13.6667C13.597 13.6667 13 14.2636 13 15C13 15.7364 13.597 16.3333 14.3333 16.3333Z"
57 |                         stroke="white"
58 |                         strokeWidth="1.8"
59 |                         strokeLinecap="round"
60 |                         strokeLinejoin="round"
61 |                     />
62 |                     <path
63 |                         d="M4.78002 4.99999H16.3334L15.2134 10.5933C15.1524 10.9003 14.9854 11.176 14.7417 11.3722C14.4979 11.5684 14.1929 11.6727 13.88 11.6667H6.83335C6.50781 11.6694 6.1925 11.553 5.94689 11.3393C5.70128 11.1256 5.54233 10.8295 5.50002 10.5067L4.48669 2.82666C4.44466 2.50615 4.28764 2.21182 4.04482 1.99844C3.80201 1.78505 3.48994 1.66715 3.16669 1.66666H1.66669"
64 |                         stroke="white"
65 |                         strokeWidth="1.8"
66 |                         strokeLinecap="round"
67 |                         strokeLinejoin="round"
68 |                     />
69 |                   </svg>
70 |                   <span>{totalCount}</span>
71 |                 </Link>
72 |             )}
73 |           </div>
74 |         </div>
75 |       </div>
76 |   );
77 | };


--------------------------------------------------------------------------------
/src/components/NotFoundBlock/NotFoundBlock.module.scss:
--------------------------------------------------------------------------------
 1 | .root {
 2 |   padding: 100px;
 3 |   max-width: 750px;
 4 |   margin: 0 auto;
 5 |   text-align: center;
 6 | 
 7 |   span {
 8 |     font-size: 64px;
 9 |   }
10 | }
11 | 
12 | .description {
13 |   font-size: 22px;
14 | }
15 | 


--------------------------------------------------------------------------------
/src/components/NotFoundBlock/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | import styles from './NotFoundBlock.module.scss';
 4 | 
 5 | export const NotFoundBlock: React.FC = () => {
 6 |     return (
 7 |         <div className={styles.root}>
 8 |             <h1>
 9 |                 <span>😕</span>
10 |                 <br />
11 |                 Ничего не найдено
12 |             </h1>
13 |             <p className={styles.description}>
14 |                 К сожалени данная страница отсутствует в нашем интернет-магазине
15 |             </p>
16 |         </div>
17 |     );
18 | };


--------------------------------------------------------------------------------
/src/components/Pagination/Pagination.module.scss:
--------------------------------------------------------------------------------
 1 | .root {
 2 |   li {
 3 |     display: inline-block;
 4 | 
 5 |     a {
 6 |       text-align: center;
 7 |       width: 45px;
 8 |       line-height: 42px;
 9 |       height: 45px;
10 |       border: 1px solid #fe5f1e;
11 |       border-radius: 30px;
12 |       margin-right: 10px;
13 |       cursor: pointer;
14 |       display: inline-block;
15 |       color: #fe5f1e;
16 | 
17 |       &:hover {
18 |         background-color: #fe5f1e;
19 |         color: #fff;
20 |       }
21 |     }
22 |   }
23 | 
24 |   :global {
25 |     .selected {
26 |       a {
27 |         background-color: #fe5f1e;
28 |         color: #fff;
29 |       }
30 |     }
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/src/components/Pagination/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactPaginate from 'react-paginate';
 3 | 
 4 | import styles from './Pagination.module.scss';
 5 | 
 6 | type PaginationProps = {
 7 |   currentPage: number;
 8 |   onChangePage: (page: number) => void;
 9 | };
10 | 
11 | export const Pagination: React.FC<PaginationProps> = ({ currentPage, onChangePage }) => (
12 |     <ReactPaginate
13 |         className={styles.root}
14 |         breakLabel="..."
15 |         nextLabel=">"
16 |         previousLabel="<"
17 |         onPageChange={(event) => onChangePage(event.selected + 1)}
18 |         pageRangeDisplayed={4}
19 |         pageCount={3}
20 |         forcePage={currentPage - 1}
21 |     />
22 | );


--------------------------------------------------------------------------------
/src/components/PizzaBlock/Skeleton.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ContentLoader from 'react-content-loader';
 3 | 
 4 | export const Skeleton = () => (
 5 |   <ContentLoader
 6 |     className="pizza-block"
 7 |     speed={2}
 8 |     width={280}
 9 |     height={500}
10 |     viewBox="0 0 280 500"
11 |     backgroundColor="#f3f3f3"
12 |     foregroundColor="#ecebeb">
13 |     <circle cx="134" cy="136" r="125" />
14 |     <rect x="0" y="279" rx="10" ry="10" width="280" height="23" />
15 |     <rect x="0" y="326" rx="10" ry="10" width="280" height="88" />
16 |     <rect x="0" y="436" rx="10" ry="10" width="95" height="30" />
17 |     <rect x="125" y="427" rx="24" ry="24" width="152" height="45" />
18 |   </ContentLoader>
19 | );
20 | 


--------------------------------------------------------------------------------
/src/components/PizzaBlock/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Link } from 'react-router-dom';
 3 | import { useDispatch, useSelector } from 'react-redux';
 4 | import { selectCartItemById } from '../../redux/cart/selectors';
 5 | import { CartItem } from '../../redux/cart/types';
 6 | import { addItem } from '../../redux/cart/slice';
 7 | 
 8 | const typeNames = ['тонкое', 'традиционное'];
 9 | 
10 | type PizzaBlockProps = {
11 |   id: string;
12 |   title: string;
13 |   price: number;
14 |   imageUrl: string;
15 |   sizes: number[];
16 |   types: number[];
17 |   rating: number;
18 | };
19 | 
20 | export const PizzaBlock: React.FC<PizzaBlockProps> = ({
21 |                                                         id,
22 |                                                         title,
23 |                                                         price,
24 |                                                         imageUrl,
25 |                                                         sizes,
26 |                                                         types,
27 |                                                       }) => {
28 |   const dispatch = useDispatch();
29 |   const cartItem = useSelector(selectCartItemById(id));
30 |   const [activeType, setActiveType] = React.useState(0);
31 |   const [activeSize, setActiveSize] = React.useState(0);
32 | 
33 |   const addedCount = cartItem ? cartItem.count : 0;
34 | 
35 |   const onClickAdd = () => {
36 |     const item: CartItem = {
37 |       id,
38 |       title,
39 |       price,
40 |       imageUrl,
41 |       type: typeNames[activeType],
42 |       size: sizes[activeSize],
43 |       count: 0,
44 |     };
45 |     dispatch(addItem(item));
46 |   };
47 | 
48 |   return (
49 |       <div className="pizza-block-wrapper">
50 |         <div className="pizza-block">
51 |           <Link key={id} to={`/pizza/${id}`}>
52 |             <img className="pizza-block__image" src={imageUrl} alt="Pizza" />
53 |             <h4 className="pizza-block__title">{title}</h4>
54 |           </Link>
55 |           <div className="pizza-block__selector">
56 |             <ul>
57 |               {types.map((typeId) => (
58 |                   <li
59 |                       key={typeId}
60 |                       onClick={() => setActiveType(typeId)}
61 |                       className={activeType === typeId ? 'active' : ''}>
62 |                     {typeNames[typeId]}
63 |                   </li>
64 |               ))}
65 |             </ul>
66 |             <ul>
67 |               {sizes.map((size, i) => (
68 |                   <li
69 |                       key={size}
70 |                       onClick={() => setActiveSize(i)}
71 |                       className={activeSize === i ? 'active' : ''}>
72 |                     {size} см.
73 |                   </li>
74 |               ))}
75 |             </ul>
76 |           </div>
77 |           <div className="pizza-block__bottom">
78 |             <div className="pizza-block__price">от {price} ₽</div>
79 |             <button onClick={onClickAdd} className="button button--outline button--add">
80 |               <svg
81 |                   width="12"
82 |                   height="12"
83 |                   viewBox="0 0 12 12"
84 |                   fill="none"
85 |                   xmlns="http://www.w3.org/2000/svg">
86 |                 <path
87 |                     d="M10.8 4.8H7.2V1.2C7.2 0.5373 6.6627 0 6 0C5.3373 0 4.8 0.5373 4.8 1.2V4.8H1.2C0.5373 4.8 0 5.3373 0 6C0 6.6627 0.5373 7.2 1.2 7.2H4.8V10.8C4.8 11.4627 5.3373 12 6 12C6.6627 12 7.2 11.4627 7.2 10.8V7.2H10.8C11.4627 7.2 12 6.6627 12 6C12 5.3373 11.4627 4.8 10.8 4.8Z"
88 |                     fill="white"
89 |                 />
90 |               </svg>
91 |               <span>Добавить</span>
92 |               {addedCount > 0 && <i>{addedCount}</i>}
93 |             </button>
94 |           </div>
95 |         </div>
96 |       </div>
97 |   );
98 | };


--------------------------------------------------------------------------------
/src/components/Search/Search.module.scss:
--------------------------------------------------------------------------------
 1 | .root {
 2 |   position: relative;
 3 |   left: -120px;
 4 | }
 5 | 
 6 | .input {
 7 |   border: 1px solid rgba(0, 0, 0, 0.1);
 8 |   padding: 12px 20px;
 9 |   padding-left: 42px;
10 |   width: 400px;
11 |   border-radius: 10px;
12 |   font-size: 16px;
13 | 
14 |   &:focus {
15 |     border: 1px solid rgba(0, 0, 0, 0.2);
16 |   }
17 | }
18 | 
19 | .icon {
20 |   width: 22px;
21 |   height: 22px;
22 |   opacity: 0.3;
23 |   position: absolute;
24 |   left: 14px;
25 |   top: 12px;
26 | }
27 | 
28 | .clearIcon {
29 |   width: 18px;
30 |   height: 18px;
31 |   opacity: 0.3;
32 |   position: absolute;
33 |   right: 15px;
34 |   top: 15px;
35 |   cursor: pointer;
36 | 
37 |   &:hover {
38 |     opacity: 0.8;
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/src/components/Search/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { useDispatch } from 'react-redux';
 3 | import debounce from 'lodash.debounce';
 4 | 
 5 | import styles from './Search.module.scss';
 6 | import { setSearchValue } from '../../redux/filter/slice';
 7 | 
 8 | export const Search: React.FC = () => {
 9 |   const dispatch = useDispatch();
10 |   const [value, setValue] = React.useState<string>('');
11 |   const inputRef = React.useRef<HTMLInputElement>(null);
12 | 
13 |   const onClickClear = () => {
14 |     dispatch(setSearchValue(''));
15 |     setValue('');
16 |     inputRef.current?.focus();
17 |   };
18 | 
19 |   const updateSearchValue = React.useCallback(
20 |       debounce((str: string) => {
21 |         dispatch(setSearchValue(str));
22 |       }, 150),
23 |       [],
24 |   );
25 | 
26 |   const onChangeInput = (event: React.ChangeEvent<HTMLInputElement>) => {
27 |     setValue(event.target.value);
28 |     updateSearchValue(event.target.value);
29 |   };
30 | 
31 |   return (
32 |       <div className={styles.root}>
33 |         <svg
34 |             className={styles.icon}
35 |             enableBackground="new 0 0 32 32"
36 |             id="EditableLine"
37 |             version="1.1"
38 |             viewBox="0 0 32 32"
39 |             xmlns="http://www.w3.org/2000/svg">
40 |           <circle
41 |               cx="14"
42 |               cy="14"
43 |               fill="none"
44 |               id="XMLID_42_"
45 |               r="9"
46 |               stroke="#000000"
47 |               strokeLinecap="round"
48 |               strokeLinejoin="round"
49 |               strokeMiterlimit="10"
50 |               strokeWidth="2"
51 |           />
52 |           <line
53 |               fill="none"
54 |               id="XMLID_44_"
55 |               stroke="#000000"
56 |               strokeLinecap="round"
57 |               strokeLinejoin="round"
58 |               strokeMiterlimit="10"
59 |               strokeWidth="2"
60 |               x1="27"
61 |               x2="20.366"
62 |               y1="27"
63 |               y2="20.366"
64 |           />
65 |         </svg>
66 |         <input
67 |             ref={inputRef}
68 |             value={value}
69 |             onChange={onChangeInput}
70 |             className={styles.input}
71 |             placeholder="Поиск пиццы..."
72 |         />
73 |         {value && (
74 |             <svg
75 |                 onClick={onClickClear}
76 |                 className={styles.clearIcon}
77 |                 viewBox="0 0 20 20"
78 |                 xmlns="http://www.w3.org/2000/svg">
79 |               <path d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z" />
80 |             </svg>
81 |         )}
82 |       </div>
83 |   );
84 | };


--------------------------------------------------------------------------------
/src/components/Sort.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { useDispatch } from 'react-redux';
 3 | import { setSort } from '../redux/filter/slice';
 4 | import { Sort as SortType, SortPropertyEnum } from '../redux/filter/types';
 5 | 
 6 | type SortItem = {
 7 |   name: string;
 8 |   sortProperty: SortPropertyEnum;
 9 | };
10 | 
11 | type PopupClick = MouseEvent & {
12 |   path: Node[];
13 | };
14 | 
15 | type SortPopupProps = {
16 |   value: SortType;
17 | };
18 | 
19 | export const sortList: SortItem[] = [
20 |   { name: 'популярности', sortProperty: SortPropertyEnum.RATING_DESC },
21 |   { name: 'цене', sortProperty: SortPropertyEnum.PRICE_DESC },
22 |   { name: 'алфавиту', sortProperty: SortPropertyEnum.TITLE_DESC },
23 | ];
24 | 
25 | export const Sort: React.FC<SortPopupProps> = React.memo(({ value }) => {
26 |   const dispatch = useDispatch();
27 |   const sortRef = React.useRef<HTMLDivElement>(null);
28 | 
29 |   const [open, setOpen] = React.useState(false);
30 | 
31 |   const onClickListItem = (obj: SortItem) => {
32 |     dispatch(setSort(obj));
33 |     setOpen(false);
34 |   };
35 | 
36 |   React.useEffect(() => {
37 |     const handleClickOutside = (event: MouseEvent) => {
38 |       const _event = event as PopupClick;
39 | 
40 |       if (sortRef.current && !_event.path.includes(sortRef.current)) {
41 |         setOpen(false);
42 |       }
43 |     };
44 | 
45 |     document.body.addEventListener('click', handleClickOutside);
46 | 
47 |     return () => document.body.removeEventListener('click', handleClickOutside);
48 |   }, []);
49 | 
50 |   return (
51 |       <div ref={sortRef} className="sort">
52 |         <div className="sort__label">
53 |           <svg
54 |               width="10"
55 |               height="6"
56 |               viewBox="0 0 10 6"
57 |               fill="none"
58 |               xmlns="http://www.w3.org/2000/svg">
59 |             <path
60 |                 d="M10 5C10 5.16927 9.93815 5.31576 9.81445 5.43945C9.69075 5.56315 9.54427 5.625 9.375 5.625H0.625C0.455729 5.625 0.309245 5.56315 0.185547 5.43945C0.061849 5.31576 0 5.16927 0 5C0 4.83073 0.061849 4.68424 0.185547 4.56055L4.56055 0.185547C4.68424 0.061849 4.83073 0 5 0C5.16927 0 5.31576 0.061849 5.43945 0.185547L9.81445 4.56055C9.93815 4.68424 10 4.83073 10 5Z"
61 |                 fill="#2C2C2C"
62 |             />
63 |           </svg>
64 |           <b>Сортировка по:</b>
65 |           <span onClick={() => setOpen(!open)}>{value.name}</span>
66 |         </div>
67 |         {open && (
68 |             <div className="sort__popup">
69 |               <ul>
70 |                 {sortList.map((obj, i) => (
71 |                     <li
72 |                         key={i}
73 |                         onClick={() => onClickListItem(obj)}
74 |                         className={value.sortProperty === obj.sortProperty ? 'active' : ''}>
75 |                       {obj.name}
76 |                     </li>
77 |                 ))}
78 |               </ul>
79 |             </div>
80 |         )}
81 |       </div>
82 |   );
83 | });


--------------------------------------------------------------------------------
/src/components/index.ts:
--------------------------------------------------------------------------------
 1 | export * from './PizzaBlock/Skeleton';
 2 | export * from './PizzaBlock';
 3 | export * from './Header';
 4 | export * from './Categories';
 5 | export * from './CartItem';
 6 | export * from './CartEmpty';
 7 | export * from './Search';
 8 | export * from './Pagination';
 9 | export * from './NotFoundBlock';
10 | export * from './Sort';
11 | 


--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
 1 | import ReactDOM from 'react-dom/client';
 2 | import { BrowserRouter } from 'react-router-dom';
 3 | import { Provider } from 'react-redux';
 4 | 
 5 | import App from './App';
 6 | 
 7 | import { store } from './redux/store';
 8 | 
 9 | const rootElem = document.getElementById('root');
10 | 
11 | if (rootElem) {
12 |     const root = ReactDOM.createRoot(rootElem);
13 | 
14 |     root.render(
15 |         <BrowserRouter>
16 |             <Provider store={store}>
17 |                 <App />
18 |             </Provider>
19 |         </BrowserRouter>,
20 |     );
21 | }


--------------------------------------------------------------------------------
/src/layouts/MainLayout.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Outlet } from 'react-router-dom';
 3 | 
 4 | import { Header } from '../components';
 5 | 
 6 | const MainLayout: React.FC = () => {
 7 |   return (
 8 |     <div className="wrapper">
 9 |       <Header />
10 |       <div className="content">
11 |         <Outlet />
12 |       </div>
13 |     </div>
14 |   );
15 | };
16 | 
17 | export default MainLayout;
18 | 


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


--------------------------------------------------------------------------------
/src/pages/Cart.tsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { Link } from 'react-router-dom';
  3 | import { useDispatch, useSelector } from 'react-redux';
  4 | 
  5 | import { CartItem, CartEmpty } from '../components';
  6 | 
  7 | import { selectCart } from '../redux/cart/selectors';
  8 | import { clearItems } from '../redux/cart/slice';
  9 | 
 10 | const Cart: React.FC = () => {
 11 |   const dispatch = useDispatch();
 12 |   const { totalPrice, items } = useSelector(selectCart);
 13 | 
 14 |   const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
 15 | 
 16 |   const onClickClear = () => {
 17 |     if (window.confirm('Очистить корзину?')) {
 18 |       dispatch(clearItems());
 19 |     }
 20 |   };
 21 | 
 22 |   if (!totalPrice) {
 23 |     return <CartEmpty />;
 24 |   }
 25 | 
 26 |   return (
 27 |     <div className="container container--cart">
 28 |       <div className="cart">
 29 |         <div className="cart__top">
 30 |           <h2 className="content__title">
 31 |             <svg
 32 |               width="18"
 33 |               height="18"
 34 |               viewBox="0 0 18 18"
 35 |               fill="none"
 36 |               xmlns="http://www.w3.org/2000/svg">
 37 |               <path
 38 |                 d="M6.33333 16.3333C7.06971 16.3333 7.66667 15.7364 7.66667 15C7.66667 14.2636 7.06971 13.6667 6.33333 13.6667C5.59695 13.6667 5 14.2636 5 15C5 15.7364 5.59695 16.3333 6.33333 16.3333Z"
 39 |                 stroke="white"
 40 |                 strokeWidth="1.8"
 41 |                 strokeLinecap="round"
 42 |                 strokeLinejoin="round"></path>
 43 |               <path
 44 |                 d="M14.3333 16.3333C15.0697 16.3333 15.6667 15.7364 15.6667 15C15.6667 14.2636 15.0697 13.6667 14.3333 13.6667C13.597 13.6667 13 14.2636 13 15C13 15.7364 13.597 16.3333 14.3333 16.3333Z"
 45 |                 stroke="white"
 46 |                 strokeWidth="1.8"
 47 |                 strokeLinecap="round"
 48 |                 strokeLinejoin="round"></path>
 49 |               <path
 50 |                 d="M4.78002 4.99999H16.3334L15.2134 10.5933C15.1524 10.9003 14.9854 11.176 14.7417 11.3722C14.4979 11.5684 14.1929 11.6727 13.88 11.6667H6.83335C6.50781 11.6694 6.1925 11.553 5.94689 11.3393C5.70128 11.1256 5.54233 10.8295 5.50002 10.5067L4.48669 2.82666C4.44466 2.50615 4.28764 2.21182 4.04482 1.99844C3.80201 1.78505 3.48994 1.66715 3.16669 1.66666H1.66669"
 51 |                 stroke="white"
 52 |                 strokeWidth="1.8"
 53 |                 strokeLinecap="round"
 54 |                 strokeLinejoin="round"></path>
 55 |             </svg>
 56 |             Корзина
 57 |           </h2>
 58 |           <div onClick={onClickClear} className="cart__clear">
 59 |             <svg
 60 |               width="20"
 61 |               height="20"
 62 |               viewBox="0 0 20 20"
 63 |               fill="none"
 64 |               xmlns="http://www.w3.org/2000/svg">
 65 |               <path
 66 |                 d="M2.5 5H4.16667H17.5"
 67 |                 stroke="#B6B6B6"
 68 |                 strokeWidth="1.2"
 69 |                 strokeLinecap="round"
 70 |                 strokeLinejoin="round"></path>
 71 |               <path
 72 |                 d="M6.66663 5.00001V3.33334C6.66663 2.89131 6.84222 2.46739 7.15478 2.15483C7.46734 1.84227 7.89127 1.66667 8.33329 1.66667H11.6666C12.1087 1.66667 12.5326 1.84227 12.8451 2.15483C13.1577 2.46739 13.3333 2.89131 13.3333 3.33334V5.00001M15.8333 5.00001V16.6667C15.8333 17.1087 15.6577 17.5326 15.3451 17.8452C15.0326 18.1577 14.6087 18.3333 14.1666 18.3333H5.83329C5.39127 18.3333 4.96734 18.1577 4.65478 17.8452C4.34222 17.5326 4.16663 17.1087 4.16663 16.6667V5.00001H15.8333Z"
 73 |                 stroke="#B6B6B6"
 74 |                 strokeWidth="1.2"
 75 |                 strokeLinecap="round"
 76 |                 strokeLinejoin="round"></path>
 77 |               <path
 78 |                 d="M8.33337 9.16667V14.1667"
 79 |                 stroke="#B6B6B6"
 80 |                 strokeWidth="1.2"
 81 |                 strokeLinecap="round"
 82 |                 strokeLinejoin="round"></path>
 83 |               <path
 84 |                 d="M11.6666 9.16667V14.1667"
 85 |                 stroke="#B6B6B6"
 86 |                 strokeWidth="1.2"
 87 |                 strokeLinecap="round"
 88 |                 strokeLinejoin="round"></path>
 89 |             </svg>
 90 | 
 91 |             <span>Очистить корзину</span>
 92 |           </div>
 93 |         </div>
 94 |         <div className="content__items">
 95 |           {items.map((item: any) => (
 96 |             <CartItem key={item.id} {...item} />
 97 |           ))}
 98 |         </div>
 99 |         <div className="cart__bottom">
100 |           <div className="cart__bottom-details">
101 |             <span>
102 |               {' '}
103 |               Всего пицц: <b>{totalCount} шт.</b>{' '}
104 |             </span>
105 |             <span>
106 |               {' '}
107 |               Сумма заказа: <b>{totalPrice} ₽</b>{' '}
108 |             </span>
109 |           </div>
110 |           <div className="cart__bottom-buttons">
111 |             <Link to="/" className="button button--outline button--add go-back-btn">
112 |               <svg
113 |                 width="8"
114 |                 height="14"
115 |                 viewBox="0 0 8 14"
116 |                 fill="none"
117 |                 xmlns="http://www.w3.org/2000/svg">
118 |                 <path
119 |                   d="M7 13L1 6.93015L6.86175 1"
120 |                   stroke="#D3D3D3"
121 |                   strokeWidth="1.5"
122 |                   strokeLinecap="round"
123 |                   strokeLinejoin="round"></path>
124 |               </svg>
125 | 
126 |               <span>Вернуться назад</span>
127 |             </Link>
128 |             <div className="button pay-btn">
129 |               <span>Оплатить сейчас</span>
130 |             </div>
131 |           </div>
132 |         </div>
133 |       </div>
134 |     </div>
135 |   );
136 | };
137 | 
138 | export default Cart;
139 | 


--------------------------------------------------------------------------------
/src/pages/FullPizza.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Link } from 'react-router-dom';
 3 | import axios from 'axios';
 4 | import { useParams, useNavigate } from 'react-router-dom';
 5 | 
 6 | const FullPizza: React.FC = () => {
 7 |   const [pizza, setPizza] = React.useState<{
 8 |     imageUrl: string;
 9 |     title: string;
10 |     price: number;
11 |   }>();
12 | 
13 |   const { id } = useParams();
14 |   const navigate = useNavigate();
15 | 
16 |   React.useEffect(() => {
17 |     async function fetchPizza() {
18 |       try {
19 |         const { data } = await axios.get('https://626d16545267c14d5677d9c2.mockapi.io/items/' + id);
20 |         setPizza(data);
21 |       } catch (error) {
22 |         alert('Ошибка при получении пиццы!');
23 |         navigate('/');
24 |       }
25 |     }
26 | 
27 |     fetchPizza();
28 |   }, []);
29 | 
30 |   if (!pizza) {
31 |     return <>Загрузка...</>;
32 |   }
33 | 
34 |   return (
35 |     <div className="container">
36 |       <img src={pizza.imageUrl} />
37 |       <h2>{pizza.title}</h2>
38 |       <h4>{pizza.price} ₽</h4>
39 |       <Link to="/">
40 |         <button className="button button--outline button--add">
41 |           <span>Назад</span>
42 |         </button>
43 |       </Link>
44 |     </div>
45 |   );
46 | };
47 | 
48 | export default FullPizza;
49 | 


--------------------------------------------------------------------------------
/src/pages/Home.tsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import qs from 'qs';
  3 | import { useSelector } from 'react-redux';
  4 | import { useNavigate } from 'react-router-dom';
  5 | 
  6 | import { Categories, Sort, PizzaBlock, Skeleton, Pagination } from '../components';
  7 | 
  8 | import { sortList } from '../components/Sort';
  9 | 
 10 | import { useAppDispatch } from '../redux/store';
 11 | import { selectFilter } from '../redux/filter/selectors';
 12 | import { selectPizzaData } from '../redux/pizza/selectors';
 13 | import { setCategoryId, setCurrentPage, setFilters } from '../redux/filter/slice';
 14 | import { fetchPizzas } from '../redux/pizza/asyncActions';
 15 | import { SearchPizzaParams } from '../redux/pizza/types';
 16 | 
 17 | const Home: React.FC = () => {
 18 |   const navigate = useNavigate();
 19 |   const dispatch = useAppDispatch();
 20 |   const isMounted = React.useRef(false);
 21 | 
 22 |   const { items, status } = useSelector(selectPizzaData);
 23 |   const { categoryId, sort, currentPage, searchValue } = useSelector(selectFilter);
 24 | 
 25 |   const onChangeCategory = React.useCallback((idx: number) => {
 26 |     dispatch(setCategoryId(idx));
 27 |   }, []);
 28 | 
 29 |   const onChangePage = (page: number) => {
 30 |     dispatch(setCurrentPage(page));
 31 |   };
 32 | 
 33 |   const getPizzas = async () => {
 34 |     const sortBy = sort.sortProperty.replace('-', '');
 35 |     const order = sort.sortProperty.includes('-') ? 'asc' : 'desc';
 36 |     const category = categoryId > 0 ? String(categoryId) : '';
 37 |     const search = searchValue;
 38 | 
 39 |     dispatch(
 40 |       fetchPizzas({
 41 |         sortBy,
 42 |         order,
 43 |         category,
 44 |         search,
 45 |         currentPage: String(currentPage),
 46 |       }),
 47 |     );
 48 | 
 49 |     window.scrollTo(0, 0);
 50 |   };
 51 | 
 52 |   // Если изменили параметры и был первый рендер
 53 |   React.useEffect(() => {
 54 |     // if (isMounted.current) {
 55 |     //   const params = {
 56 |     //     categoryId: categoryId > 0 ? categoryId : null,
 57 |     //     sortProperty: sort.sortProperty,
 58 |     //     currentPage,
 59 |     //   };
 60 | 
 61 |     //   const queryString = qs.stringify(params, { skipNulls: true });
 62 | 
 63 |     //   navigate(`/?${queryString}`);
 64 |     // }
 65 | 
 66 |     // const params = qs.parse(window.location.search.substring(1)) as unknown as SearchPizzaParams;
 67 |     // const sortObj = sortList.find((obj) => obj.sortProperty === params.sortBy);
 68 |     // dispatch(
 69 |     //   setFilters({
 70 |     //     searchValue: params.search,
 71 |     //     categoryId: Number(params.category),
 72 |     //     currentPage: Number(params.currentPage),
 73 |     //     sort: sortObj || sortList[0],
 74 |     //   }),
 75 |     // );
 76 | 
 77 |     getPizzas();
 78 |     // isMounted.current = true;
 79 |   }, [categoryId, sort.sortProperty, searchValue, currentPage]);
 80 | 
 81 |   // Парсим параметры при первом рендере
 82 |   // React.useEffect(() => {
 83 |   //   if (window.location.search) {
 84 |   //     const params = qs.parse(window.location.search.substring(1)) as unknown as SearchPizzaParams;
 85 |   //     const sort = sortList.find((obj) => obj.sortProperty === params.sortBy);
 86 |   //     dispatch(
 87 |   //       setFilters({
 88 |   //         searchValue: params.search,
 89 |   //         categoryId: Number(params.category),
 90 |   //         currentPage: Number(params.currentPage),
 91 |   //         sort: sort || sortList[0],
 92 |   //       }),
 93 |   //     );
 94 |   //   }
 95 |   //   isMounted.current = true;
 96 |   // }, []);
 97 | 
 98 |   const pizzas = items.map((obj: any) => <PizzaBlock key={obj.id} {...obj} />);
 99 |   const skeletons = [...new Array(6)].map((_, index) => <Skeleton key={index} />);
100 | 
101 |   return (
102 |     <div className="container">
103 |       <div className="content__top">
104 |         <Categories value={categoryId} onChangeCategory={onChangeCategory} />
105 |         <Sort value={sort} />
106 |       </div>
107 |       <h2 className="content__title">Все пиццы</h2>
108 |       {status === 'error' ? (
109 |         <div className="content__error-info">
110 |           <h2>Произошла ошибка 😕</h2>
111 |           <p>К сожалению, не удалось получить питсы. Попробуйте повторить попытку позже.</p>
112 |         </div>
113 |       ) : (
114 |         <div className="content__items">{status === 'loading' ? skeletons : pizzas}</div>
115 |       )}
116 | 
117 |       <Pagination currentPage={currentPage} onChangePage={onChangePage} />
118 |     </div>
119 |   );
120 | };
121 | 
122 | export default Home;
123 | 


--------------------------------------------------------------------------------
/src/pages/NotFound.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { NotFoundBlock } from '../components';
3 | 
4 | const NotFound: React.FC = () => <NotFoundBlock />;
5 | 
6 | export default NotFound;
7 | 


--------------------------------------------------------------------------------
/src/redux/cart/selectors.ts:
--------------------------------------------------------------------------------
1 | import { RootState } from '../store';
2 | 
3 | export const selectCart = (state: RootState) => state.cart;
4 | 
5 | export const selectCartItemById = (id: string) => (state: RootState) =>
6 |   state.cart.items.find((obj) => obj.id === id);
7 | 


--------------------------------------------------------------------------------
/src/redux/cart/slice.ts:
--------------------------------------------------------------------------------
 1 | import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 2 | import { calcTotalPrice } from '../../utils/calcTotalPrice';
 3 | import { getCartFromLS } from '../../utils/getCartFromLS';
 4 | import { CartItem, CartSliceState } from './types';
 5 | 
 6 | const initialState: CartSliceState = getCartFromLS();
 7 | 
 8 | const cartSlice = createSlice({
 9 |   name: 'cart',
10 |   initialState,
11 |   reducers: {
12 |     addItem(state, action: PayloadAction<CartItem>) {
13 |       const findItem = state.items.find((obj) => obj.id === action.payload.id);
14 | 
15 |       if (findItem) {
16 |         findItem.count++;
17 |       } else {
18 |         state.items.push({
19 |           ...action.payload,
20 |           count: 1,
21 |         });
22 |       }
23 | 
24 |       state.totalPrice = calcTotalPrice(state.items);
25 |     },
26 |     minusItem(state, action: PayloadAction<string>) {
27 |       const findItem = state.items.find((obj) => obj.id === action.payload);
28 | 
29 |       if (findItem) {
30 |         findItem.count--;
31 |       }
32 | 
33 |       state.totalPrice = calcTotalPrice(state.items);
34 |     },
35 |     removeItem(state, action: PayloadAction<string>) {
36 |       state.items = state.items.filter((obj) => obj.id !== action.payload);
37 |       state.totalPrice = calcTotalPrice(state.items);
38 |     },
39 |     clearItems(state) {
40 |       state.items = [];
41 |       state.totalPrice = 0;
42 |     },
43 |   },
44 | });
45 | 
46 | export const { addItem, removeItem, minusItem, clearItems } = cartSlice.actions;
47 | 
48 | export default cartSlice.reducer;
49 | 


--------------------------------------------------------------------------------
/src/redux/cart/types.ts:
--------------------------------------------------------------------------------
 1 | export type CartItem = {
 2 |   id: string;
 3 |   title: string;
 4 |   price: number;
 5 |   imageUrl: string;
 6 |   type: string;
 7 |   size: number;
 8 |   count: number;
 9 | };
10 | 
11 | export interface CartSliceState {
12 |   totalPrice: number;
13 |   items: CartItem[];
14 | }
15 | 


--------------------------------------------------------------------------------
/src/redux/filter/selectors.ts:
--------------------------------------------------------------------------------
1 | import { RootState } from '../store';
2 | 
3 | export const selectFilter = (state: RootState) => state.filter;
4 | export const selectSort = (state: RootState) => state.filter.sort;
5 | 


--------------------------------------------------------------------------------
/src/redux/filter/slice.ts:
--------------------------------------------------------------------------------
 1 | import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 2 | import { FilterSliceState, Sort, SortPropertyEnum } from './types';
 3 | 
 4 | const initialState: FilterSliceState = {
 5 |   searchValue: '',
 6 |   categoryId: 0,
 7 |   currentPage: 1,
 8 |   sort: {
 9 |     name: 'популярности',
10 |     sortProperty: SortPropertyEnum.RATING_DESC,
11 |   },
12 | };
13 | 
14 | const filterSlice = createSlice({
15 |   name: 'filters',
16 |   initialState,
17 |   reducers: {
18 |     setCategoryId(state, action: PayloadAction<number>) {
19 |       state.categoryId = action.payload;
20 |     },
21 |     setSearchValue(state, action: PayloadAction<string>) {
22 |       state.searchValue = action.payload;
23 |     },
24 |     setSort(state, action: PayloadAction<Sort>) {
25 |       state.sort = action.payload;
26 |     },
27 |     setCurrentPage(state, action: PayloadAction<number>) {
28 |       state.currentPage = action.payload;
29 |     },
30 |     setFilters(state, action: PayloadAction<FilterSliceState>) {
31 |       if (Object.keys(action.payload).length) {
32 |         state.currentPage = Number(action.payload.currentPage);
33 |         state.categoryId = Number(action.payload.categoryId);
34 |         state.sort = action.payload.sort;
35 |       } else {
36 |         state.currentPage = 1;
37 |         state.categoryId = 0;
38 |         state.sort = {
39 |           name: 'популярности',
40 |           sortProperty: SortPropertyEnum.RATING_DESC,
41 |         };
42 |       }
43 |     },
44 |   },
45 | });
46 | 
47 | export const { setCategoryId, setSort, setCurrentPage, setFilters, setSearchValue } =
48 |   filterSlice.actions;
49 | 
50 | export default filterSlice.reducer;
51 | 


--------------------------------------------------------------------------------
/src/redux/filter/types.ts:
--------------------------------------------------------------------------------
 1 | export enum SortPropertyEnum {
 2 |   RATING_DESC = 'rating',
 3 |   RATING_ASC = '-rating',
 4 |   TITLE_DESC = 'title',
 5 |   TITLE_ASC = '-title',
 6 |   PRICE_DESC = 'price',
 7 |   PRICE_ASC = '-price',
 8 | }
 9 | 
10 | export type Sort = {
11 |   name: string;
12 |   sortProperty: SortPropertyEnum;
13 | };
14 | 
15 | export interface FilterSliceState {
16 |   searchValue: string;
17 |   categoryId: number;
18 |   currentPage: number;
19 |   sort: Sort;
20 | }
21 | 


--------------------------------------------------------------------------------
/src/redux/pizza/asyncActions.ts:
--------------------------------------------------------------------------------
 1 | import { createAsyncThunk } from '@reduxjs/toolkit';
 2 | import axios from 'axios';
 3 | import { Pizza, SearchPizzaParams } from './types';
 4 | import pickBy from 'lodash/pickBy';
 5 | import identity from 'lodash/identity';
 6 | 
 7 | export const fetchPizzas = createAsyncThunk<Pizza[], SearchPizzaParams>(
 8 |   'pizza/fetchPizzasStatus',
 9 |   async (params) => {
10 |     const { sortBy, order, category, search, currentPage } = params;
11 |     console.log(params, 4444);
12 |     const { data } = await axios.get<Pizza[]>(`https://626d16545267c14d5677d9c2.mockapi.io/items`, {
13 |       params: pickBy(
14 |         {
15 |           page: currentPage,
16 |           limit: 4,
17 |           category,
18 |           sortBy,
19 |           order,
20 |           search,
21 |         },
22 |         identity,
23 |       ),
24 |     });
25 | 
26 |     return data;
27 |   },
28 | );
29 | 


--------------------------------------------------------------------------------
/src/redux/pizza/selectors.ts:
--------------------------------------------------------------------------------
1 | import { RootState } from '../store';
2 | 
3 | export const selectPizzaData = (state: RootState) => state.pizza;
4 | 


--------------------------------------------------------------------------------
/src/redux/pizza/slice.ts:
--------------------------------------------------------------------------------
 1 | import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 2 | import { fetchPizzas } from './asyncActions';
 3 | import { Pizza, PizzaSliceState, Status } from './types';
 4 | 
 5 | const initialState: PizzaSliceState = {
 6 |   items: [],
 7 |   status: Status.LOADING, // loading | success | error
 8 | };
 9 | 
10 | const pizzaSlice = createSlice({
11 |   name: 'pizza',
12 |   initialState,
13 |   reducers: {
14 |     setItems(state, action: PayloadAction<Pizza[]>) {
15 |       state.items = action.payload;
16 |     },
17 |   },
18 |   extraReducers: (builder) => {
19 |     builder.addCase(fetchPizzas.pending, (state, action) => {
20 |       state.status = Status.LOADING;
21 |       state.items = [];
22 |     });
23 | 
24 |     builder.addCase(fetchPizzas.fulfilled, (state, action) => {
25 |       state.items = action.payload;
26 |       state.status = Status.SUCCESS;
27 |     });
28 | 
29 |     builder.addCase(fetchPizzas.rejected, (state, action) => {
30 |       state.status = Status.ERROR;
31 |       state.items = [];
32 |     });
33 |   },
34 | });
35 | 
36 | export const { setItems } = pizzaSlice.actions;
37 | 
38 | export default pizzaSlice.reducer;
39 | 


--------------------------------------------------------------------------------
/src/redux/pizza/types.ts:
--------------------------------------------------------------------------------
 1 | export type Pizza = {
 2 |   id: string;
 3 |   title: string;
 4 |   price: number;
 5 |   imageUrl: string;
 6 |   sizes: number[];
 7 |   types: number[];
 8 |   rating: number;
 9 | };
10 | 
11 | export enum Status {
12 |   LOADING = 'loading',
13 |   SUCCESS = 'completed',
14 |   ERROR = 'error',
15 | }
16 | 
17 | export type SearchPizzaParams = {
18 |   sortBy: string;
19 |   order: string;
20 |   category: string;
21 |   search: string;
22 |   currentPage: string;
23 | };
24 | 
25 | export interface PizzaSliceState {
26 |   items: Pizza[];
27 |   status: Status;
28 | }
29 | 


--------------------------------------------------------------------------------
/src/redux/store.ts:
--------------------------------------------------------------------------------
 1 | import { configureStore } from '@reduxjs/toolkit';
 2 | import filter from './filter/slice';
 3 | import cart from './cart/slice';
 4 | import pizza from './pizza/slice';
 5 | import { useDispatch } from 'react-redux';
 6 | 
 7 | export const store = configureStore({
 8 |   reducer: {
 9 |     filter,
10 |     cart,
11 |     pizza,
12 |   },
13 | });
14 | 
15 | export type RootState = ReturnType<typeof store.getState>;
16 | 
17 | type AppDispatch = typeof store.dispatch;
18 | 
19 | export const useAppDispatch = () => useDispatch<AppDispatch>();
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/scss/_variables.scss:
--------------------------------------------------------------------------------
1 | $black: #232323;
2 | $background: #ffdf8c;
3 | $gray-line: #f6f6f6;
4 | $orange: #fe5f1e;
5 | 
6 | $container-width: 90%;
7 | 
8 | $duration: 0.15s;
9 | 


--------------------------------------------------------------------------------
/src/scss/app.scss:
--------------------------------------------------------------------------------
  1 | @import './variables';
  2 | @import './libs/normalize';
  3 | 
  4 | @import './components/all';
  5 | 
  6 | body {
  7 |   background-color: $background;
  8 | }
  9 | 
 10 | .wrapper {
 11 |   width: calc(100vw - 100px);
 12 |   height: 100%;
 13 |   background-color: #fff;
 14 |   margin: 50px auto;
 15 |   border-radius: 10px;
 16 |   max-width: 1400px;
 17 | 
 18 |   @media screen and (max-width: 645px) {
 19 |     width: calc(100vw - 30px);
 20 |     margin-top: 15px;
 21 |   }
 22 | }
 23 | 
 24 | .content {
 25 |   padding: 40px 0;
 26 | 
 27 |   &__title {
 28 |     font-weight: 800;
 29 |     font-size: 38px;
 30 |     margin: 60px 0;
 31 |   }
 32 | 
 33 |   &__items {
 34 |       display: grid;
 35 |       grid-template-columns: repeat(4, 1fr);
 36 |       grid-template-rows: repeat(auto-fit, 1fr);
 37 |       grid-column-gap: 11px;
 38 | 
 39 |     @media screen and (max-width: 1400px) {
 40 |       grid-template-columns: repeat(3, 1fr);
 41 | 
 42 |       @media screen and (max-width: 1060px) {
 43 |         grid-template-columns: repeat(2, 1fr);
 44 |       }
 45 | 
 46 |       @media screen and (max-width: 730px) {
 47 |         grid-template-columns: repeat(1, 1fr);
 48 |       }
 49 |     }
 50 |   }
 51 | 
 52 |   &__top {
 53 |     display: flex;
 54 |     align-items: center;
 55 |     justify-content: space-between;
 56 | 
 57 |     @media screen and (max-width: 1260px) {
 58 |       flex-direction: column;
 59 | 
 60 |       .categories {
 61 |         margin-bottom: 30px;
 62 |         width: 100%;
 63 |         overflow: auto;
 64 |       }
 65 | 
 66 |       ul {
 67 |         width: 785px;
 68 |       }
 69 |     }
 70 | 
 71 |     @media screen and (max-width: 390px) {
 72 |       flex-direction: column;
 73 | 
 74 |       .categories {
 75 |         margin-bottom: 30px;
 76 |         width: 100%;
 77 |         overflow: scroll;
 78 |       }
 79 | 
 80 |       ul {
 81 |         li {
 82 |           padding: 8px 20px;
 83 |         }
 84 |       }
 85 |     }
 86 | 
 87 |   }
 88 | }
 89 | 
 90 | .container {
 91 |   width: $container-width;
 92 |   margin: 0 auto;
 93 | 
 94 |   &--cart {
 95 |     max-width: 820px;
 96 |     margin: 90px auto;
 97 |     .content__title {
 98 |       margin: 0;
 99 |     }
100 |   }
101 | }
102 | 
103 | .cart {
104 |   &__top {
105 |     display: flex;
106 |     justify-content: space-between;
107 |     align-items: center;
108 |   }
109 | 
110 |   .content__title {
111 |     display: flex;
112 |     align-items: center;
113 |     font-size: 32px;
114 | 
115 |     svg {
116 |       position: relative;
117 |       top: -2px;
118 |       width: 30px;
119 |       height: 30px;
120 |       margin-right: 10px;
121 |       path {
122 |         stroke: $black;
123 |         stroke-width: 1.9;
124 |       }
125 |     }
126 |   }
127 | 
128 |   &__clear {
129 |     display: flex;
130 |     align-items: center;
131 |     cursor: pointer;
132 |     @include noselect();
133 | 
134 |     span {
135 |       display: inline-block;
136 |       margin-left: 7px;
137 |       color: #b6b6b6;
138 |       font-size: 18px;
139 |     }
140 | 
141 |     span,
142 |     svg,
143 |     path {
144 |       transition: all $duration ease-in-out;
145 |     }
146 | 
147 |     &:hover {
148 |       svg {
149 |         path {
150 |           stroke: darken($color: #b6b6b6, $amount: 50);
151 |         }
152 |       }
153 |       span {
154 |         color: darken($color: #b6b6b6, $amount: 50);
155 |       }
156 |     }
157 |   }
158 | 
159 |   .content__items {
160 |     display: block;
161 |   }
162 | 
163 |   &__item {
164 |     display: flex;
165 |     width: 100%;
166 |     border-top: 1px solid $gray-line;
167 |     padding-top: 30px;
168 |     margin-top: 30px;
169 | 
170 |     &-img {
171 |       display: flex;
172 |       align-items: center;
173 |       margin-right: 15px;
174 |       width: 10%;
175 | 
176 |       img {
177 |         width: 80px;
178 |         height: 80px;
179 |       }
180 |     }
181 | 
182 |     &-info {
183 |       display: flex;
184 |       flex-direction: column;
185 |       justify-content: center;
186 |       width: 40%;
187 | 
188 |       h3 {
189 |         font-weight: bold;
190 |         font-size: 22px;
191 |         line-height: 27px;
192 |         letter-spacing: 0.01em;
193 |       }
194 | 
195 |       p {
196 |         font-size: 18px;
197 |         color: #8d8d8d;
198 |       }
199 |     }
200 | 
201 |     &-count {
202 |       display: flex;
203 |       align-items: center;
204 |       justify-content: space-between;
205 |       width: 13%;
206 | 
207 |       &-minus {
208 |         svg {
209 |           path:first-of-type {
210 |             display: none;
211 |           }
212 |         }
213 |       }
214 | 
215 |       b {
216 |         font-size: 22px;
217 |       }
218 |     }
219 | 
220 |     &-price {
221 |       display: flex;
222 |       align-items: center;
223 |       justify-content: center;
224 |       width: 33%;
225 | 
226 |       b {
227 |         font-weight: bold;
228 |         font-size: 22px;
229 |         letter-spacing: 0.01em;
230 |       }
231 |     }
232 | 
233 |     &-remove {
234 |       display: flex;
235 |       align-items: center;
236 |       justify-content: flex-end;
237 |       width: 4%;
238 | 
239 |       .button {
240 |         border-color: darken($color: $gray-line, $amount: 10);
241 |       }
242 | 
243 |       svg {
244 |         transform: rotate(45deg);
245 | 
246 |         path {
247 |           fill: darken($color: $gray-line, $amount: 15);
248 |         }
249 |       }
250 | 
251 |       .button {
252 |         svg {
253 |           width: 11.5px;
254 |           height: 11.5px;
255 |           position: relative;
256 |         }
257 |         &:hover,
258 |         &:active {
259 |           border-color: darken($color: $gray-line, $amount: 80);
260 |           background-color: darken($color: $gray-line, $amount: 80);
261 |         }
262 |       }
263 |     }
264 |   }
265 | 
266 |   &__bottom {
267 |     margin: 50px 0;
268 | 
269 |     &-details {
270 |       display: flex;
271 |       justify-content: space-between;
272 | 
273 |       span {
274 |         font-size: 22px;
275 | 
276 |         &:last-of-type {
277 |           b {
278 |             color: $orange;
279 |           }
280 |         }
281 |       }
282 |     }
283 | 
284 |     &-buttons {
285 |       display: flex;
286 |       justify-content: space-between;
287 |       margin-top: 40px;
288 | 
289 |       .go-back-btn {
290 |         display: flex;
291 |         align-items: center;
292 |         justify-content: center;
293 |         width: 210px;
294 | 
295 |         border-color: darken($color: $gray-line, $amount: 10);
296 | 
297 |         span {
298 |           color: darken($color: $gray-line, $amount: 20);
299 |           font-weight: 500;
300 |           font-weight: 600;
301 |         }
302 | 
303 |         &:hover {
304 |           background-color: darken($color: $gray-line, $amount: 90);
305 |           border-color: darken($color: $gray-line, $amount: 90);
306 | 
307 |           span {
308 |             color: $gray-line;
309 |           }
310 |         }
311 | 
312 |         svg {
313 |           margin-right: 12px;
314 |           path {
315 |             fill: transparent;
316 |             stroke-width: 2;
317 |           }
318 |         }
319 |       }
320 | 
321 |       .pay-btn {
322 |         font-size: 16px;
323 |         font-weight: 600;
324 |         width: 210px;
325 |         padding: 16px;
326 |       }
327 |     }
328 |   }
329 | 
330 |   &--empty {
331 |     margin: 0 auto;
332 |     width: 560px;
333 |     text-align: center;
334 |     @media screen and (max-width: 767px) {
335 |       width: 300px;
336 |     }
337 | 
338 |     h2 {
339 |       font-size: 32px;
340 |       margin-bottom: 10px;
341 |     }
342 | 
343 |     p {
344 |       font-size: 18px;
345 |       line-height: 145.4%;
346 |       letter-spacing: 0.01em;
347 |       color: #777777;
348 |     }
349 | 
350 |     icon {
351 |       position: relative;
352 |       top: 2px;
353 |     }
354 | 
355 |     img {
356 |       display: block;
357 |       width: 300px;
358 |       margin: 45px auto 60px;
359 | 
360 |       @media screen and (max-width: 767px) {
361 |         width: 150px;
362 |       }
363 |     }
364 | 
365 |     .button--black {
366 |       padding: 12px 0 14px;
367 |       width: 230px;
368 |       margin: 0 auto;
369 |       font-weight: 600;
370 |       font-size: 18px;
371 |     }
372 |   }
373 | }
374 | 


--------------------------------------------------------------------------------
/src/scss/components/_all.scss:
--------------------------------------------------------------------------------
1 | @import './header';
2 | @import './button';
3 | @import './categories';
4 | @import './sort';
5 | @import './pizza-block';
6 | 


--------------------------------------------------------------------------------
/src/scss/components/_button.scss:
--------------------------------------------------------------------------------
  1 | @import '../variables';
  2 | 
  3 | .button {
  4 |   display: inline-block;
  5 |   background-color: $orange;
  6 |   border-radius: 30px;
  7 |   padding: 10px 20px;
  8 |   min-width: 100px;
  9 |   text-align: center;
 10 |   cursor: pointer;
 11 |   transition: background-color $duration ease-in-out, border-color $duration ease-in-out;
 12 |   border: 1px solid transparent;
 13 |   @include noselect();
 14 | 
 15 |   &,
 16 |   span {
 17 |     color: #fff;
 18 |   }
 19 | 
 20 |   i,
 21 |   span,
 22 |   path,
 23 |   svg {
 24 |     transition: all $duration ease-in-out;
 25 |   }
 26 | 
 27 |   &:hover {
 28 |     background-color: darken($orange, 8%);
 29 |   }
 30 | 
 31 |   &:active {
 32 |     background-color: darken($orange, 12%);
 33 |     transform: translateY(1px);
 34 |   }
 35 | 
 36 |   &--circle {
 37 |     display: flex;
 38 |     align-items: center;
 39 |     justify-content: center;
 40 |     width: 32px;
 41 |     height: 32px;
 42 |     min-width: 32px;
 43 |     padding: 0;
 44 |     border-width: 2px;
 45 |   }
 46 | 
 47 |   &--black {
 48 |     background-color: $black;
 49 | 
 50 |     &:hover,
 51 |     &:active {
 52 |       background-color: lighten($color: $black, $amount: 10);
 53 |     }
 54 |   }
 55 | 
 56 |   &--outline {
 57 |     background-color: #fff;
 58 |     border-color: $orange;
 59 |     &,
 60 |     span {
 61 |       color: $orange;
 62 |     }
 63 | 
 64 |     svg {
 65 |       path {
 66 |         fill: $orange;
 67 |       }
 68 |     }
 69 | 
 70 |     &:hover {
 71 |       background-color: $orange;
 72 | 
 73 |       &,
 74 |       span {
 75 |         color: #fff;
 76 |       }
 77 | 
 78 |       svg {
 79 |         path {
 80 |           fill: #fff;
 81 |         }
 82 |       }
 83 |     }
 84 | 
 85 |     &:active {
 86 |       background-color: darken($orange, 8%);
 87 |     }
 88 |   }
 89 | 
 90 |   &__delimiter {
 91 |     width: 1px;
 92 |     height: 25px;
 93 |     background-color: rgba(255, 255, 255, 0.25);
 94 |     margin-left: 14px;
 95 |     margin-right: 14px;
 96 |   }
 97 | 
 98 |   &--add {
 99 |     svg {
100 |       margin-right: 2px;
101 |     }
102 | 
103 |     span {
104 |       font-weight: 600;
105 |       font-size: 16px;
106 |     }
107 | 
108 |     &:hover {
109 |       i {
110 |         background-color: #fff;
111 |         color: $orange;
112 |       }
113 |     }
114 | 
115 |     i {
116 |       display: inline-block;
117 |       border-radius: 30px;
118 |       background-color: $orange;
119 |       color: #fff;
120 |       font-weight: 600;
121 |       width: 22px;
122 |       height: 22px;
123 |       font-style: normal;
124 |       font-size: 13px;
125 |       line-height: 22px;
126 |       position: relative;
127 |       top: -1px;
128 |       left: 3px;
129 |     }
130 |   }
131 | 
132 |   &--cart {
133 |     display: flex;
134 |     align-items: center;
135 |     line-height: 23px;
136 |     padding: 12px 25px;
137 | 
138 |     svg {
139 |       margin-right: 8px;
140 |       margin-bottom: 1px;
141 |     }
142 | 
143 |     span {
144 |       font-weight: 600;
145 |       font-size: 16px;
146 |     }
147 |   }
148 | }
149 | 


--------------------------------------------------------------------------------
/src/scss/components/_categories.scss:
--------------------------------------------------------------------------------
 1 | @import '../variables';
 2 | 
 3 | .categories {
 4 |   ul {
 5 |     display: flex;
 6 | 
 7 |     li {
 8 |       background-color: #f9f9f9;
 9 |       padding: 13px 30px;
10 |       border-radius: 30px;
11 |       margin-right: 10px;
12 |       font-weight: bold;
13 |       cursor: pointer;
14 |       transition: background-color 0.1s ease-in-out;
15 |       @include noselect();
16 | 
17 |       &:hover {
18 |         background-color: darken(#f9f9f9, 2%);
19 |       }
20 | 
21 |       &:active {
22 |         background-color: darken(#f9f9f9, 5%);
23 |       }
24 | 
25 |       &.active {
26 |         background-color: #282828;
27 |         color: #fff;
28 |       }
29 |     }
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/src/scss/components/_header.scss:
--------------------------------------------------------------------------------
 1 | @import '../variables';
 2 | 
 3 | .header {
 4 |   border-bottom: 1px solid $gray-line;
 5 |   padding: 40px 0;
 6 | 
 7 |   .container {
 8 |     display: flex;
 9 |     align-items: center;
10 |     justify-content: space-between;
11 | 
12 |     @media screen and (max-width: 645px) {
13 |       flex-direction: column;
14 | 
15 |       .header__cart {
16 |         margin-top: 20px;
17 |       }
18 |     }
19 | 
20 |   }
21 | 
22 |   &__logo {
23 |     display: flex;
24 | 
25 |     img {
26 |       margin-right: 15px;
27 |     }
28 | 
29 |     h1 {
30 |       color: #181818;
31 |       font-size: 24px;
32 |       text-transform: uppercase;
33 |       font-weight: 800;
34 |       text-align: left;
35 |     }
36 | 
37 |     p {
38 |       color: #7b7b7b;
39 |       text-align: left;
40 |     }
41 |   }
42 | }
43 | 


--------------------------------------------------------------------------------
/src/scss/components/_pizza-block.scss:
--------------------------------------------------------------------------------
 1 | @import '../variables';
 2 | 
 3 | .pizza-block {
 4 |   width: 280px;
 5 |   text-align: center;
 6 |   margin-bottom: 65px;
 7 | 
 8 |   &-wrapper {
 9 |     display: flex;
10 |     justify-content: center;
11 |   }
12 | 
13 |   &__image {
14 |     width: 260px;
15 |   }
16 | 
17 |   &__title {
18 |     font-size: 20px;
19 |     font-weight: 900;
20 |     margin-bottom: 20px;
21 |   }
22 | 
23 |   &__selector {
24 |     display: flex;
25 |     background-color: #f3f3f3;
26 |     border-radius: 10px;
27 |     flex-direction: column;
28 |     padding: 6px;
29 | 
30 |     ul {
31 |       display: flex;
32 |       flex: 1;
33 | 
34 |       &:first-of-type {
35 |         margin-bottom: 6px;
36 |       }
37 | 
38 |       li {
39 |         padding: 8px;
40 |         flex: 1;
41 |         cursor: pointer;
42 |         font-weight: 600;
43 |         font-size: 14px;
44 |         @include noselect();
45 |         &.active {
46 |           background: #ffffff;
47 |           box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
48 |           border-radius: 5px;
49 |           cursor: auto;
50 |         }
51 |       }
52 |     }
53 |   }
54 | 
55 |   &__bottom {
56 |     display: flex;
57 |     align-items: center;
58 |     justify-content: space-between;
59 |     margin-top: 20px;
60 |   }
61 | 
62 |   &__price {
63 |     font-weight: bold;
64 |     font-size: 22px;
65 |     line-height: 27px;
66 |     letter-spacing: 0.015em;
67 |   }
68 | }
69 | 


--------------------------------------------------------------------------------
/src/scss/components/_sort.scss:
--------------------------------------------------------------------------------
 1 | @import '../variables';
 2 | 
 3 | .sort {
 4 |   position: relative;
 5 |   &__label {
 6 |     display: flex;
 7 |     align-items: center;
 8 | 
 9 |     svg {
10 |       margin-right: 8px;
11 |     }
12 | 
13 |     b {
14 |       margin-right: 8px;
15 |     }
16 | 
17 |     span {
18 |       color: $orange;
19 |       border-bottom: 1px dashed $orange;
20 |       cursor: pointer;
21 |     }
22 |   }
23 | 
24 |   &__popup {
25 |     position: absolute;
26 |     right: 0;
27 |     margin-top: 15px;
28 |     background: #ffffff;
29 |     box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.09);
30 |     border-radius: 10px;
31 |     overflow: hidden;
32 |     padding: 10px 0;
33 |     width: 160px;
34 | 
35 |     ul {
36 |       overflow: hidden;
37 |       li {
38 |         padding: 12px 20px;
39 |         cursor: pointer;
40 | 
41 |         &.active,
42 |         &:hover {
43 |           background: rgba(254, 95, 30, 0.05);
44 |         }
45 | 
46 |         &.active {
47 |           font-weight: bold;
48 |           color: $orange;
49 |         }
50 |       }
51 |     }
52 |   }
53 | }
54 | 


--------------------------------------------------------------------------------
/src/scss/libs/_normalize.scss:
--------------------------------------------------------------------------------
 1 | * {
 2 |   padding: 0;
 3 |   margin: 0;
 4 |   list-style: none;
 5 |   outline: none;
 6 |   font-family: 'Nunito', Roboto, system-ui, Tahoma, sans-serif;
 7 |   box-sizing: border-box;
 8 | }
 9 | 
10 | html {
11 |   -ms-text-size-adjust: 100%;
12 |   -webkit-text-size-adjust: 100%;
13 | }
14 | 
15 | body {
16 |   -moz-osx-font-smoothing: grayscale;
17 |   -webkit-font-smoothing: antialiased;
18 |   color: $black;
19 | }
20 | 
21 | a,
22 | span,
23 | p,
24 | b,
25 | h1,
26 | h2,
27 | h3,
28 | h4,
29 | h5 {
30 |   color: $black;
31 | }
32 | 
33 | h1 {
34 |   font-size: 48px;
35 | }
36 | 
37 | h2 {
38 |   font-weight: 600;
39 |   font-size: 28px;
40 |   line-height: 30px;
41 | }
42 | 
43 | a {
44 |   text-decoration: none;
45 | }
46 | 
47 | @mixin noselect {
48 |   -webkit-touch-callout: none; /* iOS Safari */
49 |   -webkit-user-select: none; /* Safari */
50 |   -khtml-user-select: none; /* Konqueror HTML */
51 |   -moz-user-select: none; /* Old versions of Firefox */
52 |   -ms-user-select: none; /* Internet Explorer/Edge */
53 |   user-select: none; /* Non-prefixed version, currently
54 |                                   supported by Chrome, Opera and Firefox */
55 | }
56 | 


--------------------------------------------------------------------------------
/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/utils/calcTotalPrice.ts:
--------------------------------------------------------------------------------
1 | import { CartItem } from '../redux/cart/types';
2 | 
3 | export const calcTotalPrice = (items: CartItem[]) => {
4 |   return items.reduce((sum, obj) => obj.price * obj.count + sum, 0);
5 | };
6 | 


--------------------------------------------------------------------------------
/src/utils/getCartFromLS.ts:
--------------------------------------------------------------------------------
 1 | import { CartItem } from '../redux/cart/types';
 2 | import { calcTotalPrice } from './calcTotalPrice';
 3 | 
 4 | export const getCartFromLS = () => {
 5 |   const data = localStorage.getItem('cart');
 6 |   const items = data ? JSON.parse(data) : [];
 7 |   const totalPrice = calcTotalPrice(items);
 8 | 
 9 |   return {
10 |     items: items as CartItem[],
11 |     totalPrice,
12 |   };
13 | };
14 | 


--------------------------------------------------------------------------------
/src/utils/math.ts:
--------------------------------------------------------------------------------
1 | export function add(a: number, b: number) {
2 |   console.log(111);
3 |   return a + b;
4 | }
5 | 


--------------------------------------------------------------------------------
/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 | 


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