pinterest-like-image-gallery

1
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
2

3
interface ImageItem {
4
    id: number;
5
    url: string;
6
    comment: string;
7
}
8

9
interface GalleryState {
10
    items: Array<ImageItem>;
11
    imageUrl: string;
12
    comment: string;
13
}
14

15
const initialState: GalleryState = {
16
    items: [],
17
    imageUrl: "",
18
    comment: "",
19
};
20

21
const gallerySlice = createSlice({
22
    name: "gallery",
23
    initialState,
24
    reducers: {
25
        setItems: (state, action: PayloadAction<ImageItem[]>) => {
26
            state.items = action.payload;
27
        },
28
        setImageUrl: (state, action: PayloadAction<string>) => {
29
            state.imageUrl = action.payload;
30
        },
31
        setComment: (state, action: PayloadAction<string>) => {
32
            state.comment = action.payload;
33
        },
34
        addItem: (state) => {
35
            const lastId =
36
                state.items.length > 0
37
                    ? state.items[state.items.length - 1].id
38
                    : 0;
39
            state.items.push({
40
                id: lastId + 1,
41
                url: state.imageUrl,
42
                comment: state.comment,
43
            });
44
            state.imageUrl = "";
45
            state.comment = "";
46
        },
47
        removeItem: (state, action: PayloadAction<number>) => {
48
            state.items = state.items.filter(
49
                (item) => item.id !== action.payload
50
            );
51
        },
52
        updateComment: (
53
            state,
54
            action: PayloadAction<{ id: number; comment: string }>
55
        ) => {
56
            const item = state.items.find((i) => i.id === action.payload.id);
57
            if (item) {
58
                item.comment = action.payload.comment;
59
            }
60
        },
61
    },
62
});
63

64
export const {
65
    setItems,
66
    setImageUrl,
67
    setComment,
68
    addItem,
69
    removeItem,
70
    updateComment,
71
} = gallerySlice.actions;
72
export default gallerySlice.reducer;
73