Rename and delete doc functionality

Raathigesh · Aug 25, 2021 · 7afd58b · 7afd58b
1 parent da4caff
commit 7afd58b
Show file tree

Hide file tree

Showing 8 changed files with 262 additions and 71 deletions.
diff --git a/src/extension/api/DocsManager.ts b/src/extension/api/DocsManager.ts
@@ -97,6 +97,8 @@ export class DocsManager {
         const state: State = this.context.workspaceState.get(StateKey) as any;
         const nextState: State = {
             ...state,
+            activeDocument:
+                id === state.activeDocument ? null : state.activeDocument,
             documents: state.documents.filter(item => item.id !== id),
         };
         this.context.workspaceState.update(StateKey, nextState);
@@ -106,4 +108,23 @@ export class DocsManager {
         const state: State = this.context.workspaceState.get(StateKey) as any;
         return state.documents;
     }
+
+    renameDoc(id: string, name: string) {
+        const state: State = this.context.workspaceState.get(StateKey) as any;
+        const updatedDocuments = state.documents.map(item => {
+            if (item.id === id) {
+                return {
+                    ...item,
+                    name,
+                };
+            }
+            return item;
+        });
+
+        const nextState: State = {
+            ...state,
+            documents: updatedDocuments,
+        };
+        this.context.workspaceState.update(StateKey, nextState);
+    }
 }
diff --git a/src/extension/api/index.ts b/src/extension/api/index.ts
@@ -81,6 +81,21 @@ export async function startApiServer(
         res.send('OK');
     });
 
+    app.post('/renameDocument', (req, res) => {
+        const id = req.body.id;
+        const newName = req.body.newName;
+
+        docsManager.renameDoc(id, newName);
+        res.send('OK');
+    });
+
+    app.post('/deleteDocument', (req, res) => {
+        const id = req.body.id;
+        docsManager.deleteDocument(id);
+
+        res.send('OK');
+    });
+
     app.post('/tree', (req, res) => {
         const tree = dirTree(req.body.directoryPath);
         res.json(tree);

diff --git a/src/ui/App.tsx b/src/ui/App.tsx
@@ -9,7 +9,7 @@ import { ThemeProvider } from '@devtools-ds/themes';
 import { Grid } from 'react-feather';
 import Editor from './Editor';
 import { ClientDoc } from './types';
-import CreateDoc from './CreateDoc';
+import CreateDoc from './docs-list';
 
 const theme = {
     ...defaultTheme,
@@ -24,6 +24,19 @@ const theme = {
             },
             h1: {
                 fontSize: '25px',
+                fontWeight: 300,
+            },
+            h2: {
+                fontSize: '20px',
+                fontWeight: 300,
+            },
+            h3: {
+                fontSize: '18px',
+                fontWeight: 300,
+            },
+            h4: {
+                fontSize: '15px',
+                fontWeight: 300,
             },
             ul: {
                 marginLeft: '15px',
@@ -34,6 +47,9 @@ const theme = {
             button: {
                 margin: '3px',
             },
+            ':focus': {
+                outline: 'none',
+            },
         },
     },
 };
@@ -80,7 +96,15 @@ function App() {
                 <GlobalStyle />
 
                 <Flex flexDir="column">
-                    <Flex justifyContent="flex-end">
+                    <Flex
+                        justifyContent="space-between"
+                        alignItems="center"
+                        backgroundColor="#090909"
+                        padding="3px"
+                    >
+                        <Flex marginLeft="15px">
+                            {activeDoc && activeDoc.name}
+                        </Flex>
                         <CreateDoc
                             activeDoc={activeDoc}
                             onActiveDocumentChange={() => {

diff --git a/src/ui/Editor.tsx b/src/ui/Editor.tsx
@@ -47,11 +47,7 @@ const Editor = ({ content, onChange }: Props) => {
         <>
             {editor && (
                 <FloatingMenu editor={editor}>
-                    <Flex
-                        backgroundColor="#2F2E31"
-                        borderRadius="4px"
-                        boxShadow="0px 1px 0px 0px #3a3a3a"
-                    >
+                    <Flex backgroundColor="#2F2E31" borderRadius="4px">
                         <EditorFloatingButton
                             tooltip="Bookmark active file"
                             onClick={() => {

diff --git a/src/ui/docs-list/DocItem.tsx b/src/ui/docs-list/DocItem.tsx
@@ -0,0 +1,92 @@
+import { Flex, Input } from '@chakra-ui/react';
+import React, { useState } from 'react';
+import { Edit, Check, Trash } from 'react-feather';
+import { ClientDoc } from '../types';
+
+interface Props {
+    isActive: boolean;
+    onClick: () => void;
+    doc: ClientDoc;
+    onRename: (id: string, newName: string) => void;
+    onDelete: (id: string) => void;
+}
+
+export function DocItem({ isActive, onClick, doc, onRename, onDelete }: Props) {
+    const [isEditMode, setIsEditMode] = useState(false);
+    const [docName, setDocName] = useState(doc.name);
+
+    return (
+        <Flex
+            backgroundColor={isActive ? '#090909' : '#272727'}
+            fontSize="13px"
+            _hover={{
+                backgroundColor: '#090909',
+            }}
+            cursor="pointer"
+            padding="5px"
+            borderRadius="4px"
+            onClick={() => {
+                onClick();
+            }}
+            marginBottom="3px"
+        >
+            <Flex width="100%">
+                {isEditMode && (
+                    <Flex
+                        alignItems="center"
+                        justifyContent="space-between"
+                        width="100%"
+                    >
+                        <Input
+                            borderColor="#090909"
+                            _hover={{
+                                borderColor: '#272727',
+                            }}
+                            size="small"
+                            value={docName}
+                            onChange={e => setDocName(e.target.value)}
+                        />
+                        <Flex
+                            _hover={{
+                                color: '#03a9f4',
+                            }}
+                            marginLeft="10px"
+                            marginRight="5px"
+                            onClick={() => {
+                                setIsEditMode(false);
+                                onRename(doc.id, docName);
+                            }}
+                        >
+                            <Check strokeWidth="1.5px" size="15px" />
+                        </Flex>
+                    </Flex>
+                )}
+                {!isEditMode && (
+                    <Flex justifyContent="space-between" width="100%">
+                        <Flex>{doc.name || doc.id}</Flex>
+                        <Flex alignItems="center">
+                            <Flex
+                                onClick={() => setIsEditMode(true)}
+                                marginRight="10px"
+                                _hover={{
+                                    color: '#03a9f4',
+                                }}
+                            >
+                                <Edit strokeWidth="1.5px" size="15px" />
+                            </Flex>
+                            <Flex
+                                marginRight="5px"
+                                onClick={() => onDelete(doc.id)}
+                                _hover={{
+                                    color: '#03a9f4',
+                                }}
+                            >
+                                <Trash strokeWidth="1.5px" size="15px" />
+                            </Flex>
+                        </Flex>
+                    </Flex>
+                )}
+            </Flex>
+        </Flex>
+    );
+}
diff --git a/src/ui/CreateDoc.tsx → src/ui/docs-list/index.tsx b/src/ui/CreateDoc.tsx → src/ui/docs-list/index.tsx
@@ -13,8 +13,9 @@ import {
     Portal,
 } from '@chakra-ui/react';
 import React, { useEffect, useState } from 'react';
-import { PlusSquare, ArrowRight } from 'react-feather';
-import { ClientDoc } from './types';
+import { Menu, ArrowRight } from 'react-feather';
+import { ClientDoc } from '../types';
+import { DocItem } from './DocItem';
 
 const API_URL = `http://localhost:${(window as any).port || '4545'}`;
 
@@ -65,68 +66,117 @@ export default function CreateDoc({
         setDocs(documents);
     };
 
+    const renameDocument = async (id: string, newName: string) => {
+        await fetch(`${API_URL}/renameDocument`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                id,
+                newName,
+            }),
+        });
+
+        getDocs();
+    };
+
+    const deleteDoc = async (id: string) => {
+        await fetch(`${API_URL}/deleteDocument`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                id,
+            }),
+        });
+
+        getDocs();
+    };
+
     return (
-        <Popover colorScheme="blackAlpha" onOpen={() => getDocs()}>
+        <Popover
+            colorScheme="blackAlpha"
+            onOpen={() => getDocs()}
+            arrowShadowColor="#2F2E31"
+        >
             <PopoverTrigger>
-                <Button
+                <Flex
                     size="sm"
-                    backgroundColor="#2F2E31"
                     color="#f1f0ee"
-                    _hover={{ backgroundColor: '#090909' }}
-                    onClick={() => {}}
+                    _hover={{ color: '#03a9f4' }}
+                    cursor="pointer"
+                    padding="3px"
                 >
-                    <PlusSquare size="18px" strokeWidth="2px" />
-                </Button>
+                    <Menu size="18px" strokeWidth="2px" />
+                </Flex>
             </PopoverTrigger>
             <Portal>
                 <PopoverContent
+                    borderColor="#2F2E31"
+                    width="400px"
                     zIndex={9999999999}
                     backgroundColor="#2F2E31"
                     colorScheme="blackAlpha"
+                    boxShadow="none"
+                    _focus={{
+                        boxShadow: 'none',
+                    }}
                 >
-                    <PopoverArrow backgroundColor="#2F2E31" />
-                    <PopoverHeader>Docs</PopoverHeader>
+                    <PopoverArrow
+                        backgroundColor="#2F2E31"
+                        borderColor="#090909"
+                        boxShadow="none"
+                    />
+                    <PopoverHeader borderColor="#090909">Docs</PopoverHeader>
                     <PopoverCloseButton />
                     <PopoverBody>
                         {docs.map(item => (
-                            <Flex
-                                backgroundColor={
-                                    activeDoc
-                                        ? activeDoc.id === item.id
-                                            ? '#090909'
-                                            : ''
-                                        : ''
+                            <DocItem
+                                doc={item}
+                                isActive={
+                                    !!activeDoc && activeDoc.id === item.id
                                 }
-                                _hover={{
-                                    backgroundColor: '#090909',
-                                }}
-                                cursor="pointer"
-                                padding="3px"
-                                borderRadius="2px"
                                 onClick={() => {
                                     changeActiveDocument(item.id);
                                 }}
-                            >
-                                {item.name || item.id}
-                            </Flex>
+                                onDelete={deleteDoc}
+                                onRename={renameDocument}
+                            />
                         ))}
                     </PopoverBody>
-                    <PopoverFooter>
+                    <PopoverFooter borderColor="#090909">
                         <Flex>
                             <Input
-                                size="medium"
+                                size="small"
                                 borderRadius="3px"
                                 padding="2px"
                                 variant="outline"
                                 placeholder="Name your doc"
                                 value={docName}
+                                borderColor="#090909"
+                                _hover={{
+                                    borderColor: '#272727',
+                                }}
+                                _focus={{
+                                    boxShadow: 'none',
+                                }}
                                 onChange={e => setDocName(e.target.value)}
                             />
                             <Button
-                                size="sm"
+                                marginLeft="10px"
+                                variant="outline"
                                 backgroundColor="#2F2E31"
                                 color="#f1f0ee"
-                                _hover={{ backgroundColor: '#090909' }}
+                                borderColor="#090909"
+                                _hover={{
+                                    borderColor: '#090909',
+                                    backgroundColor: '#272727',
+                                }}
+                                _focus={{
+                                    boxShadow: 'none',
+                                }}
                                 onClick={() => {
                                     createDoc(docName);
                                 }}