refactor: redux migration - collection create

This commit is contained in:
Anoop M D 2022-03-18 03:11:50 +05:30
parent 9c44221971
commit b3ac4ce644
3 changed files with 33 additions and 43 deletions

View File

@ -3,7 +3,7 @@ import { useFormik } from 'formik';
import * as Yup from 'yup';
import Modal from '../../Modal';
const CreateCollection = ({handleConfirm, handleCancel, actions, dispatch}) => {
const CreateCollection = ({handleConfirm, handleCancel}) => {
const inputRef = useRef();
const formik = useFormik({
enableReinitialize: true,

View File

@ -1,18 +1,16 @@
import React, { useState, forwardRef, useRef } from 'react';
import {nanoid} from 'nanoid';
import Toast from 'components/Toast';
import Dropdown from 'components/Dropdown';
import actions from 'providers/Store/actions'
import { saveCollectionToIdb } from 'providers/Store/idb';
import { useStore } from 'providers/Store';
import { useDispatch } from 'react-redux';
import { createCollection } from 'providers/ReduxStore/slices/collections';
import { IconDots } from '@tabler/icons';
import CreateCollection from '../CreateCollection';
import StyledWrapper from './StyledWrapper';
const TitleBar = () => {
const [modalOpen, setModalOpen] = useState(false);
const [store, storeDispatch] = useStore();
const [showToast, setShowToast] = useState({show: false});
const dispatch = useDispatch();
const menuDropdownTippyRef = useRef();
const onMenuDropdownCreate = (ref) => menuDropdownTippyRef.current = ref;
@ -28,38 +26,8 @@ const TitleBar = () => {
const handleCloseToast = () => setShowToast({show: false});
const handleConfirm = (values) => {
// dispatch({
// name: values.collectionName,
// type: actions.COLLECTION_CREATE
// });
setModalOpen(false);
if(!store.idbConnection) {
setShowToast({
show: true,
type: 'error',
text: 'IndexedDB Error: idb connection is null'
});
return;
}
const newCollection = {
uid: nanoid(),
name: values.collectionName,
items: [],
environments: [],
userId: null
};
saveCollectionToIdb(store.idbConnection, newCollection)
.then(() => console.log('Collection created'))
.catch((err) => {
console.error(err);
setShowToast({
show: true,
type: 'error',
text: 'IndexedDB Error: Unable to save collection'
});
});
dispatch(createCollection(values.collectionName))
};
return (
@ -69,8 +37,6 @@ const TitleBar = () => {
<CreateCollection
handleCancel={handleCancel}
handleConfirm={handleConfirm}
actions={actions}
dispatch={storeDispatch}
/>
) : null}

View File

@ -1,7 +1,10 @@
import { nanoid } from 'nanoid';
import { createSlice } from '@reduxjs/toolkit'
import { getCollectionsFromIdb } from 'utils/idb';
import { getCollectionsFromIdb, saveCollectionToIdb } from 'utils/idb';
import { findCollectionByUid } from 'utils/collections';
// todo: errors should be tracked in each slice and displayed as toasts
const initialState = {
collections: []
};
@ -10,9 +13,12 @@ export const collectionsSlice = createSlice({
name: 'app',
initialState,
reducers: {
loadCollections: (state, action) => {
_loadCollections: (state, action) => {
state.collections = action.payload;
},
_createCollection: (state, action) => {
state.collections.push(action.payload);
},
collectionClicked: (state, action) => {
const collection = findCollectionByUid(state.collections, action.payload);
@ -23,11 +29,29 @@ export const collectionsSlice = createSlice({
}
});
export const { loadCollections, collectionClicked } = collectionsSlice.actions;
export const {
_loadCollections,
_createCollection,
collectionClicked
} = collectionsSlice.actions;
export const loadCollectionsFromIdb = () => (dispatch) => {
getCollectionsFromIdb(window.__idb)
.then((collections) => dispatch(loadCollections(collections)))
.then((collections) => dispatch(_loadCollections(collections)))
.catch((err) => console.log(err));
};
export const createCollection = (collectionName) => (dispatch) => {
const newCollection = {
uid: nanoid(),
name: collectionName,
items: [],
environments: [],
userId: null
};
saveCollectionToIdb(window.__idb, newCollection)
.then(() => dispatch(_createCollection(newCollection)))
.catch((err) => console.log(err));
};