Day 5
Inca lucrez la aplicatie, am adaugat datele pe firebase, acolo ma folosesc de Realtime Database.
API-ul meu arat deocamdata asa:
https://nextify31-default-rtdb.europe-west1.firebasedatabase.app/store.json
Daca vreti sa aruncati o privire sa-mi da-ti niste sugestii ce trebuie sa mai adaug la acel API sau ce trebuie sa mai modific.
-Mai mult ca sigur trebuie sa adaug descriere pentru fiecare item
-Pentru imagini probabil o sa fie un array cu mai multe link-uri sau locatii din folder-ul public pentru ca deocamdata acolo sunt locate imaginile.
-Ma gandeam ca pentru fiecare categorie sa am cate un API diferit.
-Vreau sa creez si un formular unde se pot adauga iteme pentru fiecare categorie
-Acum am descoperit ca inca exista acel bug la carousel items:
Problema apare doar cand ajung la sfarsitul array-ului cu iteme
Poate reuseste cineva sa ma ajute sa gasesc solutia ca deja imi da foarte mari batai de cap
import { createContext, useReducer } from 'react';
import useWidth from '../hooks/useWidth';
export const CarouselViewContext = createContext({
start: null,
end: null,
});
const carouselViewReducer = (state, action) => {
switch (action.type) {
case 'increment':
return { start: state.start + 1, end: state.end + 1 };
case 'decrement':
return { start: state.start - 1, end: state.end - 1 };
default:
return state;
}
};
const CarouselViewProvider = ({ children }) => {
const width = useWidth();
function getNumItems(windowWidth) {
if (windowWidth < 621) return 1;
if (windowWidth < 921) return 2;
if (windowWidth < 1240) return 3;
return 4;
}
const [state, dispatch] = useReducer(carouselViewReducer, { start: 0 });
const values = { start: state.start, end: state.start + getNumItems(width) };
const value = { state: values, dispatch };
return <CarouselViewContext.Provider value={value}>{children}</CarouselViewContext.Provider>;
};
export default CarouselViewProvider;
import { useContext } from 'react';
import {
IoIosArrowDropleftCircle,
IoIosArrowDroprightCircle,
IoIosCloseCircle,
} from 'react-icons/io';
import useData from '../../../hooks/useData';
import { CarouselViewContext } from '../../../context/CarouselViewContext';
import CarouselButton from '../CarouselButton/CarouselButton';
import Item from '../Item/Item';
import styles from './CarouselItems.module.css';
export default function CarouselItems() {
const { items } = useData();
const { state, dispatch } = useContext(CarouselViewContext);
const { start, end } = state;
const dispatchIncrement = () => dispatch({ type: 'increment' });
const dispatchDecrement = () => dispatch({ type: 'decrement' });
return (
<>
<div className={styles.trendingContainer}>
<h3 className={styles.trending}>Trending</h3>
<div className={styles.buttonsContainer}>
{start > 0 ? (
<CarouselButton dispatch={dispatchDecrement} icon={<IoIosArrowDropleftCircle />} />
) : (
<CarouselButton icon={<IoIosCloseCircle />} />
)}
{end < items.length ? (
<CarouselButton dispatch={dispatchIncrement} icon={<IoIosArrowDroprightCircle />} />
) : (
<CarouselButton icon={<IoIosCloseCircle />} />
)}
</div>
</div>
<div className={styles.itemsContainer}>
{items?.slice(start, end).map((item) => (
<Item
key={item.id}
name={item.name}
url={`${item.category}/${item.subCategory}/${item.name
.replace(/ /g, '-')
.toLowerCase()}?i=${item.id}`}
price={item.price}
image={item.image}
alt={item.title}
/>
))}
</div>
</>
);
}
Am dat console.log(start, end) si end sare la 11 cand maresc fereastra. Nu stiu cat de bine ma exprim sau ma intelegesti dar m-a obosit destul de mult problema asta. Mai jos aveti un video ca sa intelegeti la ce ma refer.
Late edit:
Bug-ul a fost fixat, cineva de pe discord m-a ajuta cu solutia.
}, schimba directia din CSS dinamic la fiecare click.
