Skip to content

Dilafruz-17 - App State Management - #6

Open
Dilafruz-17 wants to merge 4 commits into
mainfrom
app-state-management
Open

Dilafruz-17 - App State Management#6
Dilafruz-17 wants to merge 4 commits into
mainfrom
app-state-management

Conversation

@Dilafruz-17

Copy link
Copy Markdown
Owner

Task

https://github.com/rolling-scopes-school/tasks/blob/master/tasks/react/state-management.md

Screenshot

image

Deployment

https://cute-raindrop-bf5cda.netlify.app/

Done 18.05.2026 / Deadline 26.05.2026

Score: 100 / 100

Feature 1: State Management (35/35)

  • Redux Toolkit integrated
  • Store properly configured and used

Feature 2: Selected Items (25/25)

  • Each item has a checkbox
  • Selections persist across navigation
  • Unselecting removes from state

Feature 3: Flyout (15/15)

  • Sticky bottom panel when item selected
  • Always visible, does not scroll out
  • Shows selected items count
  • Unselect all and Download buttons work

Feature 4: CSV Download (10/10)

  • Native Blob API used
  • CSV contains name, height, weight, types, url
  • File name includes item count (e.g. 1_items.csv)

Feature 5: Theme (15/15)

  • Context API used
  • Light/dark theme affects whole app
  • Toggle button in header

@netlify

netlify Bot commented May 18, 2026

Copy link
Copy Markdown

Deploy Preview for bejewelled-narwhal-df5d36 ready!

Name Link
🔨 Latest commit 7d1ac67
🔍 Latest deploy log https://app.netlify.com/projects/bejewelled-narwhal-df5d36/deploys/6a0b641ee5a03e00089d814f
😎 Deploy Preview https://deploy-preview-6--bejewelled-narwhal-df5d36.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@vercel

vercel Bot commented May 18, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
class-components Ready Ready Preview, Comment May 18, 2026 7:10pm

@netlify

netlify Bot commented May 18, 2026

Copy link
Copy Markdown

Deploy Preview for cute-raindrop-bf5cda ready!

Name Link
🔨 Latest commit 7d1ac67
🔍 Latest deploy log https://app.netlify.com/projects/cute-raindrop-bf5cda/deploys/6a0b641e7803600008af27ff
😎 Deploy Preview https://deploy-preview-6--cute-raindrop-bf5cda.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@Dilafruz-17 Dilafruz-17 changed the title App state management Dilafruz-17 - App State Management May 23, 2026
Comment thread src/api/pokemonApi.ts
@@ -0,0 +1,36 @@
import { ApiResponse, PokemonDetail } from '../types';

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

add allias for import

Comment thread src/api/pokemonApi.ts
@@ -0,0 +1,36 @@
import { ApiResponse, PokemonDetail } from '../types';

const BASE_URL = 'https://pokeapi.co/api/v2';

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

move to env file

}

function CardList({ pokemons, error, onCardClick }: CardListProps) {
if (error) {

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

move error to parent component

import { clearAll } from '../../store/selectedSlice';
import { PokemonDetail } from '../../types';

function downloadCSV(items: PokemonDetail[]) {

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

move to helpers folder


const handleSearch = () => {
const trimmed = inputValue.trim();
setValue(trimmed);

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

dont need setInputValue

/>
<button className="search-bar__button" onClick={handleSearch}>
<span>Search</span>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

move svg to assets/images/icon.svg and import

@@ -0,0 +1,18 @@
import { Component } from 'react';

class Spinner extends Component {

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why is it class component?

Comment thread src/pages/MainPage.tsx

const page = parseInt(searchParams.get('page') ?? '1');

const [pokemons, setPokemons] = useState<PokemonDetail[]>([]);

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

use state manager

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants