archive, export into archive

packages/web/src/widgets/ArchiveWidget.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import styled from 'styled-components';
+import _ from 'lodash';
+
+import { AppObjectList } from '../appobj/AppObjectList';
+import { useCurrentArchive, useOpenedTabs, useSavedSqlFiles, useSetCurrentArchive } from '../utility/globalState';
+import closedTabAppObject from '../appobj/closedTabAppObject';
+import {
+  SearchBoxWrapper,
+  WidgetsInnerContainer,
+  WidgetsMainContainer,
+  WidgetsOuterContainer,
+  WidgetTitle,
+} from './WidgetStyles';
+import savedSqlFileAppObject from '../appobj/savedSqlFileAppObject';
+import { useArchiveFiles, useArchiveFolders } from '../utility/metadataLoaders';
+import archiveFolderAppObject from '../appobj/archiveFolderAppObject';
+import archiveFileAppObject from '../appobj/archiveFileAppObject';
+
+function ArchiveFolderList() {
+  const folders = useArchiveFolders();
+
+  const setArchive = useSetCurrentArchive();
+
+  return (
+    <>
+      <WidgetTitle>Archive folder</WidgetTitle>
+      <WidgetsInnerContainer>
+        <AppObjectList
+          list={_.sortBy(folders, 'name')}
+          makeAppObj={archiveFolderAppObject()}
+          onObjectClick={(archive) => setArchive(archive.name)}
+        />
+      </WidgetsInnerContainer>
+    </>
+  );
+}
+
+function ArchiveFilesList() {
+  const folder = useCurrentArchive();
+  const files = useArchiveFiles({ folder });
+
+  return (
+    <>
+      <WidgetTitle>Archive files</WidgetTitle>
+      <WidgetsInnerContainer>
+        <AppObjectList
+          list={(files || []).map((file) => ({
+            fileName: file.name,
+            folderName: folder,
+          }))}
+          makeAppObj={archiveFileAppObject()}
+        />
+      </WidgetsInnerContainer>
+    </>
+  );
+}
+
+export default function ArchiveWidget() {
+  return (
+    <WidgetsMainContainer>
+      <WidgetsOuterContainer>
+        <ArchiveFolderList />
+      </WidgetsOuterContainer>
+      <WidgetsOuterContainer>
+        <ArchiveFilesList />
+      </WidgetsOuterContainer>
+    </WidgetsMainContainer>
+  );
+}

packages/web/src/widgets/WidgetContainer.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { useCurrentWidget } from '../utility/globalState';
+import ArchiveWidget from './ArchiveWidget';
 import DatabaseWidget from './DatabaseWidget';
 import FilesWidget from './FilesWidget';
 
@@ -7,5 +8,6 @@ export default function WidgetContainer() {
   const currentWidget = useCurrentWidget();
   if (currentWidget === 'database') return <DatabaseWidget />;
   if (currentWidget === 'file') return <FilesWidget />;
+  if (currentWidget === 'archive') return <ArchiveWidget />;
   return null;
 }

packages/web/src/widgets/WidgetIconPanel.js

@@ -10,7 +10,7 @@ const IconWrapper = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: ${props =>
+  background-color: ${(props) =>
     // @ts-ignore
     props.isSelected ? theme.widgetMenu.backgroundSelected : 'inherit'};
   &:hover {
@@ -23,6 +23,7 @@ export default function WidgetIconPanel() {
     {
       icon: 'fa-database',
       name: 'database',
+      title: 'Database connections',
     },
     // {
     //   icon: 'fa-table',
@@ -31,6 +32,12 @@ export default function WidgetIconPanel() {
     {
       icon: 'fa-file-alt',
       name: 'file',
+      title: 'Closed tabs & Saved SQL files',
+    },
+    {
+      icon: 'fa-archive',
+      name: 'archive',
+      title: 'Archive (saved tabular data)',
     },
     // {
     //   icon: 'fa-cog',
@@ -47,14 +54,15 @@ export default function WidgetIconPanel() {
 
   return (
     <>
-      {widgets.map(({ icon, name }) => (
+      {widgets.map(({ icon, name, title }) => (
         <IconWrapper
           key={icon}
           // @ts-ignore
           isSelected={name === currentWidget}
           onClick={() => setCurrentWidget(name === currentWidget ? null : name)}
+          title={title}
         >
-          <i className={`fas ${icon}`}/>
+          <i className={`fas ${icon}`} />
         </IconWrapper>
       ))}
     </>