From 33ff9e603bffaa1992842ba549d6cb42af0b6926 Mon Sep 17 00:00:00 2001 From: Anoop M D Date: Sun, 13 Mar 2022 17:43:21 +0530 Subject: [PATCH] feat: Add Folder to Collection --- .../Collection/CollectionItem/index.js | 21 +++++----- .../Collections/Collection/StyledWrapper.js | 6 +++ .../Sidebar/Collections/Collection/index.js | 40 +++++++++++++------ .../components/Sidebar/Collections/index.js | 2 +- renderer/components/Sidebar/TitleBar/index.js | 6 ++- renderer/providers/Store/actions.js | 4 ++ renderer/providers/Store/idb.js | 2 +- renderer/providers/Store/index.js | 21 +++++++++- renderer/providers/Store/reducer.js | 23 +++++++++++ 9 files changed, 99 insertions(+), 26 deletions(-) diff --git a/renderer/components/Sidebar/Collections/Collection/CollectionItem/index.js b/renderer/components/Sidebar/Collections/Collection/CollectionItem/index.js index 50812d60..5ee64d2a 100644 --- a/renderer/components/Sidebar/Collections/Collection/CollectionItem/index.js +++ b/renderer/components/Sidebar/Collections/Collection/CollectionItem/index.js @@ -1,15 +1,22 @@ import React, { useRef, forwardRef } from 'react'; import range from 'lodash/range'; import get from 'lodash/get'; +import actions from 'providers/Store/actions' +import { useStore } from 'providers/Store'; import { IconChevronRight, IconDots } from '@tabler/icons'; import classnames from 'classnames'; -import Dropdown from '../../../../Dropdown'; +import Dropdown from 'components/Dropdown'; import StyledWrapper from './StyledWrapper'; -const CollectionItem = ({item, collectionId, actions, dispatch, activeRequestTabId}) => { - const dropdownTippyRef = useRef(); +const CollectionItem = ({item, collectionId}) => { + const [store, storeDispatch] = useStore(); + const { + activeRequestTabId + } = store; + + const dropdownTippyRef = useRef(); const MenuIcon = forwardRef((props, ref) => { return (
@@ -32,7 +39,7 @@ const CollectionItem = ({item, collectionId, actions, dispatch, activeRequestTab return; } - dispatch({ + storeDispatch({ type: actions.SIDEBAR_COLLECTION_ITEM_CLICK, itemId: item.id, collectionId: collectionId @@ -40,7 +47,7 @@ const CollectionItem = ({item, collectionId, actions, dispatch, activeRequestTab }; const addRequest = () => { - dispatch({ + storeDispatch({ type: actions.ADD_REQUEST, itemId: item.id, collectionId: collectionId @@ -48,7 +55,6 @@ const CollectionItem = ({item, collectionId, actions, dispatch, activeRequestTab }; let indents = range(item.depth); - const onDropdownCreate = (ref) => dropdownTippyRef.current = ref; return ( @@ -121,9 +127,6 @@ const CollectionItem = ({item, collectionId, actions, dispatch, activeRequestTab key={i.id} item={i} collectionId={collectionId} - actions={actions} - dispatch={dispatch} - activeRequestTabId={activeRequestTabId} /> }) : null}
diff --git a/renderer/components/Sidebar/Collections/Collection/StyledWrapper.js b/renderer/components/Sidebar/Collections/Collection/StyledWrapper.js index 105f933c..734b5905 100644 --- a/renderer/components/Sidebar/Collections/Collection/StyledWrapper.js +++ b/renderer/components/Sidebar/Collections/Collection/StyledWrapper.js @@ -29,6 +29,12 @@ const Wrapper = styled.div` display: flex; } } + + div.tippy-box { + position: relative; + top: -0.625rem; + font-weight: 400; + } } `; diff --git a/renderer/components/Sidebar/Collections/Collection/index.js b/renderer/components/Sidebar/Collections/Collection/index.js index a8bf2c73..548b0888 100644 --- a/renderer/components/Sidebar/Collections/Collection/index.js +++ b/renderer/components/Sidebar/Collections/Collection/index.js @@ -1,14 +1,20 @@ import React, { forwardRef, useRef } from 'react'; -import { IconChevronRight, IconDots } from '@tabler/icons'; -import CollectionItem from './CollectionItem'; -import Dropdown from '../../../Dropdown'; import get from 'lodash/get'; import classnames from 'classnames'; +import { IconChevronRight, IconDots } from '@tabler/icons'; +import Dropdown from 'components/Dropdown'; +import actions from 'providers/Store/actions' +import { useStore } from 'providers/Store'; +import CollectionItem from './CollectionItem'; import StyledWrapper from './StyledWrapper'; -const Collection = ({collection, actions, dispatch, activeRequestTabId}) => { - const envDropdownTippyRef = useRef(); +const Collection = ({collection}) => { + const [store, storeDispatch] = useStore(); + + const { + activeRequestTabId + } = store; const menuDropdownTippyRef = useRef(); const onMenuDropdownCreate = (ref) => menuDropdownTippyRef.current = ref; @@ -25,22 +31,31 @@ const Collection = ({collection, actions, dispatch, activeRequestTabId}) => { }); const handleClick = (event) => { - let envTippyEl = get(envDropdownTippyRef, 'current.reference'); + let envTippyEl = get(menuDropdownTippyRef, 'current.reference'); if(envTippyEl && envTippyEl.contains && envTippyEl.contains(event.target)) { return; } - dispatch({ + storeDispatch({ type: actions.SIDEBAR_COLLECTION_CLICK, - id: collection.id + collectionUid: collection.uid }); }; + const addFolder = () => { + storeDispatch({ + type: actions.SIDEBAR_COLLECTION_ADD_FOLDER, + collectionUid: collection.uid + }); + }; + + const collectionItems = get(collection, 'current.items'); + return (
- {collection.name} + {collection.current.name}
} placement='bottom-start'>
@@ -53,6 +68,7 @@ const Collection = ({collection, actions, dispatch, activeRequestTabId}) => {
{ menuDropdownTippyRef.current.hide(); + addFolder(); }}> Add Folder
@@ -64,13 +80,13 @@ const Collection = ({collection, actions, dispatch, activeRequestTabId}) => {
{collection.collapsed ? (
- {collection.items && collection.items.length ? collection.items.map((i) => { + {collectionItems && collectionItems.length ? collectionItems.map((i) => { return }) : null} diff --git a/renderer/components/Sidebar/Collections/index.js b/renderer/components/Sidebar/Collections/index.js index 93199b4f..fc78bdf6 100644 --- a/renderer/components/Sidebar/Collections/index.js +++ b/renderer/components/Sidebar/Collections/index.js @@ -7,7 +7,7 @@ const Collections = ({collections, actions, dispatch, activeRequestTabId}) => { {collections && collections.length ? collections.map((c) => { return { uid: collectionUid, base: null, current: { - id: collectionUid, + uid: collectionUid, name: values.collectionName, items: [] }, - requestSync: true + userId: null, + hasChangedSinceLastSync: false, + disableSync: true }; saveCollectionToIdb(store.idbConnection, newCollection) diff --git a/renderer/providers/Store/actions.js b/renderer/providers/Store/actions.js index ed70de90..5e1002ec 100644 --- a/renderer/providers/Store/actions.js +++ b/renderer/providers/Store/actions.js @@ -1,5 +1,7 @@ const SIDEBAR_COLLECTION_CLICK = "SIDEBAR_COLLECTION_CLICK"; const SIDEBAR_COLLECTION_ITEM_CLICK = "SIDEBAR_COLLECTION_ITEM_CLICK"; +const SIDEBAR_COLLECTION_ADD_FOLDER = "SIDEBAR_COLLECTION_ADD_FOLDER"; +const LOAD_COLLECTIONS_FROM_IDB = "LOAD_COLLECTIONS_FROM_IDB"; const COLLECTION_CREATE = "COLLECTION_CREATE"; const REQUEST_TAB_CLICK = "REQUEST_TAB_CLICK"; const REQUEST_TAB_CLOSE = "REQUEST_TAB_CLOSE"; @@ -16,6 +18,8 @@ const IDB_CONNECTION_READY = "IDB_CONNECTION_READY"; export default { SIDEBAR_COLLECTION_CLICK, SIDEBAR_COLLECTION_ITEM_CLICK, + SIDEBAR_COLLECTION_ADD_FOLDER, + LOAD_COLLECTIONS_FROM_IDB, COLLECTION_CREATE, REQUEST_TAB_CLICK, REQUEST_TAB_CLOSE, diff --git a/renderer/providers/Store/idb.js b/renderer/providers/Store/idb.js index 1d13bbbe..30f172f4 100644 --- a/renderer/providers/Store/idb.js +++ b/renderer/providers/Store/idb.js @@ -13,7 +13,7 @@ export const saveCollectionToIdb = (connection, collection) => { }); }; -export const getCollectionsFromIdb = (connection, domain) => { +export const getCollectionsFromIdb = (connection) => { return new Promise((resolve, reject) => { connection .then((db) => { diff --git a/renderer/providers/Store/index.js b/renderer/providers/Store/index.js index fef77e00..881bde58 100644 --- a/renderer/providers/Store/index.js +++ b/renderer/providers/Store/index.js @@ -3,6 +3,8 @@ import reducer from './reducer'; import useIdb from './useIdb'; import { sendRequest } from '../../network'; import { nanoid } from 'nanoid'; +import actions from './actions'; +import {getCollectionsFromIdb} from './idb'; export const StoreContext = createContext(); @@ -112,7 +114,7 @@ const collection2 = { const initialState = { idbConnection: null, - collections: [collection, collection2], + collections: [], activeRequestTabId: null, requestQueuedToSend: null, requestTabs: [] @@ -120,6 +122,10 @@ const initialState = { export const StoreProvider = props => { const [state, dispatch] = useReducer(reducer, initialState); + + const { + idbConnection + } = state; useEffect(() => { if(state.requestQueuedToSend) { @@ -132,6 +138,19 @@ export const StoreProvider = props => { } }, [state.requestQueuedToSend]); + useEffect(() => { + if(idbConnection) { + getCollectionsFromIdb(idbConnection) + .then((collections) => { + dispatch({ + type: actions.LOAD_COLLECTIONS_FROM_IDB, + collections: collections + }); + }) + .catch((err) => console.log(err)); + } + }, [idbConnection]); + useIdb(dispatch); return ; diff --git a/renderer/providers/Store/reducer.js b/renderer/providers/Store/reducer.js index 1c9773a0..75b5ef39 100644 --- a/renderer/providers/Store/reducer.js +++ b/renderer/providers/Store/reducer.js @@ -21,6 +21,13 @@ const reducer = (state, action) => { }); } + case actions.LOAD_COLLECTIONS_FROM_IDB: { + return produce(state, (draft) => { + console.log(action.collections); + draft.collections = action.collections; + }); + } + case actions.SIDEBAR_COLLECTION_CLICK: { return produce(state, (draft) => { const collection = find(draft.collections, (c) => c.id === action.id); @@ -61,6 +68,22 @@ const reducer = (state, action) => { }); } + case actions.SIDEBAR_COLLECTION_ADD_FOLDER: { + return produce(state, (draft) => { + const collection = find(draft.collections, (c) => c.uid === action.collectionUid); + console.log(collection.current.items); + + if(collection) { + collection.current.items.push({ + "uid": nanoid(), + "name": "New Folder", + "depth": 1, + "items": [] + }); + } + }); + } + case actions.COLLECTION_CREATE: { return produce(state, (draft) => { // todo: collection names must be unique across a user account