#228 Add folder with listview

Author: Polleps

data-browser/src/components/NewInstanceButton/NewBookmarkButton.tsx

@@ -1,5 +1,5 @@
 import { classes, properties, useResource, useTitle } from '@tomic/react';
-import React, { useCallback, useState } from 'react';
+import React, { FormEvent, useCallback, useState } from 'react';
 import { Button } from '../Button';
 import {
   Dialog,
@@ -39,15 +39,20 @@ export function NewBookmarkButton({
 
   const createResourceAndNavigate = useCreateAndNavigate(klass, parent);
 
-  const onDone = useCallback(() => {
-    const normalizedUrl = normalizeWebAddress(url);
+  const onDone = useCallback(
+    (e: FormEvent) => {
+      e.preventDefault();
 
-    createResourceAndNavigate('bookmark', {
-      [properties.name]: 'New Bookmark',
-      [properties.bookmark.url]: normalizedUrl,
-      [properties.isA]: [classes.bookmark],
-    });
-  }, [url]);
+      const normalizedUrl = normalizeWebAddress(url);
+
+      createResourceAndNavigate('bookmark', {
+        [properties.name]: 'New Bookmark',
+        [properties.bookmark.url]: normalizedUrl,
+        [properties.isA]: [classes.bookmark],
+      });
+    },
+    [url],
+  );
 
   return (
     <>

data-browser/src/components/NewInstanceButton/NewFolderButton.tsx

@@ -0,0 +1,86 @@
+import { classes, properties, useResource, useTitle } from '@tomic/react';
+import React, { FormEvent, useCallback, useState } from 'react';
+import { Button } from '../Button';
+import {
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  useDialog,
+} from '../Dialog';
+import Field from '../forms/Field';
+import { InputStyled, InputWrapper } from '../forms/InputStyles';
+import { Base } from './Base';
+import { useCreateAndNavigate } from './useCreateAndNavigate';
+import { NewInstanceButtonProps } from './NewInstanceButtonProps';
+
+export function NewFolderButton({
+  klass,
+  subtle,
+  icon,
+  parent,
+  children,
+  label,
+}: NewInstanceButtonProps): JSX.Element {
+  const resource = useResource(klass);
+  const [title] = useTitle(resource);
+  const [name, setName] = useState('');
+
+  const [dialogProps, show, hide] = useDialog();
+
+  const createResourceAndNavigate = useCreateAndNavigate(klass, parent);
+
+  const onDone = useCallback(
+    (e: FormEvent) => {
+      e.preventDefault();
+
+      createResourceAndNavigate('Folder', {
+        [properties.name]: name,
+        [properties.displayStyle]: 'list',
+        [properties.isA]: [classes.folder],
+      });
+    },
+    [name],
+  );
+
+  return (
+    <>
+      <Base
+        onClick={show}
+        title={title}
+        icon={icon}
+        subtle={subtle}
+        label={label}
+      >
+        {children}
+      </Base>
+      <Dialog {...dialogProps}>
+        <DialogTitle>
+          <h1>New Folder</h1>
+        </DialogTitle>
+        <DialogContent>
+          <form onSubmit={onDone}>
+            <Field required label='url'>
+              <InputWrapper>
+                <InputStyled
+                  placeholder='New Folder'
+                  value={name}
+                  autoFocus={true}
+                  onChange={e => setName(e.target.value)}
+                />
+              </InputWrapper>
+            </Field>
+          </form>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={hide} subtle>
+            Cancel
+          </Button>
+          <Button onClick={onDone} disabled={name.trim() === ''}>
+            Ok
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+}

data-browser/src/components/NewInstanceButton/index.tsx

@@ -4,12 +4,14 @@ import { NewBookmarkButton } from './NewBookmarkButton';
 import { NewInstanceButtonProps } from './NewInstanceButtonProps';
 import { NewInstanceButtonDefault } from './NewInstanceButtonDefault';
 import { useSettings } from '../../helpers/AppSettings';
+import { NewFolderButton } from './NewFolderButton';
 
 type InstanceButton = (props: NewInstanceButtonProps) => JSX.Element;
 
 /** If your New Instance button requires custom logic, such as a custom dialog */
 const classMap = new Map<string, InstanceButton>([
   [classes.bookmark, NewBookmarkButton],
+  [classes.folder, NewFolderButton],
 ]);
 
 /** A button for creating a new instance of some thing */

data-browser/src/components/Parent.tsx

@@ -43,6 +43,7 @@ function Parent({ resource }: ParentProps): JSX.Element {
 }
 
 const ParentWrapper = styled.nav`
+  height: ${p => p.theme.heights.breadCrumbBar};
   padding: 0.2rem;
   padding-left: 0.5rem;
   color: ${props => props.theme.colors.textLight2};

data-browser/src/components/SideBar/ResourceSideBar/FloatingActions.tsx

@@ -1,9 +1,8 @@
 import { useResource, useTitle } from '@tomic/react';
-import React, { useCallback } from 'react';
+import React from 'react';
 import { FaEllipsisV, FaPlus } from 'react-icons/fa';
-import { useNavigate } from 'react-router-dom';
 import styled, { css } from 'styled-components';
-import { paths } from '../../../routes/paths';
+import { useNewRoute } from '../../../helpers/useNewRoute';
 import { Button } from '../../Button';
 import { buildDefaultTrigger } from '../../Dropdown/DefaultTrigger';
 import ResourceContextMenu from '../../ResourceContextMenu';
@@ -13,27 +12,15 @@ export interface FloatingActionsProps {
   className?: string;
 }
 
-function buildURL(subject: string) {
-  const params = new URLSearchParams({
-    parentSubject: subject,
-  });
-
-  return `${paths.new}?${params.toString()}`;
-}
-
 /** Contains actions for a SideBarResource, such as a context menu and a new item button */
 export function FloatingActions({
   subject,
   className,
 }: FloatingActionsProps): JSX.Element {
-  const navigate = useNavigate();
   const parentResource = useResource(subject);
   const [parentName] = useTitle(parentResource);
 
-  const handleAddClick = useCallback(() => {
-    const url = buildURL(subject);
-    navigate(url);
-  }, [subject]);
+  const handleAddClick = useNewRoute(subject);
 
   return (
     <Wrapper className={className}>

data-browser/src/helpers/useNewRoute.ts

@@ -0,0 +1,22 @@
+import { useCallback } from 'react';
+import { useNavigate } from 'react-router';
+import { paths } from '../routes/paths';
+
+function buildURL(parent?: string) {
+  const params = new URLSearchParams({
+    ...(parent ? { parentSubject: parent } : {}),
+  });
+
+  return `${paths.new}?${params.toString()}`;
+}
+
+export function useNewRoute(parent?: string) {
+  const navigate = useNavigate();
+
+  const navigateToNewRoute = useCallback(() => {
+    const url = buildURL(parent);
+    navigate(url);
+  }, [parent]);
+
+  return navigateToNewRoute;
+}

data-browser/src/routes/NewRoute.tsx

@@ -69,6 +69,11 @@ function New(): JSX.Element {
             )}
             {!classInput && (
               <>
+                <NewIntanceButton
+                  klass={urls.classes.folder}
+                  subtle
+                  parent={calculatedParent}
+                />
                 <NewIntanceButton
                   klass={urls.classes.document}
                   subtle

data-browser/src/styling.tsx

@@ -45,6 +45,8 @@ export const zIndex = {
 /** Default animation duration in ms */
 export const animationDuration = 100;
 
+const breadCrumbBarHeight = '2.2rem';
+
 /** Construct a StyledComponents theme object */
 export const buildTheme = (darkMode: boolean, mainIn: string): DefaultTheme => {
   const main = darkMode ? lighten(0.2, mainIn) : mainIn;
@@ -74,6 +76,10 @@ export const buildTheme = (darkMode: boolean, mainIn: string): DefaultTheme => {
     sideBarWidth: 15,
     margin: 1,
     radius: '9px',
+    heights: {
+      breadCrumbBar: breadCrumbBarHeight,
+      fullPage: `calc(100% - ${breadCrumbBarHeight})`,
+    },
     colors: {
       main,
       mainLight: darkMode ? lighten(0.08)(main) : lighten(0.08)(main),
@@ -121,6 +127,10 @@ declare module 'styled-components' {
     /** Roundness of some elements / Border radius */
     radius: string;
     /** All theme colors */
+    heights: {
+      breadCrumbBar: string;
+      fullPage: string;
+    };
     colors: {
       /** Main accent color, used for links */
       main: string;

data-browser/src/views/DocumentPage.tsx

@@ -449,7 +449,7 @@ const FullPageWrapper = styled.div`
   display: flex;
   flex: 1;
   flex-direction: column;
-  min-height: 100%;
+  min-height: ${p => p.theme.heights.fullPage};
   box-sizing: border-box;
 `;
 

data-browser/src/views/FolderPage/FolderDisplayStyle.ts

@@ -0,0 +1,11 @@
+import { Resource } from '@tomic/react';
+
+export enum FolderDisplayStyle {
+  List = 'list',
+  Grid = 'grid',
+}
+
+export interface ViewProps {
+  subResources: Map<string, Resource>;
+  onNewClick: () => void;
+}