├── .eslintrc.yml ├── .github └── workflows │ └── build.yml ├── .gitignore ├── .storybook ├── main.js └── preview.js ├── .vscode ├── launch.json └── settings.json ├── LICENSE ├── README.md ├── craco.config.js ├── package.json ├── pnpm-lock.yaml ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt ├── src ├── components │ ├── app │ │ ├── index.tsx │ │ └── style.scss │ ├── error-message │ │ ├── ErrorMessage.stories.tsx │ │ ├── index.tsx │ │ └── style.scss │ ├── header │ │ ├── hooks.ts │ │ ├── index.tsx │ │ └── style.scss │ ├── layout │ │ ├── background.jpg │ │ ├── index.tsx │ │ └── style.scss │ ├── loading-spinner │ │ ├── index.tsx │ │ ├── loading-spinner.stories.tsx │ │ └── style.scss │ ├── pokemon-type-pill │ │ ├── index.tsx │ │ ├── pokemon-type-pill.stories.tsx │ │ └── style.scss │ └── resource-state │ │ ├── index.tsx │ │ └── resource-state.stories.tsx ├── features │ ├── pokemon-details │ │ ├── pokemon-details-layout │ │ │ ├── hooks.ts │ │ │ ├── index.tsx │ │ │ ├── mock.json │ │ │ ├── pokemon-details-layout.stories.tsx │ │ │ └── style.scss │ │ ├── pokemon-info │ │ │ ├── hooks.ts │ │ │ └── index.tsx │ │ ├── slice.ts │ │ ├── thunks.ts │ │ └── types.ts │ ├── pokemon-names │ │ ├── pokemon-search │ │ │ ├── hooks.ts │ │ │ ├── index.tsx │ │ │ └── style.scss │ │ ├── service.ts │ │ ├── slice.test.ts │ │ └── slice.ts │ └── pokemon-page │ │ ├── card-layout │ │ ├── card-layout.stories.tsx │ │ ├── index.tsx │ │ └── style.scss │ │ ├── footer │ │ ├── index.tsx │ │ └── style.scss │ │ ├── pagination │ │ ├── index.tsx │ │ ├── pagination.stories.tsx │ │ └── style.scss │ │ ├── pokemon-card │ │ ├── hooks.ts │ │ ├── index.tsx │ │ ├── mock.ts │ │ ├── pokemon-card.stories.tsx │ │ ├── pokemon-card.test.tsx │ │ └── style.scss │ │ ├── pokemon-list │ │ ├── hooks.ts │ │ ├── index.tsx │ │ ├── msw-handlers.ts │ │ └── pokemon-list.test.tsx │ │ ├── service.ts │ │ ├── slice.ts │ │ ├── thunks.ts │ │ └── types.ts ├── index.css ├── index.tsx ├── logo.svg ├── pages │ ├── details.tsx │ ├── list.tsx │ └── routes.ts ├── react-app-env.d.ts ├── redux │ ├── hooks.ts │ ├── inject-slice-context.ts │ ├── lazy-reducers.ts │ ├── static-reducers.ts │ ├── store.ts │ ├── types.ts │ └── with-lazy-redux.tsx ├── reportWebVitals.ts ├── setupTests.ts └── structures │ ├── trie.test.ts │ └── trie.ts └── tsconfig.json /.eslintrc.yml: -------------------------------------------------------------------------------- 1 | env: 2 | browser: true 3 | es2021: true 4 | extends: 5 | - "react-app" 6 | - "react-app/jest" 7 | parser: "@typescript-eslint/parser" 8 | parserOptions: 9 | ecmaFeatures: 10 | jsx: true 11 | ecmaVersion: latest 12 | sourceType: module 13 | rules: 14 | "@typescript-eslint/consistent-type-imports": "error" 15 | overrides: 16 | - files: 17 | - "**/*.stories.*" 18 | rules: 19 | import/no-anonymous-default-export: "off" 20 | -------------------------------------------------------------------------------- /.github/workflows/build.yml: -------------------------------------------------------------------------------- 1 | # This is a basic workflow to help you get started with Actions 2 | 3 | name: CI 4 | 5 | # Controls when the action will run. Triggers the workflow on push or pull request 6 | # events but only for the master branch 7 | on: 8 | push: 9 | branches: 10 | - master 11 | pull_request: 12 | branches: 13 | - master 14 | 15 | # A workflow run is made up of one or more jobs that can run sequentially or in parallel 16 | jobs: 17 | # This workflow contains a single job called "build" 18 | build: 19 | # The type of runner that the job will run on 20 | runs-on: ubuntu-latest 21 | 22 | # Steps represent a sequence of tasks that will be executed as part of the job 23 | steps: 24 | - name: Checkout 🛎️ 25 | uses: actions/checkout@v3 26 | with: 27 | persist-credentials: false 28 | 29 | - name: Setup 🔧 30 | uses: pnpm/action-setup@v2.4.0 31 | 32 | - name: Test 🔎 33 | run: | 34 | pnpm install 35 | pnpm test 36 | pnpm lint 37 | 38 | - name: Build 👷 39 | run: pnpm build 40 | 41 | - name: Deploy 🚀 42 | uses: JamesIves/github-pages-deploy-action@v4.3.3 43 | with: 44 | ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }} 45 | BRANCH: gh-pages # The branch the action should deploy to. 46 | FOLDER: build # The folder the action should deploy. 47 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.storybook/main.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "stories": [ 3 | "../src/**/*.stories.mdx", 4 | "../src/**/*.stories.@(js|jsx|ts|tsx)" 5 | ], 6 | "addons": [ 7 | "@storybook/addon-links", 8 | "@storybook/addon-essentials", 9 | "@storybook/addon-interactions", 10 | "@storybook/preset-create-react-app" 11 | ], 12 | "framework": "@storybook/react", 13 | "core": { 14 | "builder": "@storybook/builder-webpack5" 15 | } 16 | } -------------------------------------------------------------------------------- /.storybook/preview.js: -------------------------------------------------------------------------------- 1 | export const parameters = { 2 | actions: { argTypesRegex: "^on[A-Z].*" }, 3 | controls: { 4 | matchers: { 5 | color: /(background|color)$/i, 6 | date: /Date$/, 7 | }, 8 | }, 9 | } -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "name": "Attach", 9 | "port": 9229, 10 | "request": "attach", 11 | "skipFiles": [ 12 | "/**" 13 | ], 14 | "type": "node" 15 | }, 16 | { 17 | "type": "node", 18 | "request": "launch", 19 | "name": "Jest Current File", 20 | "runtimeExecutable": "sh", 21 | "program": "node_modules/.bin/react-scripts", 22 | "args": ["test", "${relativeFile}", "--runInBand"], 23 | "console": "integratedTerminal", 24 | "internalConsoleOptions": "openOnFirstSessionStart" 25 | } 26 | ] 27 | } -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "typescript.tsdk": "node_modules/typescript/lib" 3 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | GNU AFFERO GENERAL PUBLIC LICENSE 2 | Version 3, 19 November 2007 3 | 4 | Copyright (C) 2007 Free Software Foundation, Inc. 5 | Everyone is permitted to copy and distribute verbatim copies 6 | of this license document, but changing it is not allowed. 7 | 8 | Preamble 9 | 10 | The GNU Affero General Public License is a free, copyleft license for 11 | software and other kinds of works, specifically designed to ensure 12 | cooperation with the community in the case of network server software. 13 | 14 | The licenses for most software and other practical works are designed 15 | to take away your freedom to share and change the works. By contrast, 16 | our General Public Licenses are intended to guarantee your freedom to 17 | share and change all versions of a program--to make sure it remains free 18 | software for all its users. 19 | 20 | When we speak of free software, we are referring to freedom, not 21 | price. Our General Public Licenses are designed to make sure that you 22 | have the freedom to distribute copies of free software (and charge for 23 | them if you wish), that you receive source code or can get it if you 24 | want it, that you can change the software or use pieces of it in new 25 | free programs, and that you know you can do these things. 26 | 27 | Developers that use our General Public Licenses protect your rights 28 | with two steps: (1) assert copyright on the software, and (2) offer 29 | you this License which gives you legal permission to copy, distribute 30 | and/or modify the software. 31 | 32 | A secondary benefit of defending all users' freedom is that 33 | improvements made in alternate versions of the program, if they 34 | receive widespread use, become available for other developers to 35 | incorporate. Many developers of free software are heartened and 36 | encouraged by the resulting cooperation. However, in the case of 37 | software used on network servers, this result may fail to come about. 38 | The GNU General Public License permits making a modified version and 39 | letting the public access it on a server without ever releasing its 40 | source code to the public. 41 | 42 | The GNU Affero General Public License is designed specifically to 43 | ensure that, in such cases, the modified source code becomes available 44 | to the community. It requires the operator of a network server to 45 | provide the source code of the modified version running there to the 46 | users of that server. Therefore, public use of a modified version, on 47 | a publicly accessible server, gives the public access to the source 48 | code of the modified version. 49 | 50 | An older license, called the Affero General Public License and 51 | published by Affero, was designed to accomplish similar goals. This is 52 | a different license, not a version of the Affero GPL, but Affero has 53 | released a new version of the Affero GPL which permits relicensing under 54 | this license. 55 | 56 | The precise terms and conditions for copying, distribution and 57 | modification follow. 58 | 59 | TERMS AND CONDITIONS 60 | 61 | 0. Definitions. 62 | 63 | "This License" refers to version 3 of the GNU Affero General Public License. 64 | 65 | "Copyright" also means copyright-like laws that apply to other kinds of 66 | works, such as semiconductor masks. 67 | 68 | "The Program" refers to any copyrightable work licensed under this 69 | License. Each licensee is addressed as "you". "Licensees" and 70 | "recipients" may be individuals or organizations. 71 | 72 | To "modify" a work means to copy from or adapt all or part of the work 73 | in a fashion requiring copyright permission, other than the making of an 74 | exact copy. The resulting work is called a "modified version" of the 75 | earlier work or a work "based on" the earlier work. 76 | 77 | A "covered work" means either the unmodified Program or a work based 78 | on the Program. 79 | 80 | To "propagate" a work means to do anything with it that, without 81 | permission, would make you directly or secondarily liable for 82 | infringement under applicable copyright law, except executing it on a 83 | computer or modifying a private copy. Propagation includes copying, 84 | distribution (with or without modification), making available to the 85 | public, and in some countries other activities as well. 86 | 87 | To "convey" a work means any kind of propagation that enables other 88 | parties to make or receive copies. Mere interaction with a user through 89 | a computer network, with no transfer of a copy, is not conveying. 90 | 91 | An interactive user interface displays "Appropriate Legal Notices" 92 | to the extent that it includes a convenient and prominently visible 93 | feature that (1) displays an appropriate copyright notice, and (2) 94 | tells the user that there is no warranty for the work (except to the 95 | extent that warranties are provided), that licensees may convey the 96 | work under this License, and how to view a copy of this License. If 97 | the interface presents a list of user commands or options, such as a 98 | menu, a prominent item in the list meets this criterion. 99 | 100 | 1. Source Code. 101 | 102 | The "source code" for a work means the preferred form of the work 103 | for making modifications to it. "Object code" means any non-source 104 | form of a work. 105 | 106 | A "Standard Interface" means an interface that either is an official 107 | standard defined by a recognized standards body, or, in the case of 108 | interfaces specified for a particular programming language, one that 109 | is widely used among developers working in that language. 110 | 111 | The "System Libraries" of an executable work include anything, other 112 | than the work as a whole, that (a) is included in the normal form of 113 | packaging a Major Component, but which is not part of that Major 114 | Component, and (b) serves only to enable use of the work with that 115 | Major Component, or to implement a Standard Interface for which an 116 | implementation is available to the public in source code form. A 117 | "Major Component", in this context, means a major essential component 118 | (kernel, window system, and so on) of the specific operating system 119 | (if any) on which the executable work runs, or a compiler used to 120 | produce the work, or an object code interpreter used to run it. 121 | 122 | The "Corresponding Source" for a work in object code form means all 123 | the source code needed to generate, install, and (for an executable 124 | work) run the object code and to modify the work, including scripts to 125 | control those activities. However, it does not include the work's 126 | System Libraries, or general-purpose tools or generally available free 127 | programs which are used unmodified in performing those activities but 128 | which are not part of the work. For example, Corresponding Source 129 | includes interface definition files associated with source files for 130 | the work, and the source code for shared libraries and dynamically 131 | linked subprograms that the work is specifically designed to require, 132 | such as by intimate data communication or control flow between those 133 | subprograms and other parts of the work. 134 | 135 | The Corresponding Source need not include anything that users 136 | can regenerate automatically from other parts of the Corresponding 137 | Source. 138 | 139 | The Corresponding Source for a work in source code form is that 140 | same work. 141 | 142 | 2. Basic Permissions. 143 | 144 | All rights granted under this License are granted for the term of 145 | copyright on the Program, and are irrevocable provided the stated 146 | conditions are met. This License explicitly affirms your unlimited 147 | permission to run the unmodified Program. The output from running a 148 | covered work is covered by this License only if the output, given its 149 | content, constitutes a covered work. This License acknowledges your 150 | rights of fair use or other equivalent, as provided by copyright law. 151 | 152 | You may make, run and propagate covered works that you do not 153 | convey, without conditions so long as your license otherwise remains 154 | in force. You may convey covered works to others for the sole purpose 155 | of having them make modifications exclusively for you, or provide you 156 | with facilities for running those works, provided that you comply with 157 | the terms of this License in conveying all material for which you do 158 | not control copyright. Those thus making or running the covered works 159 | for you must do so exclusively on your behalf, under your direction 160 | and control, on terms that prohibit them from making any copies of 161 | your copyrighted material outside their relationship with you. 162 | 163 | Conveying under any other circumstances is permitted solely under 164 | the conditions stated below. Sublicensing is not allowed; section 10 165 | makes it unnecessary. 166 | 167 | 3. Protecting Users' Legal Rights From Anti-Circumvention Law. 168 | 169 | No covered work shall be deemed part of an effective technological 170 | measure under any applicable law fulfilling obligations under article 171 | 11 of the WIPO copyright treaty adopted on 20 December 1996, or 172 | similar laws prohibiting or restricting circumvention of such 173 | measures. 174 | 175 | When you convey a covered work, you waive any legal power to forbid 176 | circumvention of technological measures to the extent such circumvention 177 | is effected by exercising rights under this License with respect to 178 | the covered work, and you disclaim any intention to limit operation or 179 | modification of the work as a means of enforcing, against the work's 180 | users, your or third parties' legal rights to forbid circumvention of 181 | technological measures. 182 | 183 | 4. Conveying Verbatim Copies. 184 | 185 | You may convey verbatim copies of the Program's source code as you 186 | receive it, in any medium, provided that you conspicuously and 187 | appropriately publish on each copy an appropriate copyright notice; 188 | keep intact all notices stating that this License and any 189 | non-permissive terms added in accord with section 7 apply to the code; 190 | keep intact all notices of the absence of any warranty; and give all 191 | recipients a copy of this License along with the Program. 192 | 193 | You may charge any price or no price for each copy that you convey, 194 | and you may offer support or warranty protection for a fee. 195 | 196 | 5. Conveying Modified Source Versions. 197 | 198 | You may convey a work based on the Program, or the modifications to 199 | produce it from the Program, in the form of source code under the 200 | terms of section 4, provided that you also meet all of these conditions: 201 | 202 | a) The work must carry prominent notices stating that you modified 203 | it, and giving a relevant date. 204 | 205 | b) The work must carry prominent notices stating that it is 206 | released under this License and any conditions added under section 207 | 7. This requirement modifies the requirement in section 4 to 208 | "keep intact all notices". 209 | 210 | c) You must license the entire work, as a whole, under this 211 | License to anyone who comes into possession of a copy. This 212 | License will therefore apply, along with any applicable section 7 213 | additional terms, to the whole of the work, and all its parts, 214 | regardless of how they are packaged. This License gives no 215 | permission to license the work in any other way, but it does not 216 | invalidate such permission if you have separately received it. 217 | 218 | d) If the work has interactive user interfaces, each must display 219 | Appropriate Legal Notices; however, if the Program has interactive 220 | interfaces that do not display Appropriate Legal Notices, your 221 | work need not make them do so. 222 | 223 | A compilation of a covered work with other separate and independent 224 | works, which are not by their nature extensions of the covered work, 225 | and which are not combined with it such as to form a larger program, 226 | in or on a volume of a storage or distribution medium, is called an 227 | "aggregate" if the compilation and its resulting copyright are not 228 | used to limit the access or legal rights of the compilation's users 229 | beyond what the individual works permit. Inclusion of a covered work 230 | in an aggregate does not cause this License to apply to the other 231 | parts of the aggregate. 232 | 233 | 6. Conveying Non-Source Forms. 234 | 235 | You may convey a covered work in object code form under the terms 236 | of sections 4 and 5, provided that you also convey the 237 | machine-readable Corresponding Source under the terms of this License, 238 | in one of these ways: 239 | 240 | a) Convey the object code in, or embodied in, a physical product 241 | (including a physical distribution medium), accompanied by the 242 | Corresponding Source fixed on a durable physical medium 243 | customarily used for software interchange. 244 | 245 | b) Convey the object code in, or embodied in, a physical product 246 | (including a physical distribution medium), accompanied by a 247 | written offer, valid for at least three years and valid for as 248 | long as you offer spare parts or customer support for that product 249 | model, to give anyone who possesses the object code either (1) a 250 | copy of the Corresponding Source for all the software in the 251 | product that is covered by this License, on a durable physical 252 | medium customarily used for software interchange, for a price no 253 | more than your reasonable cost of physically performing this 254 | conveying of source, or (2) access to copy the 255 | Corresponding Source from a network server at no charge. 256 | 257 | c) Convey individual copies of the object code with a copy of the 258 | written offer to provide the Corresponding Source. This 259 | alternative is allowed only occasionally and noncommercially, and 260 | only if you received the object code with such an offer, in accord 261 | with subsection 6b. 262 | 263 | d) Convey the object code by offering access from a designated 264 | place (gratis or for a charge), and offer equivalent access to the 265 | Corresponding Source in the same way through the same place at no 266 | further charge. You need not require recipients to copy the 267 | Corresponding Source along with the object code. If the place to 268 | copy the object code is a network server, the Corresponding Source 269 | may be on a different server (operated by you or a third party) 270 | that supports equivalent copying facilities, provided you maintain 271 | clear directions next to the object code saying where to find the 272 | Corresponding Source. Regardless of what server hosts the 273 | Corresponding Source, you remain obligated to ensure that it is 274 | available for as long as needed to satisfy these requirements. 275 | 276 | e) Convey the object code using peer-to-peer transmission, provided 277 | you inform other peers where the object code and Corresponding 278 | Source of the work are being offered to the general public at no 279 | charge under subsection 6d. 280 | 281 | A separable portion of the object code, whose source code is excluded 282 | from the Corresponding Source as a System Library, need not be 283 | included in conveying the object code work. 284 | 285 | A "User Product" is either (1) a "consumer product", which means any 286 | tangible personal property which is normally used for personal, family, 287 | or household purposes, or (2) anything designed or sold for incorporation 288 | into a dwelling. In determining whether a product is a consumer product, 289 | doubtful cases shall be resolved in favor of coverage. For a particular 290 | product received by a particular user, "normally used" refers to a 291 | typical or common use of that class of product, regardless of the status 292 | of the particular user or of the way in which the particular user 293 | actually uses, or expects or is expected to use, the product. A product 294 | is a consumer product regardless of whether the product has substantial 295 | commercial, industrial or non-consumer uses, unless such uses represent 296 | the only significant mode of use of the product. 297 | 298 | "Installation Information" for a User Product means any methods, 299 | procedures, authorization keys, or other information required to install 300 | and execute modified versions of a covered work in that User Product from 301 | a modified version of its Corresponding Source. The information must 302 | suffice to ensure that the continued functioning of the modified object 303 | code is in no case prevented or interfered with solely because 304 | modification has been made. 305 | 306 | If you convey an object code work under this section in, or with, or 307 | specifically for use in, a User Product, and the conveying occurs as 308 | part of a transaction in which the right of possession and use of the 309 | User Product is transferred to the recipient in perpetuity or for a 310 | fixed term (regardless of how the transaction is characterized), the 311 | Corresponding Source conveyed under this section must be accompanied 312 | by the Installation Information. But this requirement does not apply 313 | if neither you nor any third party retains the ability to install 314 | modified object code on the User Product (for example, the work has 315 | been installed in ROM). 316 | 317 | The requirement to provide Installation Information does not include a 318 | requirement to continue to provide support service, warranty, or updates 319 | for a work that has been modified or installed by the recipient, or for 320 | the User Product in which it has been modified or installed. Access to a 321 | network may be denied when the modification itself materially and 322 | adversely affects the operation of the network or violates the rules and 323 | protocols for communication across the network. 324 | 325 | Corresponding Source conveyed, and Installation Information provided, 326 | in accord with this section must be in a format that is publicly 327 | documented (and with an implementation available to the public in 328 | source code form), and must require no special password or key for 329 | unpacking, reading or copying. 330 | 331 | 7. Additional Terms. 332 | 333 | "Additional permissions" are terms that supplement the terms of this 334 | License by making exceptions from one or more of its conditions. 335 | Additional permissions that are applicable to the entire Program shall 336 | be treated as though they were included in this License, to the extent 337 | that they are valid under applicable law. If additional permissions 338 | apply only to part of the Program, that part may be used separately 339 | under those permissions, but the entire Program remains governed by 340 | this License without regard to the additional permissions. 341 | 342 | When you convey a copy of a covered work, you may at your option 343 | remove any additional permissions from that copy, or from any part of 344 | it. (Additional permissions may be written to require their own 345 | removal in certain cases when you modify the work.) You may place 346 | additional permissions on material, added by you to a covered work, 347 | for which you have or can give appropriate copyright permission. 348 | 349 | Notwithstanding any other provision of this License, for material you 350 | add to a covered work, you may (if authorized by the copyright holders of 351 | that material) supplement the terms of this License with terms: 352 | 353 | a) Disclaiming warranty or limiting liability differently from the 354 | terms of sections 15 and 16 of this License; or 355 | 356 | b) Requiring preservation of specified reasonable legal notices or 357 | author attributions in that material or in the Appropriate Legal 358 | Notices displayed by works containing it; or 359 | 360 | c) Prohibiting misrepresentation of the origin of that material, or 361 | requiring that modified versions of such material be marked in 362 | reasonable ways as different from the original version; or 363 | 364 | d) Limiting the use for publicity purposes of names of licensors or 365 | authors of the material; or 366 | 367 | e) Declining to grant rights under trademark law for use of some 368 | trade names, trademarks, or service marks; or 369 | 370 | f) Requiring indemnification of licensors and authors of that 371 | material by anyone who conveys the material (or modified versions of 372 | it) with contractual assumptions of liability to the recipient, for 373 | any liability that these contractual assumptions directly impose on 374 | those licensors and authors. 375 | 376 | All other non-permissive additional terms are considered "further 377 | restrictions" within the meaning of section 10. If the Program as you 378 | received it, or any part of it, contains a notice stating that it is 379 | governed by this License along with a term that is a further 380 | restriction, you may remove that term. If a license document contains 381 | a further restriction but permits relicensing or conveying under this 382 | License, you may add to a covered work material governed by the terms 383 | of that license document, provided that the further restriction does 384 | not survive such relicensing or conveying. 385 | 386 | If you add terms to a covered work in accord with this section, you 387 | must place, in the relevant source files, a statement of the 388 | additional terms that apply to those files, or a notice indicating 389 | where to find the applicable terms. 390 | 391 | Additional terms, permissive or non-permissive, may be stated in the 392 | form of a separately written license, or stated as exceptions; 393 | the above requirements apply either way. 394 | 395 | 8. Termination. 396 | 397 | You may not propagate or modify a covered work except as expressly 398 | provided under this License. Any attempt otherwise to propagate or 399 | modify it is void, and will automatically terminate your rights under 400 | this License (including any patent licenses granted under the third 401 | paragraph of section 11). 402 | 403 | However, if you cease all violation of this License, then your 404 | license from a particular copyright holder is reinstated (a) 405 | provisionally, unless and until the copyright holder explicitly and 406 | finally terminates your license, and (b) permanently, if the copyright 407 | holder fails to notify you of the violation by some reasonable means 408 | prior to 60 days after the cessation. 409 | 410 | Moreover, your license from a particular copyright holder is 411 | reinstated permanently if the copyright holder notifies you of the 412 | violation by some reasonable means, this is the first time you have 413 | received notice of violation of this License (for any work) from that 414 | copyright holder, and you cure the violation prior to 30 days after 415 | your receipt of the notice. 416 | 417 | Termination of your rights under this section does not terminate the 418 | licenses of parties who have received copies or rights from you under 419 | this License. If your rights have been terminated and not permanently 420 | reinstated, you do not qualify to receive new licenses for the same 421 | material under section 10. 422 | 423 | 9. Acceptance Not Required for Having Copies. 424 | 425 | You are not required to accept this License in order to receive or 426 | run a copy of the Program. Ancillary propagation of a covered work 427 | occurring solely as a consequence of using peer-to-peer transmission 428 | to receive a copy likewise does not require acceptance. However, 429 | nothing other than this License grants you permission to propagate or 430 | modify any covered work. These actions infringe copyright if you do 431 | not accept this License. Therefore, by modifying or propagating a 432 | covered work, you indicate your acceptance of this License to do so. 433 | 434 | 10. Automatic Licensing of Downstream Recipients. 435 | 436 | Each time you convey a covered work, the recipient automatically 437 | receives a license from the original licensors, to run, modify and 438 | propagate that work, subject to this License. You are not responsible 439 | for enforcing compliance by third parties with this License. 440 | 441 | An "entity transaction" is a transaction transferring control of an 442 | organization, or substantially all assets of one, or subdividing an 443 | organization, or merging organizations. If propagation of a covered 444 | work results from an entity transaction, each party to that 445 | transaction who receives a copy of the work also receives whatever 446 | licenses to the work the party's predecessor in interest had or could 447 | give under the previous paragraph, plus a right to possession of the 448 | Corresponding Source of the work from the predecessor in interest, if 449 | the predecessor has it or can get it with reasonable efforts. 450 | 451 | You may not impose any further restrictions on the exercise of the 452 | rights granted or affirmed under this License. For example, you may 453 | not impose a license fee, royalty, or other charge for exercise of 454 | rights granted under this License, and you may not initiate litigation 455 | (including a cross-claim or counterclaim in a lawsuit) alleging that 456 | any patent claim is infringed by making, using, selling, offering for 457 | sale, or importing the Program or any portion of it. 458 | 459 | 11. Patents. 460 | 461 | A "contributor" is a copyright holder who authorizes use under this 462 | License of the Program or a work on which the Program is based. The 463 | work thus licensed is called the contributor's "contributor version". 464 | 465 | A contributor's "essential patent claims" are all patent claims 466 | owned or controlled by the contributor, whether already acquired or 467 | hereafter acquired, that would be infringed by some manner, permitted 468 | by this License, of making, using, or selling its contributor version, 469 | but do not include claims that would be infringed only as a 470 | consequence of further modification of the contributor version. For 471 | purposes of this definition, "control" includes the right to grant 472 | patent sublicenses in a manner consistent with the requirements of 473 | this License. 474 | 475 | Each contributor grants you a non-exclusive, worldwide, royalty-free 476 | patent license under the contributor's essential patent claims, to 477 | make, use, sell, offer for sale, import and otherwise run, modify and 478 | propagate the contents of its contributor version. 479 | 480 | In the following three paragraphs, a "patent license" is any express 481 | agreement or commitment, however denominated, not to enforce a patent 482 | (such as an express permission to practice a patent or covenant not to 483 | sue for patent infringement). To "grant" such a patent license to a 484 | party means to make such an agreement or commitment not to enforce a 485 | patent against the party. 486 | 487 | If you convey a covered work, knowingly relying on a patent license, 488 | and the Corresponding Source of the work is not available for anyone 489 | to copy, free of charge and under the terms of this License, through a 490 | publicly available network server or other readily accessible means, 491 | then you must either (1) cause the Corresponding Source to be so 492 | available, or (2) arrange to deprive yourself of the benefit of the 493 | patent license for this particular work, or (3) arrange, in a manner 494 | consistent with the requirements of this License, to extend the patent 495 | license to downstream recipients. "Knowingly relying" means you have 496 | actual knowledge that, but for the patent license, your conveying the 497 | covered work in a country, or your recipient's use of the covered work 498 | in a country, would infringe one or more identifiable patents in that 499 | country that you have reason to believe are valid. 500 | 501 | If, pursuant to or in connection with a single transaction or 502 | arrangement, you convey, or propagate by procuring conveyance of, a 503 | covered work, and grant a patent license to some of the parties 504 | receiving the covered work authorizing them to use, propagate, modify 505 | or convey a specific copy of the covered work, then the patent license 506 | you grant is automatically extended to all recipients of the covered 507 | work and works based on it. 508 | 509 | A patent license is "discriminatory" if it does not include within 510 | the scope of its coverage, prohibits the exercise of, or is 511 | conditioned on the non-exercise of one or more of the rights that are 512 | specifically granted under this License. You may not convey a covered 513 | work if you are a party to an arrangement with a third party that is 514 | in the business of distributing software, under which you make payment 515 | to the third party based on the extent of your activity of conveying 516 | the work, and under which the third party grants, to any of the 517 | parties who would receive the covered work from you, a discriminatory 518 | patent license (a) in connection with copies of the covered work 519 | conveyed by you (or copies made from those copies), or (b) primarily 520 | for and in connection with specific products or compilations that 521 | contain the covered work, unless you entered into that arrangement, 522 | or that patent license was granted, prior to 28 March 2007. 523 | 524 | Nothing in this License shall be construed as excluding or limiting 525 | any implied license or other defenses to infringement that may 526 | otherwise be available to you under applicable patent law. 527 | 528 | 12. No Surrender of Others' Freedom. 529 | 530 | If conditions are imposed on you (whether by court order, agreement or 531 | otherwise) that contradict the conditions of this License, they do not 532 | excuse you from the conditions of this License. If you cannot convey a 533 | covered work so as to satisfy simultaneously your obligations under this 534 | License and any other pertinent obligations, then as a consequence you may 535 | not convey it at all. For example, if you agree to terms that obligate you 536 | to collect a royalty for further conveying from those to whom you convey 537 | the Program, the only way you could satisfy both those terms and this 538 | License would be to refrain entirely from conveying the Program. 539 | 540 | 13. Remote Network Interaction; Use with the GNU General Public License. 541 | 542 | Notwithstanding any other provision of this License, if you modify the 543 | Program, your modified version must prominently offer all users 544 | interacting with it remotely through a computer network (if your version 545 | supports such interaction) an opportunity to receive the Corresponding 546 | Source of your version by providing access to the Corresponding Source 547 | from a network server at no charge, through some standard or customary 548 | means of facilitating copying of software. This Corresponding Source 549 | shall include the Corresponding Source for any work covered by version 3 550 | of the GNU General Public License that is incorporated pursuant to the 551 | following paragraph. 552 | 553 | Notwithstanding any other provision of this License, you have 554 | permission to link or combine any covered work with a work licensed 555 | under version 3 of the GNU General Public License into a single 556 | combined work, and to convey the resulting work. The terms of this 557 | License will continue to apply to the part which is the covered work, 558 | but the work with which it is combined will remain governed by version 559 | 3 of the GNU General Public License. 560 | 561 | 14. Revised Versions of this License. 562 | 563 | The Free Software Foundation may publish revised and/or new versions of 564 | the GNU Affero General Public License from time to time. Such new versions 565 | will be similar in spirit to the present version, but may differ in detail to 566 | address new problems or concerns. 567 | 568 | Each version is given a distinguishing version number. If the 569 | Program specifies that a certain numbered version of the GNU Affero General 570 | Public License "or any later version" applies to it, you have the 571 | option of following the terms and conditions either of that numbered 572 | version or of any later version published by the Free Software 573 | Foundation. If the Program does not specify a version number of the 574 | GNU Affero General Public License, you may choose any version ever published 575 | by the Free Software Foundation. 576 | 577 | If the Program specifies that a proxy can decide which future 578 | versions of the GNU Affero General Public License can be used, that proxy's 579 | public statement of acceptance of a version permanently authorizes you 580 | to choose that version for the Program. 581 | 582 | Later license versions may give you additional or different 583 | permissions. However, no additional obligations are imposed on any 584 | author or copyright holder as a result of your choosing to follow a 585 | later version. 586 | 587 | 15. Disclaimer of Warranty. 588 | 589 | THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY 590 | APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT 591 | HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY 592 | OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, 593 | THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR 594 | PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM 595 | IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF 596 | ALL NECESSARY SERVICING, REPAIR OR CORRECTION. 597 | 598 | 16. Limitation of Liability. 599 | 600 | IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING 601 | WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS 602 | THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY 603 | GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE 604 | USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF 605 | DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD 606 | PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS), 607 | EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF 608 | SUCH DAMAGES. 609 | 610 | 17. Interpretation of Sections 15 and 16. 611 | 612 | If the disclaimer of warranty and limitation of liability provided 613 | above cannot be given local legal effect according to their terms, 614 | reviewing courts shall apply local law that most closely approximates 615 | an absolute waiver of all civil liability in connection with the 616 | Program, unless a warranty or assumption of liability accompanies a 617 | copy of the Program in return for a fee. 618 | 619 | END OF TERMS AND CONDITIONS 620 | 621 | How to Apply These Terms to Your New Programs 622 | 623 | If you develop a new program, and you want it to be of the greatest 624 | possible use to the public, the best way to achieve this is to make it 625 | free software which everyone can redistribute and change under these terms. 626 | 627 | To do so, attach the following notices to the program. It is safest 628 | to attach them to the start of each source file to most effectively 629 | state the exclusion of warranty; and each file should have at least 630 | the "copyright" line and a pointer to where the full notice is found. 631 | 632 | 633 | Copyright (C) 634 | 635 | This program is free software: you can redistribute it and/or modify 636 | it under the terms of the GNU Affero General Public License as published 637 | by the Free Software Foundation, either version 3 of the License, or 638 | (at your option) any later version. 639 | 640 | This program is distributed in the hope that it will be useful, 641 | but WITHOUT ANY WARRANTY; without even the implied warranty of 642 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 643 | GNU Affero General Public License for more details. 644 | 645 | You should have received a copy of the GNU Affero General Public License 646 | along with this program. If not, see . 647 | 648 | Also add information on how to contact you by electronic and paper mail. 649 | 650 | If your software can interact with users remotely through a computer 651 | network, you should also make sure that it provides a way for users to 652 | get its source. For example, if your program is a web application, its 653 | interface could display a "Source" link that leads users to an archive 654 | of the code. There are many ways you could offer source, and different 655 | solutions will be better for different programs; see section 13 for the 656 | specific requirements. 657 | 658 | You should also get your employer (if you work as a programmer) or school, 659 | if any, to sign a "copyright disclaimer" for the program, if necessary. 660 | For more information on this, and how to apply and follow the GNU AGPL, see 661 | . 662 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![CI](https://github.com/Dbuggerx/react-pokeapi/workflows/CI/badge.svg?branch=master) 2 | 3 | **Please leave a star if you like it!** 4 | 5 | # Features 6 | 7 | - Retrieves data from the [Pokémon REST API](https://github.com/PokeAPI/pokeapi); 8 | - _CSS Grid_ and _Flexbox_ for responsive layout; 9 | - Styles created using [SASS](https://sass-lang.com/) with the [BEM methodology](http://getbem.com/); 10 | - [React Router v6](https://reactrouter.com/docs/en/v6) to display details in a different route when an item is clicked; 11 | - Tests implemented using [Jest](https://jestjs.io/), [React Testing Library](https://testing-library.com/docs/react-testing-library/intro) and [MSW](https://mswjs.io/); 12 | - Static type checking using [Typescript](https://www.typescriptlang.org/) and [ESLint](https://eslint.org/) ; 13 | - [Redux](https://redux.js.org/) and [Redux Toolkit](https://redux-toolkit.js.org/) for strongly typed state management and code simplification; 14 | - [Storybook](https://storybook.js.org/) to develop UI components in isolation; 15 | - Semantic HTML; 16 | - HTTP requests cancelation; 17 | - [Code splitting](https://reactjs.org/docs/code-splitting.html) specific routes (components and Redux reducers); 18 | - [Trie data structure](https://en.wikipedia.org/wiki/Trie) for optimizing the autocomplete for searching names; 19 | - Clean code and SOLID oriented. 20 | 21 | --- 22 | 23 | [Checkout my LinkedIn profile!](https://www.linkedin.com/in/danilocestari) 24 | -------------------------------------------------------------------------------- /craco.config.js: -------------------------------------------------------------------------------- 1 | const { when } = require("@craco/craco"); 2 | const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer"); 3 | 4 | module.exports = { 5 | webpack: { 6 | plugins: when( 7 | Boolean(process.env.ANALYZE), 8 | () => [new BundleAnalyzerPlugin()], 9 | [] 10 | ) 11 | } 12 | }; 13 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-pokeapi", 3 | "version": "2.0.0", 4 | "license": "AGPL-3.0", 5 | "description": "Simple application made with React, Redux, etc to interact with the PokeApi v2", 6 | "homepage": "https://dbuggerx.github.io/react-pokeapi", 7 | "private": true, 8 | "engines": { 9 | "node": ">=20.10.0" 10 | }, 11 | "packageManager": "pnpm@8.12.1", 12 | "dependencies": { 13 | "@fortawesome/fontawesome-svg-core": "^6.2.0", 14 | "@fortawesome/free-solid-svg-icons": "^6.1.1", 15 | "@fortawesome/react-fontawesome": "^0.2.0", 16 | "@reduxjs/toolkit": "^2.0.1", 17 | "@testing-library/jest-dom": "^5.16.4", 18 | "@testing-library/react": "^13.1.1", 19 | "@testing-library/user-event": "^14.1.1", 20 | "@types/jest": "^29.2.0", 21 | "@types/node": "^18.11.7", 22 | "@types/react": "^18.0.8", 23 | "@types/react-dom": "^18.0.3", 24 | "pokemon": "^2.3.3", 25 | "react": "^18.1.0", 26 | "react-dom": "^18.1.0", 27 | "react-redux": "^9.0.4", 28 | "react-router-dom": "6", 29 | "react-scripts": "5.0.1", 30 | "react-transition-group": "^4.4.2", 31 | "typescript": "^4.6.4", 32 | "web-vitals": "^3.0.4" 33 | }, 34 | "scripts": { 35 | "start": "react-scripts start", 36 | "build": "react-scripts build", 37 | "test": "react-scripts test", 38 | "test-debug": "NODE_OPTIONS='--inspect-brk' npm test -- --runInBand", 39 | "eject": "react-scripts eject", 40 | "lint": "eslint src --ext .js,.jsx,.ts,.tsx", 41 | "analyze": "cross-env ANALYZE=true craco build", 42 | "storybook": "start-storybook -p 6006 -s public", 43 | "build-storybook": "build-storybook -s public" 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 | "devDependencies": { 58 | "@craco/craco": "^6.4.3", 59 | "@storybook/addon-actions": "^6.4.22", 60 | "@storybook/addon-essentials": "^6.4.22", 61 | "@storybook/addon-interactions": "^6.4.22", 62 | "@storybook/addon-links": "^6.4.22", 63 | "@storybook/builder-webpack5": "^6.4.22", 64 | "@storybook/manager-webpack5": "^6.4.22", 65 | "@storybook/node-logger": "^6.4.22", 66 | "@storybook/preset-create-react-app": "^4.1.0", 67 | "@storybook/react": "^6.4.22", 68 | "@storybook/testing-library": "^0.0.13", 69 | "@types/react-transition-group": "^4.4.4", 70 | "@types/testing-library__jest-dom": "^5.14.3", 71 | "cross-env": "^7.0.3", 72 | "msw": "^0.47.4", 73 | "pokenode-ts": "^1.13.1", 74 | "sass": "^1.51.0", 75 | "webpack-bundle-analyzer": "^4.5.0" 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dbuggerx/react-pokeapi/2a208a4ba241e7b7ad36b4ec3ad57930d73b8a9a/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 13 | 14 | 18 | 19 | 28 | Danilo Cestari - React-PokeApi 29 | 30 | 31 | 32 |
33 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dbuggerx/react-pokeapi/2a208a4ba241e7b7ad36b4ec3ad57930d73b8a9a/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dbuggerx/react-pokeapi/2a208a4ba241e7b7ad36b4ec3ad57930d73b8a9a/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/components/app/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Provider } from "react-redux"; 3 | import { buildStore } from "../../redux/store"; 4 | import { Routes, Route, Navigate, useLocation } from "react-router-dom"; 5 | import { CSSTransition, SwitchTransition } from "react-transition-group"; 6 | import { InjectSliceContext } from "../../redux/inject-slice-context"; 7 | import Layout from "../../components/layout"; 8 | import Details from "../../pages/details"; 9 | import List from "../../pages/list"; 10 | import { pokemonDetailsRoute } from "../../pages/routes"; 11 | import "./style.scss"; 12 | 13 | function App() { 14 | const { store, injectSlice } = React.useMemo(() => buildStore(), []); 15 | const location = useLocation(); 16 | const ref = React.useRef(null); 17 | 18 | return ( 19 | 20 | 21 | 22 | { 29 | ref.current?.addEventListener("transitionend", (evt) => { 30 | done(); 31 | }); 32 | }} 33 | > 34 | 35 | 39 | } 40 | > 41 | } /> 42 | } /> 43 | } /> 44 | 45 | 46 | 47 | 48 | 49 | 50 | ); 51 | } 52 | 53 | export default App; 54 | -------------------------------------------------------------------------------- /src/components/app/style.scss: -------------------------------------------------------------------------------- 1 | .route { 2 | &__transition { 3 | &-enter-active, 4 | &-exit-active { 5 | transition: opacity 0.2s; 6 | } 7 | &-enter { 8 | opacity: 0; 9 | } 10 | &-enter-active { 11 | z-index: 2; 12 | opacity: 1; 13 | } 14 | &-exit { 15 | opacity: 1; 16 | } 17 | &-exit-active { 18 | opacity: 0; 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/components/error-message/ErrorMessage.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, Story } from "@storybook/react"; 2 | import React from "react"; 3 | import ErrorMessage from "."; 4 | 5 | export default { 6 | title: "ErrorMessage", 7 | component: ErrorMessage, 8 | } as Meta; 9 | 10 | type Props = React.ComponentProps; 11 | 12 | export const Default: Story = (props) => ( 13 | 14 | ); 15 | 16 | Default.args = { 17 | message: "Test", 18 | }; 19 | -------------------------------------------------------------------------------- /src/components/error-message/index.tsx: -------------------------------------------------------------------------------- 1 | import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons"; 2 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; 3 | import "./style.scss"; 4 | 5 | export default function ErrorMessage({ message }: { message: string }) { 6 | return ( 7 |
8 | 9 | {message} 10 |
11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /src/components/error-message/style.scss: -------------------------------------------------------------------------------- 1 | .error-message { 2 | font-family: "Open Sans", sans-serif; 3 | color: red; 4 | display: flex; 5 | align-items: center; 6 | justify-content: center; 7 | padding: 1em 0; 8 | background-color: white; 9 | 10 | svg { 11 | margin-right: 0.2em; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/components/header/hooks.ts: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export function useHasScrolled() { 4 | const [scrolled, setScrolled] = React.useState(false); 5 | 6 | React.useLayoutEffect(() => { 7 | function onScroll(evt: Event) { 8 | setScrolled((evt.target as HTMLDivElement).scrollTop > 0); 9 | } 10 | document.addEventListener("scroll", onScroll, true); 11 | 12 | return () => { 13 | document.removeEventListener("scroll", onScroll, true); 14 | }; 15 | }, []); 16 | 17 | React.useLayoutEffect(() => { 18 | const observer = new MutationObserver((mutationsList, observer) => { 19 | setScrolled(false); 20 | }); 21 | 22 | observer.observe(document.body, { childList: true, subtree: true }); 23 | 24 | return () => { 25 | observer.disconnect(); 26 | }; 27 | }, []); 28 | 29 | return scrolled; 30 | } 31 | -------------------------------------------------------------------------------- /src/components/header/index.tsx: -------------------------------------------------------------------------------- 1 | import { faArrowLeft } from "@fortawesome/free-solid-svg-icons"; 2 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; 3 | import { Route, Routes } from "react-router-dom"; 4 | import PokemonSearch from "../../features/pokemon-names/pokemon-search"; 5 | import { useHasScrolled } from "./hooks"; 6 | import { pokemonDetailsRoute } from "../../pages/routes"; 7 | import "./style.scss"; 8 | 9 | export default function Header(props: { goBack: () => void }) { 10 | const scrolled = useHasScrolled(); 11 | 12 | return ( 13 |
14 | 20 | PokeAPI 24 | 25 |
26 | 27 | 35 | 36 | 37 | } 38 | /> 39 | 40 | 41 |
42 |
43 | ); 44 | } 45 | -------------------------------------------------------------------------------- /src/components/header/style.scss: -------------------------------------------------------------------------------- 1 | .header { 2 | flex: 0; 3 | display: flex; 4 | flex-flow: row nowrap; 5 | align-items: center; 6 | justify-content: space-between; 7 | position: sticky; 8 | top: -1px; 9 | margin: 0; 10 | padding: 0 var(--layout-padding); 11 | background: var(--accent-color); 12 | border-bottom: solid 6px #000; 13 | 14 | &__logo { 15 | width: 15em; 16 | margin: 0.5em; 17 | margin-right: 2em; 18 | transition: width, 0.5s; 19 | } 20 | 21 | &__search { 22 | margin: 1em 0; 23 | display: flex; 24 | flex-flow: row nowrap; 25 | align-items: center; 26 | } 27 | 28 | &__back-button { 29 | color: var(--bg-color); 30 | margin-right: 0.5em; 31 | cursor: pointer; 32 | 33 | &, 34 | &:focus { 35 | background: none; 36 | border: none; 37 | outline: none; 38 | } 39 | 40 | &:hover { 41 | color: var(--accent-color-highlight); 42 | } 43 | } 44 | 45 | &--scrolled { 46 | .header__logo { 47 | width: 7em; 48 | } 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /src/components/layout/background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dbuggerx/react-pokeapi/2a208a4ba241e7b7ad36b4ec3ad57930d73b8a9a/src/components/layout/background.jpg -------------------------------------------------------------------------------- /src/components/layout/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Outlet, useNavigate } from "react-router-dom"; 3 | import Header from "../header"; 4 | import "./style.scss"; 5 | 6 | export default React.forwardRef( 7 | function Layout({ className }, ref) { 8 | const navigate = useNavigate(); 9 | return ( 10 |
11 |
12 |
{ 14 | navigate("/"); 15 | }} 16 | /> 17 |
18 | 19 | 20 |
21 | ); 22 | } 23 | ); 24 | -------------------------------------------------------------------------------- /src/components/layout/style.scss: -------------------------------------------------------------------------------- 1 | .app-layout { 2 | display: flex; 3 | flex-flow: column nowrap; 4 | min-height: 100%; 5 | max-height: 100%; 6 | background: url(./background.jpg) #d1e5ff; 7 | } 8 | 9 | body { 10 | font-family: "Open Sans", sans-serif; 11 | } 12 | 13 | html, 14 | body, 15 | #root { 16 | margin: 0; 17 | padding: 0; 18 | height: 100%; 19 | } 20 | 21 | #root { 22 | height: 100%; 23 | overflow: hidden; 24 | } 25 | 26 | ::-webkit-scrollbar { 27 | width: 0.8em; 28 | } 29 | 30 | ::-webkit-scrollbar-track { 31 | background: none; 32 | } 33 | 34 | ::-webkit-scrollbar-thumb { 35 | background: var(--accent-color); 36 | border-radius: 15px; 37 | } 38 | 39 | :root { 40 | --accent-color: #346cce; 41 | --accent-text-color: #fff; 42 | --accent-color-highlight: #6091e7; 43 | --bg-color: #232f3e; 44 | --layout-padding: 4vmin; 45 | 46 | scrollbar-color: var(--accent-color) transparent; 47 | scrollbar-width: thin; 48 | } 49 | 50 | ::-webkit-scrollbar-thumb:hover { 51 | background: var(--accent-color-highlight); 52 | } 53 | -------------------------------------------------------------------------------- /src/components/loading-spinner/index.tsx: -------------------------------------------------------------------------------- 1 | import { faSpinner } from "@fortawesome/free-solid-svg-icons"; 2 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; 3 | import "./style.scss"; 4 | 5 | export default function LoadingSpinner() { 6 | return ( 7 |
8 | 9 |
10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /src/components/loading-spinner/loading-spinner.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, Story } from "@storybook/react"; 2 | import LoadingSpinner from "."; 3 | 4 | export default { 5 | title: "LoadingSpinner", 6 | component: LoadingSpinner, 7 | parameters: { 8 | layout: "centered", 9 | }, 10 | } as Meta; 11 | 12 | export const Default: Story = () => ; 13 | 14 | Default.parameters = { 15 | controls: { hideNoControlsWarning: true }, 16 | }; 17 | -------------------------------------------------------------------------------- /src/components/loading-spinner/style.scss: -------------------------------------------------------------------------------- 1 | .loading-spinner { 2 | color: orangered; 3 | padding: 1em; 4 | height: 100%; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | flex: 1 0; 9 | 10 | svg { 11 | @keyframes spin { 12 | from { 13 | transform: rotate(0deg); 14 | } 15 | 16 | to { 17 | transform: rotate(360deg); 18 | } 19 | } 20 | 21 | animation: spin 1.5s linear infinite; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/components/pokemon-type-pill/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; 3 | import type { IconDefinition } from "@fortawesome/free-solid-svg-icons"; 4 | import { 5 | faFistRaised, 6 | faDove, 7 | faSkullCrossbones, 8 | faMountain, 9 | faGem, 10 | faBug, 11 | faGhost, 12 | faSeedling, 13 | faFire, 14 | faTint, 15 | faBolt, 16 | faDumbbell, 17 | faHatWizard, 18 | faIcicles, 19 | faDragon, 20 | faCircle, 21 | faMagic, 22 | faQuestionCircle, 23 | faMehBlank, 24 | faDotCircle, 25 | } from "@fortawesome/free-solid-svg-icons"; 26 | import "./style.scss"; 27 | 28 | export default function PokemonTypePill({ 29 | pokemonType, 30 | compact, 31 | }: { 32 | pokemonType: string; 33 | compact?: boolean; 34 | }) { 35 | let icon: IconDefinition | null = null; 36 | let classModifier = ""; 37 | 38 | switch (pokemonType) { 39 | case "fighting": 40 | icon = faFistRaised; 41 | classModifier = "pokemon-type-pill--fighting"; 42 | break; 43 | case "flying": 44 | icon = faDove; 45 | classModifier = "pokemon-type-pill--flying"; 46 | break; 47 | case "poison": 48 | icon = faSkullCrossbones; 49 | classModifier = "pokemon-type-pill--poison"; 50 | break; 51 | case "ground": 52 | icon = faMountain; 53 | classModifier = "pokemon-type-pill--ground"; 54 | break; 55 | case "rock": 56 | icon = faGem; 57 | classModifier = "pokemon-type-pill--rock"; 58 | break; 59 | case "bug": 60 | icon = faBug; 61 | classModifier = "pokemon-type-pill--bug"; 62 | break; 63 | case "ghost": 64 | icon = faGhost; 65 | classModifier = "pokemon-type-pill--ghost"; 66 | break; 67 | case "steel": 68 | icon = faDumbbell; 69 | classModifier = "pokemon-type-pill--steel"; 70 | break; 71 | case "fire": 72 | icon = faFire; 73 | classModifier = "pokemon-type-pill--fire"; 74 | break; 75 | case "water": 76 | icon = faTint; 77 | classModifier = "pokemon-type-pill--water"; 78 | break; 79 | case "grass": 80 | icon = faSeedling; 81 | classModifier = "pokemon-type-pill--grass"; 82 | break; 83 | case "electric": 84 | icon = faBolt; 85 | classModifier = "pokemon-type-pill--electric"; 86 | break; 87 | case "psychic": 88 | icon = faHatWizard; 89 | classModifier = "pokemon-type-pill--psychic"; 90 | break; 91 | case "ice": 92 | icon = faIcicles; 93 | classModifier = "pokemon-type-pill--ice"; 94 | break; 95 | case "dragon": 96 | icon = faDragon; 97 | classModifier = "pokemon-type-pill--dragon"; 98 | break; 99 | case "dark": 100 | icon = faCircle; 101 | classModifier = "pokemon-type-pill--dark"; 102 | break; 103 | case "fairy": 104 | icon = faMagic; 105 | classModifier = "pokemon-type-pill--fairy"; 106 | break; 107 | case "unknown": 108 | icon = faQuestionCircle; 109 | classModifier = "pokemon-type-pill--unknown"; 110 | break; 111 | case "shadow": 112 | icon = faMehBlank; 113 | classModifier = "pokemon-type-pill--shadow"; 114 | break; 115 | default: 116 | icon = faDotCircle; 117 | } 118 | return ( 119 |
125 | {icon && ( 126 |
127 | 128 |
129 | )} 130 | {!compact && pokemonType} 131 |
132 | ); 133 | } 134 | -------------------------------------------------------------------------------- /src/components/pokemon-type-pill/pokemon-type-pill.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, Story } from "@storybook/react"; 2 | import PokemonTypePill from "."; 3 | 4 | export default { 5 | title: "PokemonTypePill", 6 | component: PokemonTypePill, 7 | argTypes: { 8 | pokemonType: { 9 | control: { 10 | type: "select", 11 | options: [ 12 | "fighting", 13 | "flying", 14 | "poison", 15 | "ground", 16 | "rock", 17 | "bug", 18 | "ghost", 19 | "steel", 20 | "fire", 21 | "water", 22 | "grass", 23 | "electric", 24 | "psychic", 25 | "ice", 26 | "dragon", 27 | "dark", 28 | "fairy", 29 | "unknown", 30 | "shadow", 31 | ], 32 | }, 33 | }, 34 | }, 35 | parameters: { 36 | layout: "centered", 37 | }, 38 | } as Meta; 39 | 40 | type Props = React.ComponentProps; 41 | 42 | export const Default: Story = (props) => ; 43 | 44 | Default.args = { 45 | pokemonType: "electric", 46 | }; 47 | -------------------------------------------------------------------------------- /src/components/pokemon-type-pill/style.scss: -------------------------------------------------------------------------------- 1 | .pokemon-type-pill { 2 | font-family: "Open Sans", sans-serif; 3 | display: inline-block; 4 | background-color: #9b9b9b; 5 | padding: 0.3em 0.8em; 6 | border-radius: 2em; 7 | white-space: nowrap; 8 | margin: 0.2em; 9 | color: white; 10 | font-weight: bold; 11 | 12 | --icon-margin: 0.3em; 13 | 14 | &__icon { 15 | display: inline-block; 16 | margin-right: var(--icon-margin); 17 | } 18 | 19 | &--compact { 20 | --icon-margin: 0; 21 | } 22 | 23 | &--fighting { 24 | background-color: #a89737; 25 | } 26 | 27 | &--flying { 28 | background-color: #0094b9; 29 | } 30 | 31 | &--poison { 32 | background-color: #9c1df0; 33 | } 34 | 35 | &--ground { 36 | background-color: #6d4510; 37 | } 38 | 39 | &--rock { 40 | background-color: #cd7605; 41 | } 42 | 43 | &--bug { 44 | background-color: #009089; 45 | } 46 | 47 | &--ghost { 48 | background-color: #094986; 49 | } 50 | 51 | &--steel { 52 | background-color: #5a5a5a; 53 | } 54 | 55 | &--fire { 56 | background-color: #c72205; 57 | } 58 | 59 | &--water { 60 | background-color: #00d3f8; 61 | } 62 | 63 | &--grass { 64 | background-color: #16b31e; 65 | } 66 | 67 | &--electric { 68 | background-color: #ffd300; 69 | color: #846101; 70 | } 71 | 72 | &--psychic { 73 | background-color: #9f00ad; 74 | } 75 | 76 | &--ice { 77 | background-color: #3acbff; 78 | } 79 | 80 | &--dragon { 81 | background-color: #ff5e00; 82 | } 83 | 84 | &--dark { 85 | background-color: #2c2c2c; 86 | color: white; 87 | } 88 | 89 | &--fairy { 90 | background-color: #f0d; 91 | } 92 | 93 | &--unknown { 94 | background-color: #797979; 95 | } 96 | 97 | &--shadow { 98 | background-color: #3f3f3f; 99 | } 100 | } 101 | -------------------------------------------------------------------------------- /src/components/resource-state/index.tsx: -------------------------------------------------------------------------------- 1 | import ErrorMessage from "../error-message"; 2 | import LoadingSpinner from "../loading-spinner"; 3 | import type { LoadableResource } from "../../redux/types"; 4 | 5 | export default function ResourceState({ 6 | state, 7 | }: { 8 | state: LoadableResource | undefined; 9 | }) { 10 | if (!state) return null; 11 | if (state.error) return ; 12 | if (state.loading) return ; 13 | if (!state.data) return ; 14 | return null; 15 | } 16 | -------------------------------------------------------------------------------- /src/components/resource-state/resource-state.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, Story } from "@storybook/react"; 2 | import React from "react"; 3 | import ResourceState from "."; 4 | 5 | export default { 6 | title: "ResourceState", 7 | component: ResourceState, 8 | parameters: { 9 | layout: "centered", 10 | }, 11 | } as Meta; 12 | 13 | type Props = React.ComponentProps; 14 | 15 | export const Default: Story = (props) => ; 16 | 17 | Default.args = { 18 | state: { 19 | loading: true, 20 | error: true, 21 | data: "data", 22 | }, 23 | }; 24 | -------------------------------------------------------------------------------- /src/features/pokemon-details/pokemon-details-layout/hooks.ts: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export function useThemeColorEffect(color: string | undefined) { 4 | React.useEffect(() => { 5 | if (!color) return; 6 | const originalAccentColor = getComputedStyle( 7 | document.documentElement 8 | ).getPropertyValue("--accent-color"); 9 | 10 | const originalAccentTextColor = getComputedStyle( 11 | document.documentElement 12 | ).getPropertyValue("--accent-text-color"); 13 | 14 | const originalAccentColorHighlight = getComputedStyle( 15 | document.documentElement 16 | ).getPropertyValue("--accent-color-highlight"); 17 | 18 | switch (color) { 19 | case "black": 20 | document.documentElement.style.setProperty("--accent-text-color", "white"); 21 | document.documentElement.style.setProperty("--accent-color", "black"); 22 | document.documentElement.style.setProperty("--accent-color-highlight", "grey"); 23 | break; 24 | case "blue": 25 | document.documentElement.style.setProperty("--accent-color", "#3a86ff"); 26 | document.documentElement.style.setProperty("--accent-color-highlight", "#2366D1"); 27 | break; 28 | case "brown": 29 | document.documentElement.style.setProperty("--accent-color", "#a12727"); 30 | document.documentElement.style.setProperty("--accent-color-highlight", "#831313"); 31 | break; 32 | case "gray": 33 | document.documentElement.style.setProperty("--accent-color", "#525252"); 34 | document.documentElement.style.setProperty("--accent-color-highlight", "#362d2d"); 35 | break; 36 | case "green": 37 | document.documentElement.style.setProperty("--accent-color", "#77c360"); 38 | document.documentElement.style.setProperty("--accent-color-highlight", "#498e35"); 39 | break; 40 | case "pink": 41 | document.documentElement.style.setProperty("--accent-color", "#ff8196"); 42 | document.documentElement.style.setProperty("--accent-color-highlight", "#cc4c61"); 43 | break; 44 | case "purple": 45 | document.documentElement.style.setProperty("--accent-color", "#800080"); 46 | document.documentElement.style.setProperty("--accent-color-highlight", "#620b62"); 47 | break; 48 | case "red": 49 | document.documentElement.style.setProperty("--accent-color", "#f53e2a"); 50 | document.documentElement.style.setProperty("--accent-color-highlight", "#b72a1a"); 51 | break; 52 | case "white": 53 | document.documentElement.style.setProperty("--accent-text-color", "black"); 54 | document.documentElement.style.setProperty("--accent-color", "white"); 55 | document.documentElement.style.setProperty("--accent-color-highlight", "grey"); 56 | break; 57 | case "yellow": 58 | document.documentElement.style.setProperty("--accent-text-color", "#695f00"); 59 | document.documentElement.style.setProperty("--accent-color", "#fffb10"); 60 | document.documentElement.style.setProperty("--accent-color-highlight", "#d1cc3e"); 61 | break; 62 | } 63 | 64 | syncThemeColorWithAccentColor(); 65 | 66 | return () => { 67 | document.documentElement.style.setProperty( 68 | "--accent-text-color", 69 | originalAccentTextColor 70 | ); 71 | document.documentElement.style.setProperty("--accent-color", originalAccentColor); 72 | document.documentElement.style.setProperty( 73 | "--accent-color-highlight", 74 | originalAccentColorHighlight 75 | ); 76 | 77 | syncThemeColorWithAccentColor(); 78 | }; 79 | }, [color]); 80 | } 81 | 82 | function syncThemeColorWithAccentColor() { 83 | document 84 | .querySelector("meta[name=theme-color]") 85 | ?.setAttribute( 86 | "content", 87 | getComputedStyle(document.documentElement).getPropertyValue("--accent-color") 88 | ); 89 | } 90 | -------------------------------------------------------------------------------- /src/features/pokemon-details/pokemon-details-layout/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useThemeColorEffect } from "./hooks"; 3 | import "./style.scss"; 4 | 5 | type Props = { 6 | pokemonName: string; 7 | pokemonId: number; 8 | images: React.ReactElement; 9 | color: string | undefined; 10 | types: React.ReactElement; 11 | descriptionTitle: string | undefined; 12 | description: React.ReactElement; 13 | profile: React.ReactElement; 14 | abilities: React.ReactElement; 15 | stats: React.ReactElement; 16 | backgroundImageUrl: string | null | undefined; 17 | }; 18 | 19 | export default function PokemonDetailsLayout(props: Props) { 20 | useThemeColorEffect(props.color); 21 | 22 | return ( 23 |
24 |
25 |
26 |

{props.pokemonName}

27 | 28 |
29 |
{props.images}
30 |
{props.types}
31 |
32 |
33 | {props.descriptionTitle} 34 |
35 |
36 | {props.description} 37 |
38 |
39 |
40 |
Profile
41 | {props.profile} 42 |
43 |
44 |
Abilities
45 | {props.abilities} 46 |
47 |
48 |
Stats
49 | {props.stats} 50 |
51 |
59 |
60 |
61 | ); 62 | } 63 | -------------------------------------------------------------------------------- /src/features/pokemon-details/pokemon-details-layout/pokemon-details-layout.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, Story } from "@storybook/react"; 2 | import PokemonDetailsLayout from "."; 3 | 4 | type Props = React.ComponentProps; 5 | 6 | export default { 7 | title: "PokemonDetailsLayout", 8 | component: PokemonDetailsLayout, 9 | argTypes: { 10 | images: { 11 | table: { 12 | disable: true, 13 | }, 14 | }, 15 | description: { 16 | table: { 17 | disable: true, 18 | }, 19 | }, 20 | types: { 21 | table: { 22 | disable: true, 23 | }, 24 | }, 25 | profile: { 26 | table: { 27 | disable: true, 28 | }, 29 | }, 30 | abilities: { 31 | table: { 32 | disable: true, 33 | }, 34 | }, 35 | stats: { 36 | table: { 37 | disable: true, 38 | }, 39 | }, 40 | color: { 41 | control: { 42 | type: "select", 43 | options: [ 44 | "black", 45 | "blue", 46 | "brown", 47 | "gray", 48 | "green", 49 | "pink", 50 | "purple", 51 | "red", 52 | "white", 53 | "yellow", 54 | ], 55 | }, 56 | }, 57 | backgroundImageUrl: { 58 | control: { 59 | type: "select", 60 | options: [ 61 | "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/9.svg", 62 | "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/6.svg", 63 | ], 64 | }, 65 | }, 66 | }, 67 | } as Meta; 68 | 69 | function MockSection({ children }: { children: React.ReactNode }) { 70 | return ( 71 |
81 | {children} 82 |
83 | ); 84 | } 85 | 86 | export const Default: Story = (props) => ( 87 | 88 | ); 89 | 90 | Default.args = { 91 | color: "blue", 92 | pokemonId: 123, 93 | pokemonName: "the pokemon name", 94 | descriptionTitle: "Description title", 95 | images: Images, 96 | description: Description, 97 | types: Types, 98 | profile: Profile, 99 | abilities: abilities, 100 | stats: stats, 101 | backgroundImageUrl: 102 | "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/9.svg", 103 | }; 104 | -------------------------------------------------------------------------------- /src/features/pokemon-details/pokemon-details-layout/style.scss: -------------------------------------------------------------------------------- 1 | .pokemon-details { 2 | font-family: "Open Sans", sans-serif; 3 | font-weight: 700; 4 | border-radius: 1.5em; 5 | color: var(--accent-text-color); 6 | position: relative; 7 | border: solid 4px white; 8 | filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.2)); 9 | background-color: var(--accent-color); 10 | overflow: hidden; 11 | display: flex; 12 | margin: var(--layout-padding, 1em); 13 | padding: calc(var(--layout-padding, 1em) / 2); 14 | scrollbar-color: var(--accent-color-highlight) transparent; 15 | 16 | ::-webkit-scrollbar-thumb { 17 | background: var(--accent-color-highlight); 18 | } 19 | 20 | &__content { 21 | padding: calc(var(--layout-padding) / 2); 22 | width: 100%; 23 | overflow: auto; 24 | display: grid; 25 | grid-template: 26 | "header header header" max-content 27 | "images images images" max-content 28 | "description description types" 1fr 29 | "profile abilities stats" max-content / auto auto minmax( 30 | 15vmax, 31 | max-content 32 | ); 33 | gap: 2em; 34 | 35 | @media (max-width: 625px) { 36 | grid-template: 37 | "header" max-content 38 | "images" max-content 39 | "types" max-content 40 | "description" 1fr 41 | "profile" max-content 42 | "abilities" max-content 43 | "stats" max-content / auto; 44 | } 45 | } 46 | 47 | ul { 48 | list-style-type: circle; 49 | } 50 | 51 | &__background { 52 | background-repeat: no-repeat; 53 | background-position: 85% 85%; 54 | background-size: 50%; 55 | background-attachment: fixed; 56 | bottom: 0; 57 | right: 0; 58 | width: 100%; 59 | height: 100%; 60 | position: absolute; 61 | z-index: -1; 62 | filter: opacity(0.15); 63 | 64 | @media (max-width: 625px) { 65 | background-size: 100%; 66 | background-position: center; 67 | } 68 | } 69 | 70 | &__abilities { 71 | grid-area: abilities; 72 | } 73 | 74 | &__stats { 75 | grid-area: stats; 76 | } 77 | 78 | &__description { 79 | grid-area: description; 80 | padding: 0; 81 | margin: 0; 82 | } 83 | 84 | &__descrition-text { 85 | padding: 1em 0 0 1em; 86 | line-height: 1.5em; 87 | } 88 | 89 | &__profile { 90 | grid-area: profile; 91 | } 92 | 93 | &__header { 94 | grid-area: header; 95 | text-transform: uppercase; 96 | display: flex; 97 | align-items: center; 98 | justify-content: space-between; 99 | font-size: 1.5em; 100 | font-weight: 800; 101 | } 102 | 103 | &__name { 104 | font-size: 1.5em; 105 | margin: 0; 106 | } 107 | 108 | &__status { 109 | grid-area: header; 110 | flex: 1 0 auto; 111 | display: flex; 112 | align-items: center; 113 | justify-content: center; 114 | } 115 | 116 | &__images { 117 | grid-area: images; 118 | flex: 1 0 auto; 119 | display: flex; 120 | flex-flow: row wrap; 121 | justify-content: center; 122 | align-content: center; 123 | background: white; 124 | padding: 2em 0; 125 | color: black; 126 | border-radius: 1em; 127 | } 128 | 129 | &__types { 130 | grid-area: types; 131 | display: flex; 132 | flex-flow: row wrap; 133 | align-items: flex-start; 134 | justify-content: flex-end; 135 | align-content: flex-start; 136 | 137 | @media (min-width: 625px) { 138 | > * { 139 | position: sticky; 140 | top: 0; 141 | } 142 | } 143 | } 144 | 145 | &__section-title { 146 | font-size: 1.5em; 147 | padding: 0 0.8em; 148 | border-radius: 1em; 149 | background-color: var(--accent-text-color, white); 150 | color: var(--accent-color); 151 | opacity: 0.8; 152 | } 153 | } 154 | -------------------------------------------------------------------------------- /src/features/pokemon-details/pokemon-info/hooks.ts: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useAppDispatch, useAppSelector } from "../../../redux/hooks"; 3 | import { actions, selectors as pokemonDetailsSelectors } from "../slice"; 4 | import { selectors as pokemonPageSelectors } from "../../pokemon-page/slice"; 5 | 6 | export function usePokemonInfo(pokemonName: string | undefined) { 7 | const dispatch = useAppDispatch(); 8 | const error = useAppSelector(pokemonDetailsSelectors.error); 9 | const pokemonInfoSelectors = React.useMemo( 10 | () => pokemonPageSelectors.makeInfoSelectors(), 11 | [] 12 | ); 13 | const speciesId = useAppSelector((state) => 14 | pokemonName ? pokemonInfoSelectors.speciesId(state, pokemonName) : undefined 15 | ); 16 | const species = useAppSelector((state) => 17 | speciesId 18 | ? pokemonDetailsSelectors.species.selectById(state, speciesId) 19 | : undefined 20 | ); 21 | 22 | const isSpeciesLoading = useAppSelector( 23 | pokemonDetailsSelectors.species.isLoading 24 | ); 25 | const isSpeciesError = useAppSelector( 26 | pokemonDetailsSelectors.species.isError 27 | ); 28 | 29 | const pokemonInfo = useAppSelector((state) => 30 | pokemonName 31 | ? pokemonInfoSelectors.selectById(state, pokemonName) 32 | : undefined 33 | ); 34 | 35 | const images = 36 | pokemonInfo?.data?.sprites && 37 | Object.entries(pokemonInfo.data.sprites).filter( 38 | (e) => typeof e[1] === "string" 39 | ); 40 | 41 | React.useEffect( 42 | function fetchDetails() { 43 | if (!pokemonName) return; 44 | 45 | const promise = dispatch(actions.getPokemonDetails({ pokemonName })); 46 | 47 | return () => { 48 | promise.abort(); 49 | }; 50 | }, 51 | [dispatch, pokemonName] 52 | ); 53 | 54 | return { 55 | error, 56 | isSpeciesLoading, 57 | isSpeciesError, 58 | pokemonInfo, 59 | images, 60 | species, 61 | }; 62 | } 63 | -------------------------------------------------------------------------------- /src/features/pokemon-details/pokemon-info/index.tsx: -------------------------------------------------------------------------------- 1 | import { useParams } from "react-router-dom"; 2 | import { usePokemonInfo } from "./hooks"; 3 | import pokemonDetailsSlice from "../slice"; 4 | import withLazyRedux from "../../../redux/with-lazy-redux"; 5 | import ErrorMessage from "../../../components/error-message"; 6 | import LoadingSpinner from "../../../components/loading-spinner"; 7 | import TypePill from "../../../components/pokemon-type-pill"; 8 | import PokemonDetailsLayout from "../pokemon-details-layout"; 9 | 10 | function PokemonInfo() { 11 | const { pokemonName } = useParams(); 12 | const { 13 | error, 14 | isSpeciesLoading, 15 | isSpeciesError, 16 | images, 17 | pokemonInfo, 18 | species, 19 | } = usePokemonInfo(pokemonName); 20 | 21 | return error === "species not found" ? ( 22 | 23 | ) : error === "unexpected error" || isSpeciesError ? ( 24 | 25 | ) : isSpeciesLoading || pokemonInfo?.loading || !pokemonInfo?.data ? ( 26 | 27 | ) : ( 28 | 36 | {images?.map((e) => ( 37 | {e[0]} 38 | ))} 39 | 40 | } 41 | color={species?.color.name} 42 | types={ 43 | <> 44 | {pokemonInfo.data.types?.map((t) => ( 45 | 46 | ))} 47 | 48 | } 49 | descriptionTitle={ 50 | species?.genera.find((g) => g.language.name === "en")?.genus 51 | } 52 | description={ 53 | <> 54 | {species && 55 | /* 56 | * Unfortunatelly, the API results contain repeated data in "flavor_text_entries", 57 | * varying sometimes in linebreaks or missing spaces between words. 58 | * In the block below I try to remove linebreaks and remove duplications 59 | */ 60 | Array.from( 61 | species.flavor_text_entries 62 | .filter((i) => i.language.name === "en") 63 | // Remove linebreaks and invalid chars 64 | .map((i) => i.flavor_text.replace(/\r?\n|\r|\u000c/gm, " ")) // eslint-disable-line no-control-regex 65 | .reduce( 66 | /* 67 | * As the text from the API can sometimes vary by missing spaces, 68 | * I'm using the first 10 chars to differentiate the texts 69 | */ 70 | (acc, cur) => 71 | acc.set(cur.toLowerCase().substring(0, 10), cur), 72 | new Map() 73 | ) 74 | .values() 75 | ).reduce((acc, cur, index) => { 76 | acc.push( 77 | 78 | {acc.length > 0 &&
} 79 | {cur} 80 | 81 | ); 82 | return acc; 83 | }, [] as React.ReactElement[])} 84 | 85 | } 86 | profile={ 87 |
    88 | {pokemonInfo.data.height ? ( 89 |
  • Height: {pokemonInfo.data.height / 10}m
    • 90 | ) : null} 91 | {pokemonInfo.data.weight ? ( 92 |
  • Weight: {pokemonInfo.data.weight / 10}kg
    • 93 | ) : null} 94 | {species?.shape.name &&
  • Shape: {species?.shape.name}
    • } 95 | {species?.habitat?.name &&
  • Habitat: {species?.habitat.name}
    • } 96 |
97 | } 98 | abilities={ 99 |
    100 | {pokemonInfo.data.abilities?.map((a) => ( 101 |
  • 105 | {a.ability.name} 106 |
    • 107 | ))} 108 |
109 | } 110 | stats={ 111 |
    112 | {pokemonInfo.data.stats?.map((s) => ( 113 |
  • 114 | {s.stat.name}: {s.base_stat} 115 |
    • 116 | ))} 117 |
118 | } 119 | /> 120 | ); 121 | } 122 | 123 | export default withLazyRedux(PokemonInfo, pokemonDetailsSlice); 124 | -------------------------------------------------------------------------------- /src/features/pokemon-details/slice.ts: -------------------------------------------------------------------------------- 1 | import type { EntityState } from "@reduxjs/toolkit"; 2 | import { createSelector } from "@reduxjs/toolkit"; 3 | import { createSlice, createEntityAdapter } from "@reduxjs/toolkit"; 4 | import type { LoadableResource } from "../../redux/types"; 5 | import type { PokemonDetailsError, PokemonSpecies } from "./types"; 6 | import type { RootState } from "../../redux/store"; 7 | import * as thunks from "./thunks"; 8 | 9 | const pokemonSpeciesEntityAdapter = createEntityAdapter( 10 | { 11 | selectId: (species) => species.id, 12 | sortComparer: (a, b) => (a.order && b.order ? a.order - b.order : 0), 13 | } 14 | ); 15 | 16 | const initialState: { 17 | error: PokemonDetailsError | undefined; 18 | species: LoadableResource>; 19 | } = { 20 | error: undefined, 21 | species: { 22 | loading: true, 23 | error: false, 24 | data: pokemonSpeciesEntityAdapter.getInitialState(), 25 | }, 26 | }; 27 | 28 | const slice = createSlice({ 29 | name: "pokemonDetails", 30 | initialState, 31 | reducers: {}, 32 | extraReducers: (builder) => { 33 | builder 34 | .addCase(thunks.getPokemonDetails.rejected, (state, action) => { 35 | state.error = action.payload; 36 | }) 37 | .addCase(thunks.fetchPokemonSpecies.pending, (state) => { 38 | state.error = undefined; 39 | state.species.loading = true; 40 | state.species.error = false; 41 | }) 42 | .addCase(thunks.fetchPokemonSpecies.rejected, (state, action) => { 43 | state.error = undefined; 44 | state.species.loading = false; 45 | if (action.meta.aborted) return; 46 | state.species.error = true; 47 | }) 48 | .addCase(thunks.fetchPokemonSpecies.fulfilled, (state, action) => { 49 | state.error = undefined; 50 | state.species.loading = false; 51 | state.species.error = false; 52 | 53 | pokemonSpeciesEntityAdapter.setOne(state.species.data, action.payload); 54 | }); 55 | }, 56 | }); 57 | 58 | export default slice; 59 | 60 | export const actions = { ...slice.actions, ...thunks }; 61 | 62 | const pokemonDetailSelector = (state: RootState) => state.pokemonDetails; 63 | const pokemonSpeciesSelector = createSelector( 64 | pokemonDetailSelector, 65 | (state) => state.species 66 | ); 67 | const pokemonSpeciesDataSelector = createSelector( 68 | pokemonSpeciesSelector, 69 | (state) => state.data 70 | ); 71 | 72 | export const selectors = { 73 | sliceAvailable: createSelector(pokemonDetailSelector, (state) => !!state), 74 | error: createSelector(pokemonDetailSelector, (state) => state.error), 75 | species: { 76 | ...pokemonSpeciesEntityAdapter.getSelectors(pokemonSpeciesDataSelector), 77 | isLoading: createSelector(pokemonSpeciesSelector, (state) => state.loading), 78 | isError: createSelector(pokemonSpeciesSelector, (state) => state.error), 79 | }, 80 | }; 81 | -------------------------------------------------------------------------------- /src/features/pokemon-details/thunks.ts: -------------------------------------------------------------------------------- 1 | import { createAsyncThunk } from "@reduxjs/toolkit"; 2 | import type { RootState } from "../../redux/store"; 3 | import { idFromUrl, speciesUrlSelector } from "../pokemon-page/service"; 4 | import { fetchPokemonInfo } from "../pokemon-page/thunks"; 5 | import type { PokemonDetailsError, PokemonSpecies } from "./types"; 6 | 7 | export const getPokemonDetails = createAsyncThunk< 8 | void, 9 | { pokemonName: string }, 10 | { 11 | state: RootState; 12 | rejectValue: PokemonDetailsError; 13 | } 14 | >( 15 | "pokemonDetails/getPokemonDetails", 16 | async (args, { dispatch, getState, signal, rejectWithValue }) => { 17 | const pokemonInfo = dispatch(fetchPokemonInfo(args)); 18 | 19 | signal.addEventListener("abort", () => { 20 | pokemonInfo.abort(); 21 | }); 22 | 23 | await pokemonInfo; 24 | 25 | const { 26 | pokemonPage: { info }, 27 | } = getState(); 28 | 29 | const speciesUrl = speciesUrlSelector(info, args.pokemonName); 30 | if (!speciesUrl) return rejectWithValue("species not found"); 31 | 32 | const pokemonSpecies = dispatch( 33 | fetchPokemonSpecies({ 34 | url: speciesUrl, 35 | }) 36 | ); 37 | 38 | signal.addEventListener("abort", () => { 39 | pokemonSpecies.abort(); 40 | }); 41 | } 42 | ); 43 | 44 | export const fetchPokemonSpecies = createAsyncThunk< 45 | PokemonSpecies, 46 | { url: string }, 47 | { 48 | state: RootState; 49 | } 50 | >( 51 | "pokemonDetails/fetchPokemonSpecies", 52 | async (args, { signal, rejectWithValue }) => { 53 | const response = await fetch(args.url, { signal }); 54 | 55 | if (!response.ok) return rejectWithValue(await response.text()); 56 | 57 | return await response.json(); 58 | }, 59 | { 60 | condition: (args, { getState }) => { 61 | const speciesIdFromUrl = idFromUrl(args.url); 62 | 63 | if (!speciesIdFromUrl) return true; 64 | 65 | const { 66 | pokemonDetails: { 67 | species: { data }, 68 | }, 69 | } = getState(); 70 | 71 | if (data.ids.includes(Number(speciesIdFromUrl))) { 72 | return false; 73 | } 74 | }, 75 | } 76 | ); 77 | -------------------------------------------------------------------------------- /src/features/pokemon-details/types.ts: -------------------------------------------------------------------------------- 1 | export type { PokemonSpecies } from "pokenode-ts"; 2 | export type PokemonDetailsError = "species not found" | "unexpected error"; 3 | -------------------------------------------------------------------------------- /src/features/pokemon-names/pokemon-search/hooks.ts: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useDispatch } from "react-redux"; 3 | import { useNavigate } from "react-router-dom"; 4 | import { pokemonDetailsRoute } from "../../../pages/routes"; 5 | import { useAppSelector } from "../../../redux/hooks"; 6 | import { actions } from "../slice"; 7 | 8 | export function useInitialFilterSuggestionsEffect() { 9 | const dispatch = useDispatch(); 10 | 11 | React.useEffect(() => { 12 | dispatch(actions.updateSuggestions()); 13 | }, [dispatch]); 14 | } 15 | 16 | export function useUpdateSuggestionsCallback() { 17 | const dispatch = useDispatch(); 18 | 19 | return React.useCallback( 20 | (filterParam: string) => { 21 | dispatch(actions.updateSuggestions(filterParam)); 22 | }, 23 | [dispatch] 24 | ); 25 | } 26 | 27 | export function useChangeRouteCallback() { 28 | const navigate = useNavigate(); 29 | const filterState = useAppSelector((state) => state.filteredPokemonNames); 30 | 31 | return () => { 32 | if (filterState.name.trim().length > 0) 33 | navigate(pokemonDetailsRoute.generate(filterState.name)); 34 | }; 35 | } 36 | 37 | export function useFilterState() { 38 | return useAppSelector((state) => state.filteredPokemonNames); 39 | } 40 | -------------------------------------------------------------------------------- /src/features/pokemon-names/pokemon-search/index.tsx: -------------------------------------------------------------------------------- 1 | import { useDeferredValue } from "react"; 2 | import * as hooks from "./hooks"; 3 | import "./style.scss"; 4 | 5 | export default function PokemonSearch() { 6 | hooks.useInitialFilterSuggestionsEffect(); 7 | const updateSuggestions = hooks.useUpdateSuggestionsCallback(); 8 | const changeRoute = hooks.useChangeRouteCallback(); 9 | const filterState = hooks.useFilterState(); 10 | const deferredFilterState = useDeferredValue(filterState); 11 | 12 | return ( 13 |
{ 15 | changeRoute(); 16 | evt.preventDefault(); 17 | }} 18 | className="search" 19 | role="search" 20 | > 21 | { 27 | updateSuggestions(evt.target.value); 28 | }} 29 | className="search__input" 30 | /> 31 | 32 | {deferredFilterState.suggestions.map((r) => ( 33 | 36 | 39 |
40 | ); 41 | } 42 | -------------------------------------------------------------------------------- /src/features/pokemon-names/pokemon-search/style.scss: -------------------------------------------------------------------------------- 1 | .search { 2 | --border-radius: 4px; 3 | 4 | display: flex; 5 | flex-flow: row nowrap; 6 | 7 | &__input { 8 | appearance: none; 9 | background-color: white; 10 | border: solid 1px var(--bg-color); 11 | box-sizing: border-box; 12 | border-radius: var(--border-radius); 13 | display: block; 14 | font-size: 1em; 15 | font-style: italic; 16 | margin: 0; 17 | padding: 0.5em; 18 | position: relative; 19 | transition: border-color; 20 | width: 100%; 21 | min-width: 35vw; 22 | outline: none; 23 | 24 | &:focus { 25 | border-width: 2px; 26 | } 27 | } 28 | 29 | &__button { 30 | border-radius: var(--border-radius); 31 | outline: none; 32 | border: none; 33 | margin-left: 0.5em; 34 | background-color: var(--bg-color); 35 | color: #fff; 36 | cursor: pointer; 37 | 38 | &:hover { 39 | background-color: var(--accent-color-highlight); 40 | } 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /src/features/pokemon-names/service.ts: -------------------------------------------------------------------------------- 1 | import pokemon from "pokemon"; 2 | import Trie from "../../structures/trie"; 3 | 4 | const indexedNames = pokemon.all("en").reduce((acc, cur) => { 5 | acc.insert(cur.toLowerCase()); 6 | return acc; 7 | }, new Trie()); 8 | 9 | export function searchPokemonName(searchTerm: string) { 10 | return Array.from(indexedNames.autocomplete(searchTerm.toLowerCase())).sort(); 11 | } 12 | -------------------------------------------------------------------------------- /src/features/pokemon-names/slice.test.ts: -------------------------------------------------------------------------------- 1 | import slice, { actions } from "./slice"; 2 | 3 | describe("filteredPokemonNames slice", () => { 4 | describe('action "updateSuggestions" updates state', () => { 5 | test("for provided parameter", () => { 6 | expect( 7 | slice.reducer(undefined, actions.updateSuggestions("char")) 8 | ).toEqual({ 9 | name: "char", 10 | suggestions: ["charizard", "charjabug", "charmander", "charmeleon"], 11 | }); 12 | 13 | expect(slice.reducer(undefined, actions.updateSuggestions("Bl"))).toEqual( 14 | { 15 | name: "Bl", 16 | suggestions: [ 17 | "blacephalon", 18 | "blastoise", 19 | "blaziken", 20 | "blipbug", 21 | "blissey", 22 | "blitzle", 23 | ], 24 | } 25 | ); 26 | }); 27 | 28 | test("without any parameter", () => { 29 | const resultingState = slice.reducer( 30 | undefined, 31 | actions.updateSuggestions() 32 | ); 33 | expect(resultingState.name).toEqual(""); 34 | expect(resultingState.suggestions).toHaveLength(0); 35 | }); 36 | }); 37 | }); 38 | -------------------------------------------------------------------------------- /src/features/pokemon-names/slice.ts: -------------------------------------------------------------------------------- 1 | import type { PayloadAction } from "@reduxjs/toolkit"; 2 | import { createSlice } from "@reduxjs/toolkit"; 3 | import { searchPokemonName } from "./service"; 4 | 5 | const slice = createSlice({ 6 | name: "filteredPokemonNames", 7 | initialState: { 8 | name: "", 9 | suggestions: [] as string[], 10 | }, 11 | reducers: { 12 | updateSuggestions: (state, action: PayloadAction) => { 13 | if (action.payload?.length) { 14 | state.name = action.payload; 15 | 16 | state.suggestions = searchPokemonName(action.payload).sort(); 17 | } else { 18 | state.name = ""; 19 | state.suggestions = []; 20 | } 21 | }, 22 | }, 23 | }); 24 | 25 | export default slice; 26 | 27 | export const actions = { ...slice.actions }; 28 | -------------------------------------------------------------------------------- /src/features/pokemon-page/card-layout/card-layout.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, Story } from "@storybook/react"; 2 | import React from "react"; 3 | import CardLayout from "."; 4 | 5 | type Args = { mocks: number }; 6 | 7 | export default { 8 | title: "CardLayout", 9 | component: CardLayout, 10 | args: { 11 | mocks: 10, 12 | }, 13 | } as Meta; 14 | 15 | type Props = React.ComponentProps; 16 | 17 | export const Default: Story = (args) => { 18 | const mocks = Array.from({ length: args.mocks }, (_, i) => ( 19 |
{`Card ${i}`}
20 | )); 21 | 22 | return {mocks}; 23 | }; 24 | -------------------------------------------------------------------------------- /src/features/pokemon-page/card-layout/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./style.scss"; 3 | 4 | export default function CardLayout({ 5 | children, 6 | }: { 7 | children: React.ReactNode; 8 | }) { 9 | return ( 10 |
11 |
{children}
12 |
13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /src/features/pokemon-page/card-layout/style.scss: -------------------------------------------------------------------------------- 1 | .card-layout { 2 | --size: 15em; 3 | 4 | padding: var(--layout-padding); 5 | flex: 1; 6 | overflow: auto; 7 | 8 | &__content { 9 | display: grid; 10 | gap: 3em; 11 | grid-auto-rows: var(--size); 12 | grid-template-columns: repeat(auto-fill, var(--size)); 13 | justify-content: space-between; 14 | 15 | @media (max-width: 625px) { 16 | justify-content: center; 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/features/pokemon-page/footer/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./style.scss"; 3 | 4 | export default function Footer({ children }: { children: React.ReactNode }) { 5 | return ( 6 | 17 | ); 18 | } 19 | -------------------------------------------------------------------------------- /src/features/pokemon-page/footer/style.scss: -------------------------------------------------------------------------------- 1 | .footer { 2 | flex: 0; 3 | font-family: "Open Sans", sans-serif; 4 | background-color: var(--bg-color); 5 | color: white; 6 | position: sticky; 7 | bottom: 0; 8 | z-index: 1; 9 | padding: 0 1em; 10 | 11 | &__info { 12 | position: absolute; 13 | left: var(--layout-padding); 14 | top: 1.3em; 15 | color: #ccc; 16 | text-align: left; 17 | } 18 | 19 | @media (max-width: 625px) { 20 | .footer__info { 21 | position: static; 22 | text-align: center; 23 | display: block; 24 | padding-bottom: 1em; 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/features/pokemon-page/pagination/index.tsx: -------------------------------------------------------------------------------- 1 | import { faChevronRight } from "@fortawesome/free-solid-svg-icons"; 2 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; 3 | import "./style.scss"; 4 | 5 | type Props = { 6 | currentPage: number; 7 | pageCount: number; 8 | onPrev: () => void; 9 | onNext: () => void; 10 | }; 11 | 12 | export default function Pagination(props: Props) { 13 | return ( 14 | 33 | ); 34 | } 35 | -------------------------------------------------------------------------------- /src/features/pokemon-page/pagination/pagination.stories.tsx: -------------------------------------------------------------------------------- 1 | import { action } from "@storybook/addon-actions"; 2 | import type { Meta, Story } from "@storybook/react"; 3 | import Pagination from "."; 4 | 5 | export default { 6 | title: "Pagination", 7 | component: Pagination, 8 | parameters: { 9 | layout: "centered", 10 | }, 11 | } as Meta; 12 | 13 | export const Default: Story = () => ( 14 | 20 | ); 21 | -------------------------------------------------------------------------------- /src/features/pokemon-page/pagination/style.scss: -------------------------------------------------------------------------------- 1 | .pagination { 2 | font-family: "Open Sans", sans-serif; 3 | display: flex; 4 | flex-flow: row nowrap; 5 | justify-content: center; 6 | align-items: center; 7 | width: 100%; 8 | padding: 1em 0; 9 | 10 | &__button-left { 11 | margin-right: 1.5em; 12 | transform: rotate(180deg); 13 | } 14 | 15 | &__button-right { 16 | margin-left: 1.5em; 17 | } 18 | 19 | &__button-left, 20 | &__button-right { 21 | color: var(--accent-color); 22 | cursor: pointer; 23 | background: none; 24 | border: none; 25 | 26 | &:hover { 27 | color: var(--accent-color-highlight); 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/features/pokemon-page/pokemon-card/hooks.ts: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useAppSelector } from "../../../redux/hooks"; 3 | import { selectors } from "../slice"; 4 | 5 | export function usePokemonInfo(pokemonName: string) { 6 | const pokemonInfoSelectors = React.useMemo( 7 | () => selectors.makeInfoSelectors(), 8 | [] 9 | ); 10 | 11 | return useAppSelector((state) => 12 | pokemonInfoSelectors.selectById(state, pokemonName) 13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /src/features/pokemon-page/pokemon-card/index.tsx: -------------------------------------------------------------------------------- 1 | import ResourceState from "../../../components/resource-state"; 2 | import type { LoadableResource } from "../../../redux/types"; 3 | import type { PokemonInfo } from "../types"; 4 | import { usePokemonInfo } from "./hooks"; 5 | import TypePill from "../../../components/pokemon-type-pill"; 6 | import "./style.scss"; 7 | 8 | export default function PokemonCard(props: { pokemonName: string }) { 9 | const pokemonInfo = usePokemonInfo(props.pokemonName); 10 | 11 | return ; 12 | } 13 | 14 | export function PokemonCardData(props: { 15 | pokemonName: string; 16 | info: LoadableResource | undefined; 17 | }) { 18 | const backgroundImageUrl = 19 | props.info?.data?.sprites?.other?.["official-artwork"].front_default; 20 | 21 | return ( 22 |
23 | 24 | 25 | 26 | {props.pokemonName} 27 | 28 | 29 | 30 |
31 | 32 |
33 | 37 |
38 | {props.info?.data?.types?.map((t) => ( 39 | 40 | ))} 41 |
42 |
50 |
51 | ); 52 | } 53 | 54 | function PokemonImage({ 55 | images, 56 | alt, 57 | }: { 58 | images: PokemonInfo["sprites"] | undefined; 59 | alt: string; 60 | }) { 61 | const imageSrc = images?.other?.["official-artwork"].front_default; 62 | return imageSrc ? ( 63 | {alt} 69 | ) : null; 70 | } 71 | 72 | export function PokemonNameSvgShape() { 73 | return ( 74 | 75 | 76 | 81 | 82 | 83 | ); 84 | } 85 | -------------------------------------------------------------------------------- /src/features/pokemon-page/pokemon-card/pokemon-card.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, Story } from "@storybook/react"; 2 | import { PokemonNameSvgShape, PokemonCardData } from "."; 3 | import mock from "./mock"; 4 | 5 | export default { 6 | title: "PokemonCard", 7 | component: PokemonCardData, 8 | parameters: { 9 | layout: "centered", 10 | }, 11 | decorators: [], 12 | } as Meta; 13 | 14 | type Props = React.ComponentProps; 15 | const Template: Story = (args) => ( 16 |
17 | 18 | 19 |
20 | ); 21 | 22 | export const Default: Story = Template.bind({}); 23 | Default.args = { 24 | pokemonName: "test", 25 | info: { 26 | data: mock, 27 | loading: false, 28 | error: false, 29 | }, 30 | }; 31 | -------------------------------------------------------------------------------- /src/features/pokemon-page/pokemon-card/pokemon-card.test.tsx: -------------------------------------------------------------------------------- 1 | import { render, screen } from "@testing-library/react"; 2 | import PokemonCard from "."; 3 | import { buildStore } from "../../../redux/store"; 4 | import { Provider } from "react-redux"; 5 | 6 | describe("Pokemon card component", () => { 7 | function setup({ 8 | loading, 9 | error, 10 | pokemonName, 11 | pokemonOrder, 12 | }: { 13 | loading: boolean; 14 | error: boolean; 15 | pokemonName: string; 16 | pokemonOrder: number; 17 | }) { 18 | const { store } = buildStore({ 19 | pokemonPage: { 20 | pageCount: 4, 21 | currentPage: 1, 22 | lastUrlFetched: null, 23 | nextUrl: null, 24 | prevUrl: null, 25 | loading: false, 26 | error: false, 27 | data: { 28 | entities: {}, 29 | ids: [], 30 | }, 31 | info: { 32 | entities: { 33 | [pokemonName]: { 34 | loading, 35 | error, 36 | data: { 37 | name: pokemonName, 38 | order: pokemonOrder, 39 | }, 40 | }, 41 | }, 42 | ids: [pokemonName], 43 | }, 44 | }, 45 | }); 46 | 47 | render( 48 | 49 | 50 | 51 | ); 52 | } 53 | 54 | it("displays the loading indicator", () => { 55 | setup({ 56 | loading: true, 57 | error: false, 58 | pokemonName: "test", 59 | pokemonOrder: 1, 60 | }); 61 | 62 | expect(screen.getByRole("alert")).toHaveAttribute("aria-busy", "true"); 63 | }); 64 | 65 | it("does not display error message", () => { 66 | setup({ 67 | loading: false, 68 | error: false, 69 | pokemonName: "test", 70 | pokemonOrder: 1, 71 | }); 72 | expect(screen.queryByText(/error/i)).toBeNull(); 73 | }); 74 | 75 | it("displays data", async () => { 76 | setup({ 77 | loading: false, 78 | error: false, 79 | pokemonName: "test", 80 | pokemonOrder: 10, 81 | }); 82 | 83 | // eslint-disable-next-line testing-library/no-node-access 84 | expect(document.getElementsByTagName("textPath")![0]).toHaveTextContent( 85 | "test" 86 | ); 87 | }); 88 | 89 | describe("errors", () => { 90 | it("displays error message", async () => { 91 | setup({ 92 | error: true, 93 | loading: false, 94 | pokemonName: "testing", 95 | pokemonOrder: 1, 96 | }); 97 | 98 | expect(screen.getByText(/error/i)).toBeInTheDocument(); 99 | }); 100 | }); 101 | }); 102 | -------------------------------------------------------------------------------- /src/features/pokemon-page/pokemon-card/style.scss: -------------------------------------------------------------------------------- 1 | .pokemon-card { 2 | font-family: "Open Sans", sans-serif; 3 | position: relative; 4 | height: 100%; 5 | width: 100%; 6 | cursor: pointer; 7 | transform-origin: center center; 8 | display: flex; 9 | flex-flow: column nowrap; 10 | justify-content: space-between; 11 | overflow: hidden; 12 | border-radius: 50%; 13 | align-items: center; 14 | box-sizing: border-box; 15 | transform: perspective(10em); 16 | border: solid 2px #f0f0f0; 17 | background-color: white; 18 | filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.2)); 19 | box-shadow: inset 0 0 2px 5px #ccc; 20 | padding: 0; 21 | 22 | &, 23 | &__background { 24 | transition-property: filter transform; 25 | transition-duration: 0.5s; 26 | transition-timing-function: ease-in-out; 27 | } 28 | 29 | &__background { 30 | --filters: blur(10px) opacity(0.65); 31 | 32 | background-repeat: no-repeat; 33 | background-position: center; 34 | background-size: 550%; 35 | width: 100%; 36 | height: 100%; 37 | top: 0; 38 | position: absolute; 39 | z-index: -1; 40 | opacity: 0.8; 41 | filter: var(--filters); 42 | 43 | &::before { 44 | display: block; 45 | content: ""; 46 | width: 100%; 47 | height: 100%; 48 | position: absolute; 49 | z-index: -1; 50 | background: radial-gradient( 51 | closest-side, 52 | rgba(255, 255, 255, 0.9) 25%, 53 | rgba(255, 255, 255, 0) 75% 54 | ); 55 | } 56 | } 57 | 58 | &:hover { 59 | filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.2)); 60 | transform: perspective(10em) translateZ(1em); 61 | 62 | .pokemon-card__background { 63 | filter: var(--filters) saturate(300%); 64 | } 65 | } 66 | 67 | &__curved-text { 68 | position: absolute; 69 | width: 100%; 70 | height: 100%; 71 | pointer-events: none; 72 | top: 0; 73 | 74 | text { 75 | font-size: 0.5em; 76 | font-weight: bold; 77 | text-transform: uppercase; 78 | transform-origin: center center; 79 | transform: scale(0.7); 80 | } 81 | } 82 | 83 | &__status { 84 | flex: 1 0 auto; 85 | display: flex; 86 | align-items: center; 87 | justify-content: center; 88 | position: absolute; 89 | width: 100%; 90 | height: 100%; 91 | pointer-events: none; 92 | } 93 | 94 | &__image { 95 | flex: 2 1 100%; 96 | display: flex; 97 | flex-direction: column; 98 | justify-content: center; 99 | align-content: center; 100 | margin-top: 4em; 101 | max-height: 50%; 102 | } 103 | 104 | &__types { 105 | flex: 0 1 auto; 106 | display: flex; 107 | flex-flow: row wrap; 108 | width: 60%; 109 | justify-content: center; 110 | margin-bottom: 0.7em; 111 | } 112 | } 113 | -------------------------------------------------------------------------------- /src/features/pokemon-page/pokemon-list/hooks.ts: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useAppDispatch, useAppSelector } from "../../../redux/hooks"; 3 | import { selectors, actions } from "../slice"; 4 | 5 | export function useFetchPage() { 6 | const dispatch = useAppDispatch(); 7 | const currentPage = useAppSelector(selectors.list.currentPage); 8 | const prevPage = useAppSelector(selectors.list.prevPage); 9 | const nextPage = useAppSelector(selectors.list.nextPage); 10 | const lastPromise = 11 | React.useRef<{ 12 | abort: () => void; 13 | }>(); 14 | 15 | React.useEffect( 16 | function fetchFirstPage() { 17 | if (currentPage > 1) return; 18 | const promise = dispatch(actions.getPokemonPage({ size: 10, offset: 0 })); 19 | 20 | return () => { 21 | promise.abort(); 22 | }; 23 | }, 24 | [currentPage, dispatch] 25 | ); 26 | 27 | const fetchPrevPage = React.useCallback(() => { 28 | if (!prevPage) return; 29 | lastPromise.current?.abort(); 30 | lastPromise.current = dispatch( 31 | actions.getPokemonPage({ 32 | url: prevPage, 33 | }) 34 | ); 35 | }, [dispatch, prevPage]); 36 | 37 | const fetchNextPage = React.useCallback(() => { 38 | if (!nextPage) return; 39 | lastPromise.current?.abort(); 40 | lastPromise.current = dispatch( 41 | actions.getPokemonPage({ 42 | url: nextPage, 43 | }) 44 | ); 45 | }, [dispatch, nextPage]); 46 | 47 | return { 48 | fetchPrevPage, 49 | fetchNextPage, 50 | }; 51 | } 52 | 53 | export function usePageData() { 54 | const isLoading = useAppSelector(selectors.list.isLoading); 55 | const isError = useAppSelector(selectors.list.isError); 56 | const currentPage = useAppSelector(selectors.list.currentPage); 57 | const pageCount = useAppSelector(selectors.list.pageCount); 58 | const pokemonInfoSelectors = React.useMemo( 59 | () => selectors.makeInfoSelectors(), 60 | [] 61 | ); 62 | const pokemonInfoIds = useAppSelector(pokemonInfoSelectors.selectIds); 63 | 64 | return { isLoading, isError, pokemonInfoIds, currentPage, pageCount }; 65 | } 66 | -------------------------------------------------------------------------------- /src/features/pokemon-page/pokemon-list/index.tsx: -------------------------------------------------------------------------------- 1 | import { Link } from "react-router-dom"; 2 | import PokemonCard, { PokemonNameSvgShape } from "../pokemon-card"; 3 | import { useFetchPage, usePageData } from "./hooks"; 4 | import { pokemonDetailsRoute } from "../../../pages/routes"; 5 | import ErrorMessage from "../../../components/error-message"; 6 | import LoadingSpinner from "../../../components/loading-spinner"; 7 | import CardLayout from "../card-layout"; 8 | import Pagination from "../pagination"; 9 | import Footer from "../footer"; 10 | import { useDeferredValue } from "react"; 11 | 12 | export default function PokemonList() { 13 | const { fetchNextPage, fetchPrevPage } = useFetchPage(); 14 | const { isLoading, isError, pokemonInfoIds, currentPage, pageCount } = 15 | usePageData(); 16 | const deferredIds = useDeferredValue(pokemonInfoIds); 17 | 18 | return ( 19 | <> 20 | 21 | 22 | {isLoading ? ( 23 | 24 | ) : isError ? ( 25 | 26 | ) : ( 27 | <> 28 | 29 | {deferredIds.map((pokemonName) => ( 30 | 34 | 35 | 36 | ))} 37 | 38 |
39 |
40 | 46 |
47 |
48 | 49 | )} 50 | 51 | ); 52 | } 53 | -------------------------------------------------------------------------------- /src/features/pokemon-page/pokemon-list/msw-handlers.ts: -------------------------------------------------------------------------------- 1 | import type { DefaultBodyType, PathParams } from "msw"; 2 | import { rest } from "msw"; 3 | import type { PokemonInfo, PokemonPageList } from "../types"; 4 | 5 | export const getPokemonPagePayload = ( 6 | pageSize: number, 7 | currentPage: number 8 | ) => ({ 9 | count: 123, 10 | next: "https://pokeapi.co/api/v2/pokemon?offset=10&limit=10", 11 | previous: "https://pokeapi.co/api/v2/pokemon?offset=0&limit=10", 12 | results: Array.from({ length: pageSize }, (_, i) => { 13 | const id = currentPage * pageSize + i; 14 | return { 15 | name: `result ${id}`, 16 | url: `https://pokeapi.co/api/v2/pokemon/${id}/`, 17 | }; 18 | }), 19 | }); 20 | 21 | export const regularPokemonPageHandler = rest.get< 22 | DefaultBodyType, 23 | PathParams, 24 | PokemonPageList 25 | >("https://pokeapi.co/api/v2/pokemon", (req, res, ctx) => { 26 | const currentPage = 27 | Number(req.url.searchParams.get("offset")) / 28 | Number(req.url.searchParams.get("limit")); 29 | 30 | const pageSize = 10; 31 | return res(ctx.json(getPokemonPagePayload(pageSize, currentPage))); 32 | }); 33 | 34 | export const errorPokemonPageHandler = rest.get< 35 | DefaultBodyType, 36 | PathParams, 37 | string 38 | >("https://pokeapi.co/api/v2/pokemon", (req, res, ctx) => 39 | res(ctx.status(403), ctx.text("Testing an error")) 40 | ); 41 | 42 | export const regularPokemonInfoHandler = rest.get< 43 | DefaultBodyType, 44 | PathParams, 45 | PokemonInfo 46 | >("https://pokeapi.co/api/v2/pokemon/:pokemonId/", (req, res, ctx) => { 47 | const { pokemonId } = req.params; 48 | 49 | return res( 50 | ctx.json({ 51 | name: pokemonId as string, 52 | types: [ 53 | { 54 | slot: 1, 55 | type: { name: "water", url: "https://pokeapi.co/api/v2/type/11/" }, 56 | }, 57 | ], 58 | }) 59 | ); 60 | }); 61 | -------------------------------------------------------------------------------- /src/features/pokemon-page/pokemon-list/pokemon-list.test.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable testing-library/no-node-access */ 2 | import { 3 | render, 4 | screen, 5 | waitForElementToBeRemoved, 6 | fireEvent, 7 | waitFor, 8 | } from "@testing-library/react"; 9 | import { MemoryRouter } from "react-router-dom"; 10 | import { Provider } from "react-redux"; 11 | import { setupServer } from "msw/node"; 12 | import { 13 | errorPokemonPageHandler, 14 | regularPokemonInfoHandler, 15 | regularPokemonPageHandler, 16 | } from "./msw-handlers"; 17 | import { buildStore } from "../../../redux/store"; 18 | import PokemonList from "."; 19 | 20 | const server = setupServer( 21 | regularPokemonPageHandler, 22 | regularPokemonInfoHandler 23 | ); 24 | 25 | describe("Pokemon list component", () => { 26 | beforeAll(() => { 27 | server.listen({ onUnhandledRequest: "error" }); 28 | }); 29 | afterAll(() => { 30 | server.close(); 31 | }); 32 | function setup() { 33 | const { store } = buildStore(); 34 | 35 | render( 36 | 37 | 38 | 39 | 40 | 41 | ); 42 | } 43 | 44 | it("displays the loading indicator", () => { 45 | setup(); 46 | expect(screen.getByRole("alert")).toHaveAttribute("aria-busy", "true"); 47 | }); 48 | 49 | it("does not display error message", () => { 50 | setup(); 51 | expect(screen.queryByText(/error/i)).toBeNull(); 52 | }); 53 | 54 | it("displays the items", async () => { 55 | setup(); 56 | await waitForElementToBeRemoved(screen.queryByRole("alert")); 57 | await waitFor(() => { 58 | const itemsContent = Array.from( 59 | document.getElementsByTagName("textPath") 60 | ).map((i) => i.textContent); 61 | 62 | expect(itemsContent).toEqual([ 63 | expect.stringContaining("result 0"), 64 | expect.stringContaining("result 1"), 65 | expect.stringContaining("result 2"), 66 | expect.stringContaining("result 3"), 67 | expect.stringContaining("result 4"), 68 | expect.stringContaining("result 5"), 69 | expect.stringContaining("result 6"), 70 | expect.stringContaining("result 7"), 71 | expect.stringContaining("result 8"), 72 | expect.stringContaining("result 9"), 73 | ]); 74 | }); 75 | }); 76 | 77 | describe("page navigation", () => { 78 | it("displays the correct page number", async () => { 79 | setup(); 80 | 81 | expect(await screen.findByText(/page/i)).toHaveTextContent( 82 | /^page 1 of 13$/ 83 | ); 84 | }); 85 | 86 | it("goes to the next page", async () => { 87 | setup(); 88 | 89 | fireEvent.click( 90 | await screen.findByRole("button", { 91 | name: /next/i, 92 | }) 93 | ); 94 | 95 | await waitFor(() => { 96 | const itemsContent = Array.from( 97 | document.getElementsByTagName("textPath") 98 | ).map((i) => i.textContent); 99 | 100 | expect(itemsContent).toEqual([ 101 | expect.stringContaining("result 10"), 102 | expect.stringContaining("result 11"), 103 | expect.stringContaining("result 12"), 104 | expect.stringContaining("result 13"), 105 | expect.stringContaining("result 14"), 106 | expect.stringContaining("result 15"), 107 | expect.stringContaining("result 16"), 108 | expect.stringContaining("result 17"), 109 | expect.stringContaining("result 18"), 110 | expect.stringContaining("result 19"), 111 | ]); 112 | }); 113 | 114 | expect(screen.getByText(/page/i)).toHaveTextContent(/^page 2 of 13$/); 115 | }); 116 | 117 | it("goes to the prev page", async () => { 118 | setup(); 119 | 120 | fireEvent.click( 121 | await screen.findByRole("button", { 122 | name: /next/i, 123 | }) 124 | ); 125 | 126 | await waitFor(() => { 127 | const itemsContent = Array.from( 128 | document.getElementsByTagName("textPath") 129 | ).map((i) => i.textContent); 130 | 131 | expect(itemsContent).toEqual([ 132 | expect.stringContaining("result 10"), 133 | expect.stringContaining("result 11"), 134 | expect.stringContaining("result 12"), 135 | expect.stringContaining("result 13"), 136 | expect.stringContaining("result 14"), 137 | expect.stringContaining("result 15"), 138 | expect.stringContaining("result 16"), 139 | expect.stringContaining("result 17"), 140 | expect.stringContaining("result 18"), 141 | expect.stringContaining("result 19"), 142 | ]); 143 | }); 144 | 145 | fireEvent.click( 146 | await screen.findByRole("button", { 147 | name: /prev/i, 148 | }) 149 | ); 150 | 151 | await waitFor(() => { 152 | const itemsContent = Array.from( 153 | document.getElementsByTagName("textPath") 154 | ).map((i) => i.textContent); 155 | 156 | expect(itemsContent).toEqual([ 157 | expect.stringContaining("result 0"), 158 | expect.stringContaining("result 1"), 159 | expect.stringContaining("result 2"), 160 | expect.stringContaining("result 3"), 161 | expect.stringContaining("result 4"), 162 | expect.stringContaining("result 5"), 163 | expect.stringContaining("result 6"), 164 | expect.stringContaining("result 7"), 165 | expect.stringContaining("result 8"), 166 | expect.stringContaining("result 9"), 167 | ]); 168 | }); 169 | 170 | expect(screen.getByText(/page/i)).toHaveTextContent(/^page 1 of 13$/); 171 | }); 172 | 173 | it("does not go before first page", async () => { 174 | setup(); 175 | 176 | fireEvent.click( 177 | await screen.findByRole("button", { 178 | name: /prev/i, 179 | }) 180 | ); 181 | 182 | await waitFor(() => { 183 | const itemsContent = Array.from( 184 | document.getElementsByTagName("textPath") 185 | ).map((i) => i.textContent); 186 | 187 | expect(itemsContent).toEqual([ 188 | expect.stringContaining("result 0"), 189 | expect.stringContaining("result 1"), 190 | expect.stringContaining("result 2"), 191 | expect.stringContaining("result 3"), 192 | expect.stringContaining("result 4"), 193 | expect.stringContaining("result 5"), 194 | expect.stringContaining("result 6"), 195 | expect.stringContaining("result 7"), 196 | expect.stringContaining("result 8"), 197 | expect.stringContaining("result 9"), 198 | ]); 199 | }); 200 | 201 | expect(screen.getByText(/page/i)).toHaveTextContent(/^page 1 of 13$/); 202 | }); 203 | }); 204 | 205 | describe("server errors", () => { 206 | beforeAll(() => { 207 | server.use(errorPokemonPageHandler); 208 | }); 209 | 210 | it("displays error message", async () => { 211 | setup(); 212 | 213 | await waitForElementToBeRemoved(screen.queryByRole("alert")); 214 | expect(screen.getByText(/error/i)).toBeInTheDocument(); 215 | }); 216 | }); 217 | }); 218 | -------------------------------------------------------------------------------- /src/features/pokemon-page/service.ts: -------------------------------------------------------------------------------- 1 | import type { EntityState } from "@reduxjs/toolkit"; 2 | import type { LoadableResource } from "../../redux/types"; 3 | import type { PokemonInfo } from "./types"; 4 | 5 | export function getUrlData( 6 | args: { size: number; offset: number } | { url: string } 7 | ) { 8 | return "url" in args 9 | ? getUrlDataByAddress(args.url) 10 | : getDefaultUrlData(args.offset, args.size); 11 | } 12 | 13 | function getUrlDataByAddress(url: string) { 14 | const urlObj = new URL(url); 15 | return { 16 | url, 17 | pageSize: parseInt(urlObj.searchParams.get("limit")!, 10), 18 | itemsOffset: parseInt(urlObj.searchParams.get("offset")!, 10), 19 | }; 20 | } 21 | 22 | function getDefaultUrlData(itemsOffset: number, pageSize: number) { 23 | return { 24 | url: `https://pokeapi.co/api/v2/pokemon?offset=${itemsOffset}&limit=${pageSize}`, 25 | pageSize, 26 | itemsOffset, 27 | }; 28 | } 29 | 30 | export function getPaginationInfo( 31 | totalItems: number, 32 | itemOffset: number, 33 | pageSize: number 34 | ) { 35 | const pageCount = Math.ceil(totalItems / pageSize); 36 | return { 37 | pageCount, 38 | currentPage: 39 | pageCount - Math.ceil((totalItems - itemOffset) / pageSize) + 1, 40 | }; 41 | } 42 | 43 | export function idFromUrl(url: string) { 44 | return Number(url.match(/(\d+)\/$/)?.[1]); 45 | } 46 | 47 | export function speciesUrlSelector( 48 | state: EntityState, string>, 49 | pokemonName: string 50 | ) { 51 | return state.entities[pokemonName]?.data?.species?.url; 52 | } 53 | -------------------------------------------------------------------------------- /src/features/pokemon-page/slice.ts: -------------------------------------------------------------------------------- 1 | import type { EntityState } from "@reduxjs/toolkit"; 2 | import { createSelector } from "@reduxjs/toolkit"; 3 | import { createSlice, createEntityAdapter } from "@reduxjs/toolkit"; 4 | import type { LoadableResource } from "../../redux/types"; 5 | import type { PokemonInfo, PokemonPageItem } from "./types"; 6 | import type { RootState } from "../../redux/store"; 7 | import * as thunks from "./thunks"; 8 | import { getPaginationInfo, idFromUrl, speciesUrlSelector } from "./service"; 9 | 10 | const pokemonListEntityAdapter = createEntityAdapter({ 11 | selectId: (pokemon) => pokemon.name, 12 | sortComparer: (a, b) => a.name.localeCompare(b.name), 13 | }); 14 | 15 | const pokemonInfoEntityAdapter = createEntityAdapter< 16 | LoadableResource, 17 | string 18 | >({ 19 | selectId: (pokemon) => pokemon.data.name, 20 | sortComparer: (a, b) => 21 | a.data.order && b.data.order ? a.data.order - b.data.order : 0, 22 | }); 23 | 24 | const initialState: LoadableResource> & { 25 | pageCount: number; 26 | currentPage: number; 27 | info: EntityState, string>; 28 | lastUrlFetched: string | null; 29 | nextUrl: string | null; 30 | prevUrl: string | null; 31 | } = { 32 | loading: true, 33 | error: false, 34 | lastUrlFetched: null, 35 | nextUrl: null, 36 | prevUrl: null, 37 | data: pokemonListEntityAdapter.getInitialState(), 38 | pageCount: 0, 39 | currentPage: 1, 40 | info: pokemonInfoEntityAdapter.getInitialState(), 41 | }; 42 | 43 | const slice = createSlice({ 44 | name: "pokemonPage", 45 | initialState, 46 | reducers: {}, 47 | extraReducers: (builder) => { 48 | builder 49 | .addCase(thunks.fetchPokemonList.pending, (state) => { 50 | state.loading = true; 51 | state.error = false; 52 | pokemonListEntityAdapter.removeAll(state.data); 53 | pokemonInfoEntityAdapter.removeAll(state.info); 54 | }) 55 | .addCase(thunks.fetchPokemonList.rejected, (state, action) => { 56 | pokemonInfoEntityAdapter.removeAll(state.info); 57 | pokemonListEntityAdapter.removeAll(state.data); 58 | state.loading = false; 59 | state.lastUrlFetched = null; 60 | if (action.meta.aborted) return; 61 | state.error = true; 62 | }) 63 | .addCase(thunks.fetchPokemonList.fulfilled, (state, action) => { 64 | pokemonInfoEntityAdapter.removeAll(state.info); 65 | state.loading = false; 66 | state.error = false; 67 | state.lastUrlFetched = action.payload.url; 68 | state.nextUrl = action.payload.page.next; 69 | state.prevUrl = action.payload.page.previous; 70 | 71 | pokemonListEntityAdapter.setAll( 72 | state.data, 73 | action.payload.page.results 74 | ); 75 | 76 | const { pageCount, currentPage } = getPaginationInfo( 77 | action.payload.page.count, 78 | action.payload.itemsOffset, 79 | action.payload.pageSize 80 | ); 81 | 82 | state.pageCount = pageCount; 83 | state.currentPage = currentPage; 84 | }) 85 | .addCase(thunks.fetchPokemonInfo.pending, (state, action) => { 86 | pokemonInfoEntityAdapter.setOne(state.info, { 87 | loading: true, 88 | error: false, 89 | data: { 90 | name: action.meta.arg.pokemonName, 91 | }, 92 | }); 93 | }) 94 | .addCase(thunks.fetchPokemonInfo.rejected, (state, action) => { 95 | if (action.meta.aborted) return; 96 | pokemonInfoEntityAdapter.setOne(state.info, { 97 | loading: false, 98 | error: true, 99 | data: { 100 | name: action.meta.arg.pokemonName, 101 | }, 102 | }); 103 | }) 104 | .addCase(thunks.fetchPokemonInfo.fulfilled, (state, action) => { 105 | pokemonInfoEntityAdapter.setOne(state.info, { 106 | loading: false, 107 | error: false, 108 | data: action.payload, 109 | }); 110 | }); 111 | }, 112 | }); 113 | 114 | export default slice; 115 | 116 | export const actions = { ...slice.actions, ...thunks }; 117 | 118 | const pokemonPageSelector = (state: RootState) => state.pokemonPage; 119 | const pokemonListSelector = createSelector( 120 | pokemonPageSelector, 121 | (state) => state.data 122 | ); 123 | 124 | const pokemonInfoSelector = createSelector( 125 | pokemonPageSelector, 126 | (state) => state.info 127 | ); 128 | 129 | export const selectors = { 130 | list: { 131 | ...pokemonListEntityAdapter.getSelectors(pokemonListSelector), 132 | isLoading: createSelector(pokemonPageSelector, (state) => state.loading), 133 | isError: createSelector(pokemonPageSelector, (state) => state.error), 134 | nextPage: createSelector(pokemonPageSelector, (state) => state.nextUrl), 135 | prevPage: createSelector(pokemonPageSelector, (state) => state.prevUrl), 136 | currentPage: createSelector( 137 | pokemonPageSelector, 138 | (state) => state.currentPage 139 | ), 140 | pageCount: createSelector(pokemonPageSelector, (state) => state.pageCount), 141 | }, 142 | /*** 143 | * When the selector is used in multiple component instances and depends on the component's props, you need to ensure that each component instance gets its own selector instance 144 | * @see https://react-redux.js.org/api/hooks#using-memoizing-selectors 145 | */ 146 | makeInfoSelectors() { 147 | const speciesUrl = createSelector( 148 | [pokemonInfoSelector, (_, pokemonName: string) => pokemonName], 149 | (state, pokemonName) => speciesUrlSelector(state, pokemonName) 150 | ); 151 | 152 | return { 153 | ...pokemonInfoEntityAdapter.getSelectors(pokemonInfoSelector), 154 | speciesId: createSelector([speciesUrl], (url) => 155 | url ? idFromUrl(url) : undefined 156 | ), 157 | }; 158 | }, 159 | }; 160 | -------------------------------------------------------------------------------- /src/features/pokemon-page/thunks.ts: -------------------------------------------------------------------------------- 1 | import { createAsyncThunk } from "@reduxjs/toolkit"; 2 | import type { RootState } from "../../redux/store"; 3 | import { getUrlData } from "./service"; 4 | import type { PokemonInfo, PokemonPageList } from "./types"; 5 | 6 | export const getPokemonPage = createAsyncThunk< 7 | void, 8 | { size: number; offset: number } | { url: string }, 9 | { 10 | state: RootState; 11 | } 12 | >( 13 | "pokemonPage/getPokemonPage", 14 | async (args, { dispatch, getState, signal }) => { 15 | const pokemonList = dispatch(fetchPokemonList(args)); 16 | 17 | signal.addEventListener("abort", () => { 18 | pokemonList.abort(); 19 | }); 20 | 21 | await pokemonList; 22 | 23 | const { 24 | pokemonPage: { data }, 25 | } = getState(); 26 | 27 | const pokemonInfoRequests = data.ids.map((pokemonName) => 28 | dispatch(fetchPokemonInfo({ pokemonName: pokemonName as string })) 29 | ); 30 | 31 | signal.addEventListener("abort", () => { 32 | pokemonInfoRequests.forEach((promise) => { 33 | promise.abort(); 34 | }); 35 | }); 36 | } 37 | ); 38 | 39 | export const fetchPokemonInfo = createAsyncThunk< 40 | Required, 41 | { pokemonName: string }, 42 | { 43 | state: RootState; 44 | } 45 | >( 46 | "pokemonPage/fetchPokemonInfo", 47 | async ({ pokemonName }, { signal, rejectWithValue }) => { 48 | const response = await fetch( 49 | `https://pokeapi.co/api/v2/pokemon/${pokemonName.toLowerCase()}/`, 50 | { signal } 51 | ); 52 | 53 | if (!response.ok) return rejectWithValue(await response.text()); 54 | 55 | return await response.json(); 56 | }, 57 | { 58 | condition: (args, { getState }) => { 59 | const { 60 | pokemonPage: { info }, 61 | } = getState(); 62 | const pokemonInfo = info.entities[args.pokemonName]; 63 | 64 | if (pokemonInfo?.data.abilities) { 65 | return false; 66 | } 67 | }, 68 | } 69 | ); 70 | 71 | export const fetchPokemonList = createAsyncThunk< 72 | { 73 | page: PokemonPageList; 74 | pageSize: number; 75 | itemsOffset: number; 76 | url: string; 77 | }, 78 | { size: number; offset: number } | { url: string }, 79 | { 80 | state: RootState; 81 | } 82 | >( 83 | "pokemonPage/fetchPokemonList", 84 | async (args, { signal, rejectWithValue }) => { 85 | const urlData = getUrlData(args); 86 | 87 | const response = await fetch(urlData.url, { signal }); 88 | 89 | if (!response.ok) return rejectWithValue(await response.text()); 90 | 91 | const page = await response.json(); 92 | 93 | return { 94 | page, 95 | ...urlData, 96 | }; 97 | }, 98 | { 99 | condition: (args, { getState }) => { 100 | const { 101 | pokemonPage: { lastUrlFetched }, 102 | } = getState(); 103 | 104 | const { url } = getUrlData(args); 105 | 106 | if (url === lastUrlFetched) return false; 107 | }, 108 | } 109 | ); 110 | -------------------------------------------------------------------------------- /src/features/pokemon-page/types.ts: -------------------------------------------------------------------------------- 1 | import type { 2 | NamedAPIResource, 3 | Pokemon, 4 | NamedAPIResourceList, 5 | } from "pokenode-ts"; 6 | 7 | export type PokemonPageItem = NamedAPIResource; 8 | export type PokemonPageList = NamedAPIResourceList; 9 | export type PokemonInfo = Partial & { 10 | name: string; 11 | }; 12 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import { BrowserRouter } from "react-router-dom"; 4 | import App from "./components/app"; 5 | import reportWebVitals from "./reportWebVitals"; 6 | import "./index.css"; 7 | 8 | const root = ReactDOM.createRoot( 9 | document.getElementById("root") as HTMLElement 10 | ); 11 | root.render( 12 | 13 | 14 | 15 | 16 | 17 | ); 18 | 19 | // If you want to start measuring performance in your app, pass a function 20 | // to log results (for example: reportWebVitals(console.log)) 21 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 22 | reportWebVitals(); 23 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/pages/details.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const LazyPokemonInfo = React.lazy( 4 | () => import("../features/pokemon-details/pokemon-info") 5 | ); 6 | 7 | export default function Details() { 8 | return ( 9 | Loading component...}> 10 | 11 | 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /src/pages/list.tsx: -------------------------------------------------------------------------------- 1 | import PokemonList from "../features/pokemon-page/pokemon-list"; 2 | 3 | export default function ListPage() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /src/pages/routes.ts: -------------------------------------------------------------------------------- 1 | import { generatePath } from "react-router-dom"; 2 | 3 | export const pokemonDetailsRoute = { 4 | path: "details/:pokemonName", 5 | generate(pokemonName: string) { 6 | return generatePath(this.path, { pokemonName: pokemonName as string }); 7 | }, 8 | }; 9 | -------------------------------------------------------------------------------- /src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /src/redux/hooks.ts: -------------------------------------------------------------------------------- 1 | import type { TypedUseSelectorHook } from "react-redux"; 2 | import { useDispatch, useSelector } from "react-redux"; 3 | import type { RootState, AppDispatch } from "./store"; 4 | 5 | // Use throughout your app instead of plain `useDispatch` and `useSelector` 6 | export const useAppDispatch = () => useDispatch(); 7 | export const useAppSelector: TypedUseSelectorHook = useSelector; 8 | -------------------------------------------------------------------------------- /src/redux/inject-slice-context.ts: -------------------------------------------------------------------------------- 1 | import type { Slice } from "@reduxjs/toolkit"; 2 | import React from "react"; 3 | 4 | export const InjectSliceContext = React.createContext< 5 | ((slice: Slice) => void) | null 6 | >(null); 7 | 8 | export function useInjectReduxSlice() { 9 | const injectReduxSlice = React.useContext(InjectSliceContext); 10 | 11 | if (!injectReduxSlice) throw new Error("Missing slice injector function!"); 12 | 13 | return injectReduxSlice; 14 | } 15 | -------------------------------------------------------------------------------- /src/redux/lazy-reducers.ts: -------------------------------------------------------------------------------- 1 | import { configureStore } from "@reduxjs/toolkit"; 2 | import pokemonDetailsSlice from "../features/pokemon-details/slice"; 3 | import { staticReducers } from "./static-reducers"; 4 | 5 | /** 6 | * Everything in this file is only meant for generating types 7 | */ 8 | 9 | const lazyReducers = { 10 | [pokemonDetailsSlice.name]: pokemonDetailsSlice.reducer, 11 | }; 12 | 13 | function buildCompleteStore() { 14 | return configureStore({ 15 | reducer: { ...lazyReducers, ...staticReducers }, 16 | }); 17 | } 18 | 19 | export type LazyReducers = typeof lazyReducers; 20 | 21 | export type CompleteStoreType = ReturnType; 22 | -------------------------------------------------------------------------------- /src/redux/static-reducers.ts: -------------------------------------------------------------------------------- 1 | import pokemonPageSlice from "../features/pokemon-page/slice"; 2 | import pokemonNamesSlice from "../features/pokemon-names/slice"; 3 | 4 | export const staticReducers = { 5 | [pokemonPageSlice.name]: pokemonPageSlice.reducer, 6 | [pokemonNamesSlice.name]: pokemonNamesSlice.reducer, 7 | }; 8 | 9 | export type StaticReducers = typeof staticReducers; 10 | -------------------------------------------------------------------------------- /src/redux/store.ts: -------------------------------------------------------------------------------- 1 | import type { ReducersMapObject, Slice } from "@reduxjs/toolkit"; 2 | import { combineReducers } from "@reduxjs/toolkit"; 3 | import { configureStore } from "@reduxjs/toolkit"; 4 | import type { CompleteStoreType, LazyReducers } from "./lazy-reducers"; 5 | import type { StaticReducers } from "./static-reducers"; 6 | import { staticReducers } from "./static-reducers"; 7 | 8 | type ReducerState = { 9 | [K in keyof T]: ReturnType; 10 | }; 11 | 12 | export type RootState = ReducerState & 13 | ReducerState; 14 | 15 | export function buildStore( 16 | preloadedState?: ReducerState | Partial 17 | ) { 18 | const store = configureStore({ 19 | reducer: staticReducers, 20 | preloadedState: preloadedState as ReducerState, 21 | }); 22 | 23 | const asyncReducers: ReducersMapObject = {}; 24 | 25 | /** 26 | * @see https://redux.js.org/usage/code-splitting#defining-an-injectreducer-function 27 | */ 28 | const injectSlice = (slice: Slice) => { 29 | if (asyncReducers[slice.name]) return; 30 | asyncReducers[slice.name] = slice.reducer; 31 | 32 | store.replaceReducer( 33 | combineReducers({ ...staticReducers, ...asyncReducers }) 34 | ); 35 | }; 36 | 37 | return { store, injectSlice }; 38 | } 39 | 40 | export type AppDispatch = CompleteStoreType["dispatch"]; 41 | -------------------------------------------------------------------------------- /src/redux/types.ts: -------------------------------------------------------------------------------- 1 | export type LoadableResource = { 2 | loading: boolean; 3 | error: E; 4 | data: T; 5 | }; 6 | -------------------------------------------------------------------------------- /src/redux/with-lazy-redux.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useInjectReduxSlice } from "./inject-slice-context"; 3 | import type { Slice } from "@reduxjs/toolkit"; 4 | 5 | export default function withLazyRedux

( 6 | Component: React.JSXElementConstructor

, 7 | slice: Slice 8 | ) { 9 | return function LazyRedux(props: P) { 10 | const injectSlice = useInjectReduxSlice(); 11 | const [sliceReady, setSliceReady] = React.useState(false); 12 | 13 | React.useEffect(() => { 14 | if (sliceReady) return; 15 | 16 | injectSlice(slice); 17 | setSliceReady(true); 18 | }, [injectSlice, sliceReady]); 19 | 20 | return sliceReady ? : null; 21 | }; 22 | } 23 | -------------------------------------------------------------------------------- /src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import type { ReportHandler } from "web-vitals"; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /src/setupTests.ts: -------------------------------------------------------------------------------- 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/structures/trie.test.ts: -------------------------------------------------------------------------------- 1 | import Trie from "./trie"; 2 | 3 | describe("Trie", () => { 4 | let trie: Trie; 5 | 6 | beforeEach(() => { 7 | trie = new Trie(); 8 | }); 9 | 10 | describe("construtor", () => { 11 | beforeEach(() => { 12 | trie = new Trie("aaa"); 13 | }); 14 | 15 | it("sets default value", () => { 16 | expect(trie.val).toEqual("aaa"); 17 | }); 18 | 19 | it("initializes children as empty map", () => { 20 | expect(trie.children).toEqual({}); 21 | }); 22 | 23 | it("should not be a word by default", () => { 24 | expect(trie.isWord).toEqual(false); 25 | }); 26 | }); 27 | 28 | describe("insert", () => { 29 | it("inserts a word", () => { 30 | trie.insert("ab"); 31 | expect(trie.children?.a).toBeDefined(); 32 | expect(trie.children?.a?.children.b).toBeDefined(); 33 | expect(trie.children?.a?.isWord).toEqual(false); 34 | expect(trie.children?.a?.children?.b?.isWord).toEqual(true); 35 | }); 36 | 37 | it("inserts multiple words in the same root", () => { 38 | trie.insert("a"); 39 | trie.insert("ab"); 40 | expect(trie.children?.a?.isWord).toEqual(true); 41 | expect(trie.children?.a?.children?.b?.isWord).toEqual(true); 42 | }); 43 | }); 44 | 45 | describe("search & startsWith", () => { 46 | beforeEach(() => { 47 | trie.insert("dog"); 48 | trie.insert("dogs"); 49 | trie.insert("door"); 50 | }); 51 | 52 | it("searches for words", () => { 53 | expect(trie.search("dog")).toEqual(true); 54 | }); 55 | 56 | it("does not match incomplete words by default", () => { 57 | expect(trie.search("do")).toEqual(false); 58 | }); 59 | 60 | it("matches partial words if partial is set", () => { 61 | expect(trie.search("do", true)).toEqual(true); 62 | expect(trie.startsWith("do")).toEqual(true); 63 | }); 64 | 65 | it("matches full words if partial is set", () => { 66 | expect(trie.search("dogs", true)).toEqual(true); 67 | expect(trie.startsWith("dogs")).toEqual(true); 68 | }); 69 | 70 | it("does not match non existing words", () => { 71 | expect(trie.search("doors")).toEqual(false); 72 | }); 73 | 74 | it("does not match non existing words with partials", () => { 75 | expect(trie.search("doors", true)).toEqual(false); 76 | expect(trie.startsWith("doors")).toEqual(false); 77 | }); 78 | }); 79 | 80 | describe("when multiple words are inserted", () => { 81 | beforeEach(() => { 82 | trie.insert("dog"); 83 | trie.insert("dogs"); 84 | trie.insert("door"); 85 | trie.insert("day"); 86 | trie.insert("cat"); 87 | }); 88 | 89 | describe("getAllWords", () => { 90 | it("gets all words", () => { 91 | const words = Array.from(trie.getAllWords()); 92 | expect(words.length).toEqual(5); 93 | expect(words).toEqual(["dog", "dogs", "door", "day", "cat"]); 94 | }); 95 | 96 | it("applies prefix", () => { 97 | const words = Array.from(trie.getAllWords("Adrian's ")); 98 | expect(words.length).toEqual(5); 99 | expect(words).toEqual([ 100 | "Adrian's dog", 101 | "Adrian's dogs", 102 | "Adrian's door", 103 | "Adrian's day", 104 | "Adrian's cat" 105 | ]); 106 | }); 107 | }); 108 | 109 | describe("autocomplete", () => { 110 | it("returns all words if prefix is not provided", () => { 111 | const words = Array.from(trie.autocomplete()); 112 | expect(words.length).toBe(5); 113 | expect(words).toEqual(["dog", "dogs", "door", "day", "cat"]); 114 | }); 115 | 116 | it("returns words matching the provided prefix", () => { 117 | const words = Array.from(trie.autocomplete("do")); 118 | expect(words.length).toBe(3); 119 | expect(words).toEqual(["dog", "dogs", "door"]); 120 | }); 121 | 122 | it("handles non-existing words prefixes", () => { 123 | const words = Array.from(trie.autocomplete("co")); 124 | expect(words.length).toBe(0); 125 | expect(words).toEqual([]); 126 | }); 127 | }); 128 | 129 | describe("remove", () => { 130 | it("removes a word", () => { 131 | trie = new Trie(); 132 | trie.insert("a"); 133 | expect(trie.remove("a")).toEqual(true); 134 | expect(Array.from(trie.getAllWords())).toEqual([]); 135 | }); 136 | 137 | it("removes a word and keep others", () => { 138 | trie = new Trie(); 139 | trie.insert("a"); 140 | trie.insert("ab"); 141 | expect(trie.remove("a")).toEqual(true); 142 | expect(Array.from(trie.getAllWords())).toEqual(["ab"]); 143 | }); 144 | 145 | it("removes surrounding word", () => { 146 | trie = new Trie(); 147 | trie.insert("a"); 148 | trie.insert("ab"); 149 | expect(trie.remove("ab")).toEqual(true); 150 | expect(Array.from(trie.getAllWords())).toEqual(["a"]); 151 | }); 152 | 153 | it("should return false when word is not found", () => { 154 | expect(trie.remove("not there")).toBe(false); 155 | }); 156 | 157 | it("should remove words in between and still match", () => { 158 | expect(trie.remove("dog")).toBe(true); 159 | expect(trie.search("dogs")).toBe(true); 160 | expect(trie.startsWith("dog")).toBe(true); 161 | expect(Array.from(trie.getAllWords())).toEqual(["dogs", "door", "day", "cat"]); 162 | }); 163 | 164 | it("should remove word and no longer match partials", () => { 165 | expect(trie.remove("dogs")).toBe(true); 166 | expect(trie.search("dogs")).toBe(false); 167 | expect(trie.search("dog")).toBe(true); 168 | expect(trie.startsWith("dog")).toBe(true); 169 | expect(Array.from(trie.getAllWords())).toEqual(["dog", "door", "day", "cat"]); 170 | }); 171 | }); 172 | }); 173 | }); 174 | -------------------------------------------------------------------------------- /src/structures/trie.ts: -------------------------------------------------------------------------------- 1 | type Node = { 2 | [key: string]: Trie | undefined; 3 | }; 4 | 5 | /** 6 | * Inspired by https://github.com/amejiarosario/dsa.js-data-structures-algorithms-javascript/blob/master/src/data-structures/trees/trie.js 7 | * @tutorial https://www.geeksforgeeks.org/advantages-trie-data-structure/ 8 | * @tutorial https://practice.geeksforgeeks.org/problems/difference-between-bst-and-tries 9 | */ 10 | export default class Trie { 11 | val: string | undefined; 12 | children: Node; 13 | isWord: boolean; 14 | 15 | constructor(val?: string) { 16 | this.val = val; 17 | this.children = {}; 18 | this.isWord = false; 19 | } 20 | 21 | /** 22 | * Insert word into trie and mark last element as such. 23 | */ 24 | insert(word: string) { 25 | let curr: Trie = this; 26 | 27 | for (const char of word) { 28 | curr.children[char] = curr.children[char] || new Trie(char); 29 | curr = curr.children[char]!; 30 | } 31 | 32 | curr.isWord = true; 33 | } 34 | 35 | /** 36 | * Return true if found the word to be removed, otherwise false. 37 | * @param word - The word to remove 38 | */ 39 | remove(word: string) { 40 | let curr: Trie = this; 41 | const stack = [curr]; 42 | 43 | // find word and stack path 44 | for (const char of word) { 45 | const child = curr.children[char]; 46 | if (!child) return false; 47 | curr = child; 48 | stack.push(curr); 49 | } 50 | 51 | let child = stack.pop(); 52 | if (child) child.isWord = false; 53 | 54 | // remove non words without children 55 | while (stack.length) { 56 | const parent = stack.pop(); 57 | if ( 58 | child?.val && 59 | !child.isWord && 60 | Object.keys(child.children).length === 0 61 | ) 62 | delete parent?.children[child.val]; 63 | 64 | child = parent; 65 | } 66 | 67 | return true; 68 | } 69 | 70 | /** 71 | * Return last node that matches word or prefix, or false if not found. 72 | */ 73 | searchNode(word: string) { 74 | let curr: Trie = this; 75 | 76 | for (const char of word) { 77 | const child = curr.children[char]; 78 | if (!child) return false; 79 | curr = child; 80 | } 81 | 82 | return curr; 83 | } 84 | 85 | /** 86 | * Search for complete word (by default) or partial if flag is set. 87 | * @param word - Word to search. 88 | * @param partial - Whether or not match partial matches. 89 | */ 90 | search(word: string, partial?: boolean) { 91 | const curr = this.searchNode(word); 92 | if (!curr) return false; 93 | 94 | return partial ? true : curr.isWord; 95 | } 96 | 97 | /** 98 | * Return true if any word on the trie starts with the given prefix 99 | * @param prefix - Partial word to search. 100 | */ 101 | startsWith(prefix: string) { 102 | return this.search(prefix, true); 103 | } 104 | 105 | /** 106 | * Returns all the words from the current `node`. 107 | * Uses backtracking. 108 | * @param prefix - The prefix to append to each word. 109 | * @param node - Current node to start backtracking. 110 | */ 111 | *getAllWords(prefix = "", node: Trie = this): IterableIterator { 112 | if (!node) return; 113 | 114 | if (node.isWord) yield prefix; 115 | 116 | for (const char of Object.keys(node.children)) 117 | yield* this.getAllWords(`${prefix}${char}`, node.children[char]); 118 | } 119 | 120 | /** 121 | * Return a list of words matching the prefix 122 | * @param prefix - The prefix to match. 123 | */ 124 | *autocomplete(prefix = ""): IterableIterator { 125 | const curr = this.searchNode(prefix); 126 | if (curr) yield* this.getAllWords(prefix, curr); 127 | } 128 | } 129 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "downlevelIteration": true, 10 | "allowJs": true, 11 | "skipLibCheck": true, 12 | "esModuleInterop": true, 13 | "allowSyntheticDefaultImports": true, 14 | "strict": true, 15 | "forceConsistentCasingInFileNames": true, 16 | "noFallthroughCasesInSwitch": true, 17 | "module": "esnext", 18 | "moduleResolution": "node", 19 | "resolveJsonModule": true, 20 | "isolatedModules": true, 21 | "noEmit": true, 22 | "jsx": "react-jsx" 23 | }, 24 | "include": [ 25 | "src" 26 | ] 27 | } 28 | --------------------------------------------------------------------------------