Implemented Document Creation & Deletion

code/client/src/App.scss

@@ -14,6 +14,7 @@
 .app {
   width: 100vw;
   height: 100vh;
+  color: black;
 }
 
 ::-webkit-scrollbar {

code/client/src/App.tsx

@@ -1,17 +1,17 @@
 import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom';
 import DocumentEditor from '@/ui/pages/editor/DocumentEditor';
 import Header from '@/ui/components/header/Header';
-import Home from '@/ui/pages/home/Home.tsx';
+import Home from '@/ui/pages/home/Home';
 import './App.scss';
-import { CommunicationProvider } from '@/contexts/CommunicationContext.tsx';
-import { communication } from '@/domain/communication/communication.ts';
+import { CommunicationProvider } from '@/domain/communication/context/CommunicationContext';
+import { communication } from '@/domain/communication/communication';
 
 function App() {
   return (
     <div className="app">
-      <Header />
       <CommunicationProvider communication={communication}>
         <Router>
+          <Header />
           <Routes>
             <Route path="/" element={<Navigate to={`/documents`} />} />
             <Route path="/documents" element={<Home />} />

code/client/src/domain/communication/communication.ts

@@ -1,5 +1,5 @@
-import { socketCommunication, SocketCommunication } from '@/domain/communication/socket/socketCommunication.ts';
-import { httpCommunication, HttpCommunication } from '@/domain/communication/http/httpCommunication.ts';
+import { socketCommunication, SocketCommunication } from '@/domain/communication/socket/socketCommunication';
+import { httpCommunication, HttpCommunication } from '@/domain/communication/http/httpCommunication';
 
 export interface Communication {
   socket: SocketCommunication;

code/client/src/contexts/CommunicationContext.tsx → code/client/src/domain/communication/context/CommunicationContext.tsx

@@ -1,15 +1,13 @@
 import { createContext, ReactElement } from 'react';
-import { communication, Communication } from '@/domain/communication/communication.ts';
+import { communication, Communication } from '@/domain/communication/communication';
 
-const CommunicationContext = createContext<Communication>(communication);
+export const CommunicationContext = createContext<Communication>(communication);
 
 type CommunicationProviderProps = {
   communication: Communication;
   children: ReactElement;
 };
 
-const CommunicationProvider = ({ communication, children }: CommunicationProviderProps) => {
+export function CommunicationProvider({ communication, children }: CommunicationProviderProps) {
   return <CommunicationContext.Provider value={communication}>{children}</CommunicationContext.Provider>;
-};
-
-export { CommunicationContext, CommunicationProvider };
+}

code/client/src/domain/communication/context/useContext.ts

@@ -0,0 +1,7 @@
+import { Communication } from '@/domain/communication/communication';
+import { useContext } from 'react';
+import { CommunicationContext } from '@/domain/communication/context/CommunicationContext';
+
+export function useCommunication(): Communication {
+  return useContext(CommunicationContext);
+}

code/client/src/domain/communication/http/httpCommunication.ts

@@ -1,4 +1,4 @@
-import config from '@/config.ts';
+import config from '@/config';
 
 export const BASE_URL = config.HTTP_SERVER_URL;
 
@@ -34,7 +34,13 @@ const request = async (url: string, method: string, body?: any) => {
   };
   if (body) requestInit.body = JSON.stringify(body);
   const response = await fetch(BASE_URL + url, requestInit);
-  return await response.json();
+
+  try {
+    return await response.json();
+  } catch (err) {
+    // parsing failed, probably empty body
+    return undefined;
+  }
 };
 
 export const httpCommunication: HttpCommunication = {

code/client/src/domain/communication/socket/socket.ts

@@ -1,5 +1,5 @@
 import { io, Socket } from 'socket.io-client';
-import config from '@/config.ts';
+import config from '@/config';
 import { range } from 'lodash';
 
 declare module 'socket.io-client' {

code/client/src/domain/communication/socket/socketCommunication.ts

@@ -1,4 +1,4 @@
-import { socket } from '@/domain/communication/socket/socket.ts';
+import { socket } from '@/domain/communication/socket/socket';
 import { SocketEventHandlers } from 'socket.io-client';
 
 type EmitType = (event: string, data?: any) => void;

code/client/src/domain/communication/socket/useSocketListeners.ts

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { SocketCommunication } from '@/domain/communication/socket/socketCommunication.ts';
+import { SocketCommunication } from '@/domain/communication/socket/socketCommunication';
 import { SocketEventHandlers } from 'socket.io-client';
 
 function useSocketListeners(socket: SocketCommunication, eventHandlers: SocketEventHandlers) {

code/client/src/domain/editor/crdt/fugue.ts

@@ -1,17 +1,17 @@
 import { type Id, Nodes } from '@notespace/shared/crdt/types/nodes';
-import { BlockStyle, InlineStyle } from '@notespace/shared/types/styles.ts';
-import { FugueTree } from '@notespace/shared/crdt/FugueTree.ts';
-import { generateReplicaId, nodeInsert } from './utils.ts';
-import { type FugueNode, type NodeInsert } from '@/ui/pages/editor/crdt/types.ts';
-import { Cursor, Selection } from '@notespace/shared/types/cursor.ts';
+import { BlockStyle, InlineStyle } from '@notespace/shared/types/styles';
+import { FugueTree } from '@notespace/shared/crdt/FugueTree';
+import { generateReplicaId, nodeInsert } from './utils';
+import { type FugueNode, type NodeInsert } from '@/domain/editor/crdt/types';
+import { Cursor, Selection } from '@notespace/shared/types/cursor';
 import { isEmpty, last, range } from 'lodash';
 import {
   BlockStyleOperation,
   DeleteOperation,
   InlineStyleOperation,
   InsertOperation,
   ReviveOperation,
-} from '@notespace/shared/crdt/types/operations.ts';
+} from '@notespace/shared/crdt/types/operations';
 
 /**
  * Class that represents a local replica of a FugueTree

code/client/src/domain/editor/crdt/types.ts

@@ -1,5 +1,5 @@
-import { type InlineStyle } from '@notespace/shared/types/styles.ts';
-import { Node } from '@notespace/shared/crdt/types/nodes.ts';
+import { type InlineStyle } from '@notespace/shared/types/styles';
+import { Node } from '@notespace/shared/crdt/types/nodes';
 
 export type NodeInsert = {
   value: string;

code/client/src/domain/editor/crdt/utils.ts

@@ -1,5 +1,5 @@
 import { range } from 'lodash';
-import { InlineStyle } from '@notespace/shared/types/styles.ts';
+import { InlineStyle } from '@notespace/shared/types/styles';
 
 const BASE64CHARS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
 const DEFAULT_REPLICA_ID_LENGTH = 10;

code/client/src/domain/editor/hooks/useEvents.ts

@@ -1,7 +1,7 @@
-import useSocketListeners from '@/domain/communication/socket/useSocketListeners.ts';
-import { type Operation } from '@notespace/shared/crdt/types/operations.ts';
-import { Communication } from '@/domain/communication/communication.ts';
-import { FugueDomainOperations } from '@/domain/editor/operations/fugue/types.ts';
+import useSocketListeners from '@/domain/communication/socket/useSocketListeners';
+import { type Operation } from '@notespace/shared/crdt/types/operations';
+import { Communication } from '@/domain/communication/communication';
+import { FugueDomainOperations } from '@/domain/editor/operations/fugue/types';
 
 /**
  * Hook client socket listeners to events

code/client/src/domain/editor/hooks/useFugue.ts

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { Fugue } from '@/domain/editor/crdt/fugue.ts';
+import { Fugue } from '@/domain/editor/crdt/fugue';
 
 function useFugue() {
   return useMemo(() => new Fugue(), []);

code/client/src/domain/editor/operations/fugue/operations.ts

@@ -1,7 +1,7 @@
-import { Operation } from '@notespace/shared/crdt/types/operations.ts';
-import { Fugue } from '@/domain/editor/crdt/fugue.ts';
-import { Document } from '@notespace/shared/crdt/types/document.ts';
-import { FugueDomainOperations } from '@/domain/editor/operations/fugue/types.ts';
+import { Operation } from '@notespace/shared/crdt/types/operations';
+import { Fugue } from '@/domain/editor/crdt/fugue';
+import { Document } from '@notespace/shared/crdt/types/document';
+import { FugueDomainOperations } from '@/domain/editor/operations/fugue/types';
 
 export default (fugue: Fugue): FugueDomainOperations => {
   function applyOperations(operations: Operation[]) {

code/client/src/domain/editor/operations/fugue/types.ts

@@ -1,5 +1,5 @@
-import { Operation } from '@notespace/shared/crdt/types/operations.ts';
-import { Document } from '@notespace/shared/crdt/types/document.ts';
+import { Operation } from '@notespace/shared/crdt/types/operations';
+import { Document } from '@notespace/shared/crdt/types/document';
 
 export type FugueDomainOperations = {
   applyOperations: (operations: Operation[]) => void;

code/client/src/domain/editor/operations/history/operations.ts

@@ -1,4 +1,4 @@
-import { Fugue } from '@/domain/editor/crdt/fugue.ts';
+import { Fugue } from '@/domain/editor/crdt/fugue';
 import {
   ApplyHistory,
   HistoryDomainOperations,
@@ -11,10 +11,10 @@ import {
   SetNodeOperation,
   SplitNodeOperation,
   UnsetNodeOperation,
-} from '@/domain/editor/domain/document/history/types.ts';
-import { Communication } from '@/domain/communication/communication.ts';
-import { BlockStyle, InlineStyle } from '@notespace/shared/types/styles.ts';
-import { getStyleType } from '@notespace/shared/types/styles.ts';
+} from '@/domain/editor/domain/document/history/types';
+import { Communication } from '@/domain/communication/communication';
+import { BlockStyle, InlineStyle } from '@notespace/shared/types/styles';
+import { getStyleType } from '@notespace/shared/types/styles';
 
 export default (fugue: Fugue, { socket }: Communication): HistoryDomainOperations => {
   const applyHistoryOperation: ApplyHistory = (operations: HistoryOperation[]) => {

code/client/src/domain/editor/operations/history/types.ts

@@ -1,4 +1,4 @@
-import { Cursor, Selection } from '@notespace/shared/types/cursor.ts';
+import { Cursor, Selection } from '@notespace/shared/types/cursor';
 import {
   BaseInsertTextOperation,
   BaseRemoveTextOperation,

code/client/src/domain/editor/operations/input/operations.ts

@@ -1,11 +1,11 @@
 import { BaseSelection } from 'slate';
-import { Fugue } from '@/domain/editor/crdt/fugue.ts';
-import { InputDomainOperations } from '@/domain/editor/domain/document/input/types.ts';
-import { Cursor, Selection } from '@notespace/shared/types/cursor.ts';
-import { nodeInsert } from '@/domain/editor/crdt/utils.ts';
-import { InlineStyle } from '@notespace/shared/types/styles.ts';
-import { Operation } from '@notespace/shared/crdt/types/operations.ts';
-import { Communication } from '@/domain/communication/communication.ts';
+import { Fugue } from '@/domain/editor/crdt/fugue';
+import { InputDomainOperations } from '@/domain/editor/operations/input/types';
+import { Cursor, Selection } from '@notespace/shared/types/cursor';
+import { nodeInsert } from '@/domain/editor/crdt/utils';
+import { InlineStyle } from '@notespace/shared/types/styles';
+import { Operation } from '@notespace/shared/crdt/types/operations';
+import { Communication } from '@/domain/communication/communication';
 
 export default (fugue: Fugue, { socket }: Communication): InputDomainOperations => {
   function insertCharacter(char: string, cursor: Cursor, styles: InlineStyle[] = []) {

code/client/src/domain/editor/operations/input/types.ts

@@ -1,5 +1,5 @@
-import { InlineStyle } from '@notespace/shared/types/styles.ts';
-import { Cursor, Selection } from '@notespace/shared/types/cursor.ts';
+import { InlineStyle } from '@notespace/shared/types/styles';
+import { Cursor, Selection } from '@notespace/shared/types/cursor';
 import { BaseSelection } from 'slate';
 
 export type InputDomainOperations = {

code/client/src/domain/editor/operations/markdown/types.ts

@@ -1,5 +1,5 @@
-import { BlockStyle, InlineStyle } from '@notespace/shared/types/styles.ts';
-import { Selection } from '@notespace/shared/types/cursor.ts';
+import { BlockStyle, InlineStyle } from '@notespace/shared/types/styles';
+import { Selection } from '@notespace/shared/types/cursor';
 
 export type MarkdownDomainOperations = {
   applyBlockStyle: ApplyBlockStyle;

code/client/src/domain/editor/operations/markdown/utils.ts

@@ -1,7 +1,7 @@
-import { Fugue } from '@/domain/editor/crdt/fugue.ts';
-import { DeleteOperation } from '@notespace/shared/crdt/types/operations.ts';
-import { Id } from '@notespace/shared/crdt/types/nodes.ts';
-import { Selection } from '@notespace/shared/types/cursor.ts';
+import { Fugue } from '@/domain/editor/crdt/fugue';
+import { DeleteOperation } from '@notespace/shared/crdt/types/operations';
+import { Id } from '@notespace/shared/crdt/types/nodes';
+import { Selection } from '@notespace/shared/types/cursor';
 
 /**
  * Deletes characters around the selection

code/client/src/domain/editor/slate/handlers/history/historyHandlers.ts

@@ -1,7 +1,7 @@
 import { Editor } from 'slate';
 import { last } from 'lodash';
-import { HistoryDomainOperations } from '@/domain/editor/domain/document/history/types.ts';
-import { toHistoryOperations } from '@/domain/editor/slate/handlers/history/utils.ts';
+import { HistoryDomainOperations } from '@/domain/editor/domain/document/history/types';
+import { toHistoryOperations } from '@/domain/editor/slate/handlers/history/utils';
 
 export type HistoryHandlers = {
   undoOperation: () => void;

code/client/src/domain/editor/slate/handlers/history/utils.ts

@@ -21,8 +21,8 @@ import {
   SetNodeOperation,
   SplitNodeOperation,
   UnsetNodeOperation,
-} from '@/domain/editor/domain/document/history/types.ts';
-import { pointToCursor } from '@/domain/editor/slate/utils/selection.ts';
+} from '@/domain/editor/domain/document/history/types';
+import { pointToCursor } from '@/domain/editor/slate/utils/selection';
 
 const reverseTypes: { [key: string]: HistoryOperation['type'] } = {
   insert_text: 'remove_text',

code/client/src/domain/editor/slate/handlers/input/inputHandlers.ts

@@ -1,12 +1,12 @@
-import { getKeyFromInputEvent } from '@/domain/editor/slate/utils/domEvents.ts';
-import { getSelection, isSelected } from '@/domain/editor/slate/utils/selection.ts';
-import { isEqual } from 'lodash';
-import { Cursor, emptyCursor } from '@notespace/shared/types/cursor.ts';
-import CustomEditor from '@/domain/editor/slate/CustomEditor.ts';
-import { InlineStyle } from '@notespace/shared/types/styles.ts';
 import { Editor } from 'slate';
-import { InputDomainOperations } from '@/domain/editor/domain/document/input/types.ts';
 import { ReactEditor } from 'slate-react';
+import CustomEditor from '@/domain/editor/slate/CustomEditor';
+import { isEqual } from 'lodash';
+import { getKeyFromInputEvent } from '@/domain/editor/slate/utils/domEvents';
+import { getSelection, isSelected } from '@/domain/editor/slate/utils/selection';
+import { Cursor, emptyCursor } from '@notespace/shared/types/cursor';
+import { InlineStyle } from '@notespace/shared/types/styles';
+import { InputDomainOperations } from '@/domain/editor/operations/input/types';
 
 const hotkeys: Record<string, string> = {
   b: 'bold',

code/client/src/domain/editor/slate/handlers/markdown/markdownHandlers.ts

@@ -1,8 +1,8 @@
-import { getSelection, isSelected } from '@/domain/editor/slate/utils/selection.ts';
+import { getSelection, isSelected } from '@/domain/editor/slate/utils/selection';
 import { Editor } from 'slate';
-import CustomEditor from '@/domain/editor/slate/CustomEditor.ts';
+import CustomEditor from '@/domain/editor/slate/CustomEditor';
 import { MarkdownDomainOperations } from '@/domain/editor/operations/markdown/types';
-import { InlineStyle } from '@notespace/shared/types/styles.ts';
+import { InlineStyle } from '@notespace/shared/types/styles';
 
 export default (editor: Editor, handlers: MarkdownDomainOperations) => {
   /**

code/client/src/domain/editor/slate/hooks/useCursors.ts

@@ -1,8 +1,8 @@
 import { Range } from 'slate';
 import { useState } from 'react';
-import useSocketListeners from '@/domain/communication/socket/useSocketListeners.ts';
-import { Communication } from '@/domain/communication/communication.ts';
-import { InlineStyle } from '@notespace/shared/types/styles.ts';
+import useSocketListeners from '@/domain/communication/socket/useSocketListeners';
+import { Communication } from '@/domain/communication/communication';
+import { InlineStyle } from '@notespace/shared/types/styles';
 
 export type CursorData = {
   id: string;

code/client/src/domain/editor/slate/hooks/useDecorate.ts

@@ -1,4 +1,4 @@
-import { CursorData } from '@/domain/editor/slate/hooks/useCursors.ts';
+import { CursorData } from '@/domain/editor/slate/hooks/useCursors';
 import { BaseRange, Editor, NodeEntry, Path, Range, Text } from 'slate';
 
 function useDecorate(editor: Editor, cursors: CursorData[]) {

code/client/src/domain/editor/slate/hooks/useEditor.ts

@@ -1,6 +1,6 @@
 import { type Editor } from 'slate';
 import { useMemo } from 'react';
-import { buildEditor } from '@/domain/editor/slate/utils/slate.ts';
+import { buildEditor } from '@/domain/editor/slate/utils/slate';
 
 function useEditor(...plugins: Array<(editor: Editor) => Editor>): Editor {
   return useMemo(() => buildEditor(...plugins), []); // eslint-disable-line react-hooks/exhaustive-deps

code/client/src/domain/editor/slate/hooks/useRenderers.tsx

@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
 import { type RenderElementProps, type RenderLeafProps } from 'slate-react';
-import { getElementRenderer, getLeafRenderer } from '@/domain/editor/slate/plugins/markdown/rendering/renderers.tsx';
+import { getElementRenderer, getLeafRenderer } from '@/domain/editor/slate/plugins/markdown/rendering/renderers';
 
 /**
  * Returns the renderers for the editor.

code/client/src/domain/editor/slate/plugins/markdown/operations/applyOperations.ts

@@ -1,6 +1,6 @@
 import { type Editor, Element, Range, Text, Transforms } from 'slate';
-import { getSelectionByRange } from '@/domain/editor/slate/utils/selection.ts';
-import { BlockStyle, InlineStyle } from '@notespace/shared/types/styles.ts';
+import { getSelectionByRange } from '@/domain/editor/slate/utils/selection';
+import { BlockStyle, InlineStyle } from '@notespace/shared/types/styles';
 import { ApplyBlockStyle, ApplyInlineStyle } from '@/domain/editor/operations/markdown/types';
 
 /**

code/client/src/domain/editor/slate/plugins/markdown/operations/editorOperations.ts

@@ -1,12 +1,12 @@
 import { Descendant, Editor, Element, Point, Range, Text, type TextUnit, Transforms } from 'slate';
-import { type CustomElement } from '@/domain/editor/slate/types.ts';
-import { shortcuts } from '../shortcuts.ts';
-import CustomEditor from '@/domain/editor/slate/CustomEditor.ts';
-import { isMultiBlock } from '@/domain/editor/slate/utils/slate.ts';
-import { getSelection } from '@/domain/editor/slate/utils/selection.ts';
+import { type CustomElement } from '@/domain/editor/slate/types';
+import { shortcuts } from '../shortcuts';
+import CustomEditor from '@/domain/editor/slate/CustomEditor';
+import { isMultiBlock } from '@/domain/editor/slate/utils/slate';
+import { getSelection } from '@/domain/editor/slate/utils/selection';
 import { TextDeleteOptions } from 'slate/dist/interfaces/transforms/text';
 import { MarkdownDomainOperations } from '@/domain/editor/operations/markdown/types';
-import { RuleType } from '@/domain/editor/slate/plugins/markdown/rules.ts';
+import { RuleType } from '@/domain/editor/slate/plugins/markdown/rules';
 
 type InlineFunction = (n: unknown) => boolean;
 type DeleteBackwardFunction = (unit: TextUnit, options?: { at: Range }) => void;