jcubic / 10xDevs / 18543522652

import { useEffect, useMemo, useRef, useCallback } from 'react';

import { useRouter } from 'next/navigation';

import { useNotesContext } from './NotesContext';

import { createNote, updateNote, deleteNote } from '@/app/actions/notes';

import { extractHeaders } from '@/lib/markdown-headers';

import TopNavigationBar from './TopNavigationBar';

import LeftPanel from './LeftPanel';

import MiddlePanel from './MiddlePanel';

import RightPanel from './RightPanel';

import styles from './MainNotesLayout.module.css';

export default function MainNotesClient({

  notes,

  initialSelectedNoteId,

  lineNumber

}: MainNotesClientProps) {

  const router = useRouter();

  const {

    selectedNote,

    content,

    saveStatus,

    hasUnsavedChanges,

    setSelectedNote,

    setContent,

    setSaveStatus,

    setHasUnsavedChanges

  } = useNotesContext();

  const editorRef = useRef<import('@/types/editor').EditorRef | null>(null);

  const headers = useMemo(() => extractHeaders(content), [content]);

  useEffect(() => {

    if (initialSelectedNoteId && notes.length > 0) {

      const note = notes.find((n) => n.id === initialSelectedNoteId);

      if (note) {

        setSelectedNote(note);

        setContent(note.content || '');

      }

    }

  }, [initialSelectedNoteId, notes, setSelectedNote, setContent]);

  const handleNoteSelect = useCallback(

    (noteId: number) => {

      router.push(`/note/${noteId}`);

    },

    [router]

  );

  const handleNewNote = useCallback(async () => {

    try {

      const newNote = await createNote('New Note');

      router.push(`/note/${newNote.id}`);

    } catch (error) {

      console.error('Failed to create note:', error);

    }

  }, [router]);

  const handleContentChange = (newContent: string) => {

    setContent(newContent);

    setHasUnsavedChanges(true);

  };

  const handleSave = useCallback(async () => {

    if (!selectedNote) return;

    try {

      setSaveStatus('saving');

      await updateNote(selectedNote.id, { content });

      setSaveStatus('saved');

      setHasUnsavedChanges(false);

      setTimeout(() => setSaveStatus('idle'), 2000);

    } catch (error) {

      setSaveStatus('error');

      console.error('Failed to save note:', error);

    }

  }, [selectedNote, content, setSaveStatus, setHasUnsavedChanges]);

  const handleDeleteNote = useCallback(

    async (noteId: number) => {

      try {

        await deleteNote(noteId);

        if (selectedNote?.id === noteId) {

          router.push('/');

        } else {

          router.refresh();

        }

      } catch (error) {

        console.error('Failed to delete note:', error);

      }

    },

    [router, selectedNote]

  );

  const handleRenameNote = useCallback(

    async (noteId: number, newName: string) => {

      try {

        const updatedNote = await updateNote(noteId, { name: newName });

        if (selectedNote?.id === noteId) {

          setSelectedNote(updatedNote);

        }

        router.refresh();

      } catch (error) {

        console.error('Failed to rename note:', error);

        throw error; // Re-throw to let the component handle the error

      }

    },

    [selectedNote, setSelectedNote, router]

  );

  const handleLogout = () => {

    console.log('Logout clicked');

  };

  const handleHeaderClick = (line: number) => {

    if (editorRef.current) {

      editorRef.current.scrollToLine(line);

    }

  };

  useEffect(() => {

    const handleKeyDown = (e: KeyboardEvent) => {

      if (e.ctrlKey || e.metaKey) {

        switch (e.key) {

          case 's':

            e.preventDefault();

            handleSave();

            break;

          case 'n':

            e.preventDefault();

            handleNewNote();

            break;

        }

      }

    };

    window.addEventListener('keydown', handleKeyDown);

    return () => window.removeEventListener('keydown', handleKeyDown);

  }, [selectedNote, content, handleSave, handleNewNote]);

  return (

    <>

      <TopNavigationBar hasUnsavedChanges={hasUnsavedChanges} onLogout={handleLogout} />

      <div className={styles.panels}>

        <LeftPanel

          notes={notes}

          selectedNoteId={selectedNote?.id || null}

          onNoteSelect={handleNoteSelect}

          onNewNote={handleNewNote}

          onDeleteNote={handleDeleteNote}

          onRenameNote={handleRenameNote}

        />

        <MiddlePanel

          note={selectedNote}

          content={content}

          saveStatus={saveStatus}

          onContentChange={handleContentChange}

          onSave={handleSave}

          onEditorReady={(editor) => (editorRef.current = editor)}

        />

        <RightPanel

          headers={headers}

          currentLine={lineNumber}

          onHeaderClick={handleHeaderClick}

        />

      </div>

    </>

}