ERROR in ./src/Components/MainSection/MainSection/CardSection/CardSection.jsx 34:13-23
export 'fetchCards' (imported as 'fetchCards') was not found in '../../../Redux/actions' (possible exports: LOGIN_FAILURE, LOGIN_SUCCESS, loginFailure, loginSuccess, loginThunk)
ERROR in ./src/Components/Redux/reducer.js 9:9-28
export 'FETCH_CARDS_SUCCESS' (imported as 'FETCH_CARDS_SUCCESS') was not found in './actions' (possible exports: LOGIN_FAILURE, LOGIN_SUCCESS, loginFailure, loginSuccess, loginThunk) CardSection import React, { useEffect, useContext, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchCards } from '../../../Redux/actions';
import { SearchInput } from '../SearchInput/SearchInput';
import { Card } from '../Card/Card';
import { ThemeContext } from '../../../Selector/ThemeContext';
import classNames from 'classnames';
import style from './CardSection.module.css';

export function CardSection() {
    const dispatch = useDispatch();
    const { cards } = useSelector((state) => state.cards);
    const { theme } = useContext(ThemeContext);

    const [searchValue, setSearchValue] = useState('');
    const [debouncedSearchValue, setDebouncedSearchValue] =
        useState(searchValue);

    useEffect(() => {
        const handler = setTimeout(() => {
            setDebouncedSearchValue(searchValue);
        }, 300);

        return () => {
            clearTimeout(handler);
        };
    }, [searchValue]);

    useEffect(() => {
        dispatch(fetchCards(debouncedSearchValue));
    }, [dispatch, debouncedSearchValue]);

    const handleSearchChange = (value) => {
        setSearchValue(value);
    };

    return (
        <div>
            <SearchInput value={searchValue} onSearch={handleSearchChange} />
            <div
                className={classNames(style.cardSection, {
                    [style.darkTheme]: theme === 'dark'
                })}
            >
                {cards.length > 0 ? (
                    cards.map((cardObj) => (
                        <Card key={cardObj.id} cardObj={cardObj} />
                    ))
                ) : (
                    <p>No results found</p>
                )}
            </div>
        </div>
    );
}
action.js export const LOGIN_SUCCESS = 'LOGIN_SUCCESS';
export const LOGIN_FAILURE = 'LOGIN_FAILURE';

export const loginSuccess = () => ({
  type: LOGIN_SUCCESS,
});

export const loginFailure = (error) => ({
  type: LOGIN_FAILURE,
  payload: error,
});

export const loginThunk = (username, password) => {
  return async (dispatch) => {
    try {
      const response = await fetch('http://localhost:5000/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ username, password }),
      });
      
      if (response.status === 200) {
        dispatch(loginSuccess());
      } else {
        const { message } = await response.json();
        dispatch(loginFailure(message));
      }
    } catch (error) {
      dispatch(loginFailure('Network error'));
    }
  };
};
authReducer.js const initialState = {
    isAuthenticated: false
};

export const authReducer = (state = initialState, action) => {
    switch (action.type) {
        case 'LOGIN':
            return { ...state, isAuthenticated: true };
        case 'LOGOUT':
            return { ...state, isAuthenticated: false };
        default:
            return state;
    }
}; reducer.js import {
    FETCH_CARDS_SUCCESS,
} from './actions';

const initialState = {
    cards: []
};

export const cardsReducer = (state = initialState, action) => {
    switch (action.type) {
        case FETCH_CARDS_SUCCESS:
            return {
                ...state,
                cards: action.payload
            };

        default:
            return state;
    }
}; store.js import { createStore, combineReducers, applyMiddleware } from 'redux';
import { thunk } from 'redux-thunk';
import { cardsReducer } from './reducer';
import { authReducer } from './authReducer';

const rootReducer = combineReducers({
    cards: cardsReducer,
    auth: authReducer
});

export const store = createStore(rootReducer, applyMiddleware(thunk));
index.js require('dotenv').config();
const express = require('express');
const cors = require('cors');
const cards = require('./cards');
const app = express();
const PORT = 5000;

app.use(cors());
app.use(express.json());
app.use('/img', express.static('img'));

const validUsername = process.env.USERNAME;
const validPassword = process.env.PASSWORD;

app.post('/login', (req, res) => {
    const { username, password } = req.body;
    if (username === validUsername && password === validPassword) {
        res.status(200).json({ message: 'Login successful' });
    } else {
        res.status(401).json({ message: 'Invalid username or password' });
    }
});

app.get('/api/cards', (req, res) => {
    const { search } = req.query;

    if (search) {
        const searchLower = search.toLowerCase();
        const filteredCards = cards.filter((cardObj) => {
            const title = cardObj.card.text.heading.toLowerCase();
            const description = cardObj.card.text.description.toLowerCase();
            return (
                title.includes(searchLower) || description.includes(searchLower)
            );
        });

        return res.status(200).json(filteredCards);
    }

    res.status(200).json(cards);
});

app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});