bruno/renderer/components/Sidebar/TitleBar/index.js

108 lines
3.2 KiB
JavaScript
Raw Normal View History

2022-03-07 13:44:49 +01:00
import React, { useState, forwardRef, useRef } from 'react';
2022-03-10 04:31:05 +01:00
import {nanoid} from 'nanoid';
import Toast from 'components/Toast';
import Dropdown from 'components/Dropdown';
import { saveCollectionToIdb } from 'providers/Store/idb';
import { useStore } from 'providers/Store';
2022-03-07 13:44:49 +01:00
import { IconDots } from '@tabler/icons';
2022-03-10 04:31:05 +01:00
import CreateCollection from '../CreateCollection';
2022-03-07 13:44:49 +01:00
import StyledWrapper from './StyledWrapper';
2022-03-10 04:31:05 +01:00
const TitleBar = ({dispatch, actions}) => {
2022-03-07 13:44:49 +01:00
const [modalOpen, setModalOpen] = useState(false);
2022-03-10 04:31:05 +01:00
const [store, storeDispatch] = useStore();
const [showToast, setShowToast] = useState({show: false});
2022-03-07 13:44:49 +01:00
const menuDropdownTippyRef = useRef();
const onMenuDropdownCreate = (ref) => menuDropdownTippyRef.current = ref;
const MenuIcon = forwardRef((props, ref) => {
return (
<div ref={ref} className="dropdown-icon cursor-pointer">
<IconDots size={22}/>
</div>
);
});
2022-03-10 04:31:05 +01:00
const handleCancel = () => setModalOpen(false);
const handleCloseToast = () => setShowToast({show: false});
2022-03-07 13:44:49 +01:00
const handleConfirm = (values) => {
2022-03-10 04:31:05 +01:00
// dispatch({
// name: values.collectionName,
// type: actions.COLLECTION_CREATE
// });
2022-03-07 13:44:49 +01:00
setModalOpen(false);
2022-03-10 04:31:05 +01:00
console.log(store.idbConnection);
if(!store.idbConnection) {
setShowToast({
show: true,
type: 'error',
text: 'IndexedDB Error: idb connection is null'
});
return;
}
const collectionUid = nanoid();
const newCollection = {
uid: collectionUid,
base: null,
current: {
id: collectionUid,
name: values.collectionName,
items: []
},
requestSync: true
};
saveCollectionToIdb(store.idbConnection, newCollection)
.then(() => console.log('Collection created'))
.catch((err) => {
setShowToast({
show: true,
type: 'error',
text: 'IndexedDB Error: Unable to save collection'
});
});
2022-03-07 13:44:49 +01:00
};
return (
<StyledWrapper className="px-2 py-2 flex items-center">
2022-03-10 04:31:05 +01:00
{showToast.show && <Toast text={showToast.text} type={showToast.type} duration={showToast.duration} handleClose={handleCloseToast}/>}
2022-03-07 13:44:49 +01:00
{modalOpen ? (
<CreateCollection
handleCancel={handleCancel}
handleConfirm={handleConfirm}
actions={actions}
dispatch={dispatch}
/>
) : null}
<div>
<span className="ml-2">Collections</span>
</div>
<div className="collection-dropdown flex flex-grow items-center justify-end">
<Dropdown onCreate={onMenuDropdownCreate} icon={<MenuIcon />} placement='bottom-start'>
<div className="dropdown-item" onClick={(e) => {
menuDropdownTippyRef.current.hide();
setModalOpen(true);
}}>
Create Collection
</div>
<div className="dropdown-item" onClick={(e) => {
menuDropdownTippyRef.current.hide();
}}>
Import Collection
</div>
<div className="dropdown-item" onClick={(e) => {
menuDropdownTippyRef.current.hide();
}}>
Settings
</div>
</Dropdown>
</div>
</StyledWrapper>
)
};
2022-03-10 04:31:05 +01:00
export default TitleBar;