mirror of
https://github.com/usebruno/bruno.git
synced 2024-11-21 23:43:15 +01:00
refactor: redux migration - collection create
This commit is contained in:
parent
9c44221971
commit
b3ac4ce644
@ -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,
|
||||
|
@ -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}
|
||||
|
||||
|
@ -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));
|
||||
};
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user