first commit

src/redux/slices/groceryList/itemsSlice.js

@@ -0,0 +1,91 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const initialState = [
+    {
+        amount: 5,
+        person: 'Wolf',
+        details: 'margarita',
+
+        productId: '20fdc79cde62',
+        checked: false,
+    },
+    {
+        amount: 12,
+        person: 'Everyone',
+
+        productId: '20fdc79cde63',
+        checked: false,
+    },
+    {
+        amount: 2,
+        person: 'Bart',
+
+        productId: '20fdc79cde64',
+        checked: false,
+    },
+    {
+        amount: 2,
+        person: 'Storm',
+        details: 'Gezout',
+
+        productId: '20fdc79cde60',
+        checked: false,
+    },
+
+]
+
+const itemsSlice = createSlice({
+    name: 'items',
+    initialState,
+    reducers: {
+        itemAdded: {
+            reducer(state, action) {
+                state.push(action.payload);
+            },
+            prepare(productId, amount, person, details) {
+                return {
+                    payload: {
+                        amount: Number(amount),
+                        person: person,
+                        details: details,
+
+                        productId: productId,
+                        checked: false,
+                    }
+                }
+            }
+        },
+        checkToggle: {
+            reducer(state, action) {
+                state.find((item) => item.productId === action.payload.productId).checked = !state.find((item) => item.productId === action.payload.productId).checked;
+            },
+            prepare(productId) {
+                return {
+                    payload: {
+                        productId: productId
+                    }
+                }
+            }
+        },
+        amountUp: {
+            reducer(state, action) {
+                state.find((item) => item.productId === action.payload.id).amount += Number(action.payload.amount);
+            },
+            prepare(id, amount) {
+                return {
+                    payload: {
+                        id,
+                        amount,
+                    }
+                }
+            }
+        },
+        removeCheckedItems(state){
+            return state.filter(item=>item.checked === false)
+        }
+    },
+});
+
+export const { itemAdded, checkToggle, amountUp, removeCheckedItems } = itemsSlice.actions;
+
+export default itemsSlice.reducer;

src/redux/slices/groceryList/productsSlice.js

@@ -0,0 +1,96 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const initialState = [
+    {
+        productName: 'Pizza',
+        tag: 'Meal',
+        image: 'https://media-cdn.tripadvisor.com/media/photo-s/15/2d/23/07/domino-s-pizza.jpg',
+        price: 2.49,
+        nutrients: [{ calories: 120 }, { proteins: 20 }],
+
+
+        checked: false,
+        id: '20fdc79cde60',
+    },
+    {
+        productName: 'Lasagne',
+        tag: 'Meal',
+        image: 'https://www.kitchensanctuary.com/wp-content/uploads/2020/10/Lasagne-square-FS-79.jpg',
+        price: 1.99,
+
+        checked: false,
+        id: '20fdc79cde64',
+    },
+    {
+        productName: 'Aïki noodles',
+        tag: 'Instant',
+        image: 'https://dhf6qt42idbhy.cloudfront.net/medias/sys_master/h3b/h37/10286562541598.jpg',
+        nutrients: [{ calories: 120 }, { proteins: 20 }],
+        price: 1.39,
+
+        checked: false,
+        id: '20fdc79cde63',
+    },
+    {
+        productName: 'Gedroogde worstjes',
+        tag: 'Snack',
+        image: 'https://www.aldi.be/content/aldi/belgium/promotions/source-localenhancement/2019/2019-01/2019-01-02/vast_assortiment/1308/1/0/_jcr_content/assets/imported-images/BILD_INTERNET2/1308_PRIMARY_0_nl-fr-de_Mini_sticks_100_g_Panda_GROEP.png/_jcr_content/renditions/opt.1250w.png.res/1590539744886/opt.1250w.png',
+        price: 1.79,
+
+
+        checked: false,
+        id: '20fdc79cde62',
+    },
+    {
+        productName: 'Berliner ball',
+        tag: 'Snack',
+        image: 'https://upload.wikimedia.org/wikipedia/commons/4/4c/Berliner-Pfannkuchen.jpg',
+        price: 1.79,
+
+
+        checked: false,
+        id: '20fdc79cde61',
+    },
+]
+
+const productsSlice = createSlice({
+    name: 'products',
+    initialState,
+    reducers: {
+        productAdded: {
+            reducer(state, action) {
+                state.push(action.payload);
+            },
+            prepare(productName, tag, price, image, nutrients) {
+                return {
+                    payload: {
+                        productName,
+                        tag,
+                        price,
+                        image,
+                        nutrients,
+
+                        id: Math.floor((1 + Math.random()) * 0x1000000000000).toString(16).substring(1),
+                        checked: false,
+                    }
+                }
+            }
+        },
+        checkToggle: {
+            reducer(state, action) {
+                state.find((product) => product.id === action.payload.id).checked = !state.find((product) => product.id === action.payload.id).checked;
+            },
+            prepare(id) {
+                return {
+                    payload: {
+                        id: id
+                    }
+                }
+            }
+        },
+    },
+});
+
+export const { productAdded, checkToggle } = productsSlice.actions;
+
+export default productsSlice.reducer;

src/redux/slices/groceryList/storageSlice.js

@@ -0,0 +1,13 @@
+import {createSlice} from '@reduxjs/toolkit'
+
+const initialState = [
+
+]
+
+const storageSlice = createSlice({
+    name: 'storage',
+    initialState,
+    reducers:{
+        
+    }
+})

src/redux/slices/groceryList/tagsSlice.js

@@ -0,0 +1,33 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const initialState = [
+    { tagName: 'no-tag', color: '#253f34' },
+    { tagName: 'Meat', color: '#ef5350' },
+    { tagName: 'Vegetable', color: '#BDD684' },
+    { tagName: 'Meal', color: '#FA9600' },
+    { tagName: 'Snack', color: '#9575CD' },
+    { tagName: 'Instant', color: '#86CAC5' },
+]
+
+const tagsSlice = createSlice({
+    name: 'tags',
+    initialState,
+    reducers: {
+        tagAdded: {
+            reducer(state, action) {
+                state.push(action.payload)
+            },
+            prepare(tagName, color) {
+                return {
+                    payload: {
+                        tagName,
+                        color
+                    }
+                }
+            }
+        }
+    }
+})
+
+export const {tagAdded} = tagsSlice.actions
+export default tagsSlice.reducer

src/redux/slices/groceryList/toggleSlice.js

@@ -0,0 +1,27 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const initialState = {
+    addItemModalVisible: false,
+    addProductModalVisible: false,
+    popupVisibility: false,
+}
+const toggleSlice = createSlice({
+    name: 'toggle',
+    initialState,
+    reducers: {
+        toggleVisibility: {
+            reducer(state, action) {
+                state[action.payload] = !state[action.payload];
+            },
+            prepare(toggleAction) {
+                return {
+                    payload: toggleAction
+                }
+            },
+        },
+    },
+});
+
+export const { toggleVisibility } = toggleSlice.actions;
+
+export default toggleSlice.reducer;

src/redux/store.js

@@ -0,0 +1,17 @@
+import { configureStore } from '@reduxjs/toolkit';
+
+import itemsReducer from './slices/groceryList/itemsSlice';
+import productsReducer from './slices/groceryList/productsSlice';
+import toggleReducer from './slices/groceryList/toggleSlice';
+import tagsReducer from './slices/groceryList/tagsSlice';
+
+
+
+export default configureStore({
+  reducer: {
+    items: itemsReducer,
+    products: productsReducer,
+    tags: tagsReducer,
+    toggle: toggleReducer,
+  },
+})