18687268278

Committed 21 Oct 2025 02:28PM UTC coverage: 21.69% (+2.2%) from 19.515%

Build # 18687268278

Build Type

push

github

Committed by

jcubic

Commit Message

more test for the Editor component

Run Details

89 of 121 branches covered (73.55%)

Branch coverage included in aggregate %.

522 of 2696 relevant lines covered (19.36%)

3.49 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

1.14

/src/components/notes/MiddlePanel.tsx

'use client';

import { Box, Text, Flex } from '@chakra-ui/react';
import { useState, useEffect, memo, useMemo, useCallback } from 'react';
import type { NoteTreeNode } from '@/types/tree';
import type { SaveStatus } from '@/types/notes';
import type { EditorRef } from '@/types/editor';
import Editor from '@/components/Editor';

interface MiddlePanelProps {
  note: NoteTreeNode | null;
  content: string;
  saveStatus: SaveStatus;
  selectedLine?: number;
  onContentChange: (content: string) => void;
  onSave: () => void;
  onEditorReady?: (editorRef: EditorRef) => void;
}

const MiddlePanel = memo(function MiddlePanel({
  note,
  content,
  saveStatus,
  selectedLine,
  onContentChange,
  onEditorReady
}: MiddlePanelProps) {
  const [welcomeContent, setWelcomeContent] = useState<string>('');

  // Load welcome content when component mounts
  useEffect(() => {
    const loadWelcomeContent = async () => {
      try {
        const response = await fetch('/samples/welcome.md');
        const text = await response.text();
        setWelcomeContent(text);
      } catch (error) {
        console.error('Failed to load welcome content:', error);
        setWelcomeContent('# Welcome to SNApp\n\nStart writing your note...');
      }
    };

    loadWelcomeContent();
  }, []);
  const saveStatusText = useMemo(() => {
    switch (saveStatus) {
      case 'saving':
        return 'Saving...';
      case 'saved':
        return 'Saved';
      case 'error':
        return 'Save failed';
      default:
        return '';
    }
  }, [saveStatus]);

  const saveStatusColor = useMemo(() => {
    switch (saveStatus) {
      case 'saving':
        return 'blue.500';
      case 'saved':
        return 'green.500';
      case 'error':
        return 'red.500';
      default:
        return 'gray.500';
    }
  }, [saveStatus]);

  const handleContentChange = useCallback(
    (value: string | undefined) => {
      onContentChange(value || '');
    },
    [onContentChange]
  );

  return (
    <Box as="main" h="100%" display="flex" flexDirection="column">
      {/* Save status bar */}
      <Flex
        justify="space-between"
        align="center"
        p={4}
        borderBottom="1px solid"
        borderColor="border"
      >
        <Text fontSize="lg" fontWeight="semibold">
          {note?.name || 'Select a note'}
        </Text>
        {saveStatus !== 'idle' && (
          <Text fontSize="sm" color={saveStatusColor}>
            {saveStatusText}
          </Text>
        )}
      </Flex>

      {/* Editor area */}
      <Box flex={1} overflow="hidden" position="relative" minH={0}>
        {note ? (
          <Editor
            value={note.data?.content === null ? welcomeContent : content}
            onChange={handleContentChange}
            selectedLine={selectedLine}
            onEditorReady={onEditorReady}
            placeholder="Start writing your note..."
          />
        ) : (
          <Flex h="100%" align="center" justify="center">
            <Text color="fg.muted">Select or create a note to start editing</Text>
          </Flex>
        )}
      </Box>
    </Box>
  );
});

export default MiddlePanel;

1	'use client';	1✔
2
3	import { Box, Text, Flex } from '@chakra-ui/react';	×
4	import { useState, useEffect, memo, useMemo, useCallback } from 'react';	×
5	import type { NoteTreeNode } from '@/types/tree';
6	import type { SaveStatus } from '@/types/notes';
7	import type { EditorRef } from '@/types/editor';
8	import Editor from '@/components/Editor';	×
9
10	interface MiddlePanelProps {
11	note: NoteTreeNode \| null;
12	content: string;
13	saveStatus: SaveStatus;
14	selectedLine?: number;
15	onContentChange: (content: string) => void;
16	onSave: () => void;
17	onEditorReady?: (editorRef: EditorRef) => void;
18	}
19
20	const MiddlePanel = memo(function MiddlePanel({	×
21	note,	×
22	content,	×
23	saveStatus,	×
24	selectedLine,	×
25	onContentChange,	×
26	onEditorReady	×
27	}: MiddlePanelProps) {	×
28	const [welcomeContent, setWelcomeContent] = useState<string>('');	×
29
30	// Load welcome content when component mounts
31	useEffect(() => {	×
32	const loadWelcomeContent = async () => {	×
33	try {	×
34	const response = await fetch('/samples/welcome.md');	×
35	const text = await response.text();	×
36	setWelcomeContent(text);	×
37	} catch (error) {	×
38	console.error('Failed to load welcome content:', error);	×
39	setWelcomeContent('# Welcome to SNApp\n\nStart writing your note...');	×
40	}	×
41	};	×
42
43	loadWelcomeContent();	×
44	}, []);	×
45	const saveStatusText = useMemo(() => {	×
46	switch (saveStatus) {	×
47	case 'saving':	×
48	return 'Saving...';	×
49	case 'saved':	×
50	return 'Saved';	×
51	case 'error':	×
52	return 'Save failed';	×
53	default:	×
54	return '';	×
55	}	×
56	}, [saveStatus]);	×
57
58	const saveStatusColor = useMemo(() => {	×
59	switch (saveStatus) {	×
60	case 'saving':	×
61	return 'blue.500';	×
62	case 'saved':	×
63	return 'green.500';	×
64	case 'error':	×
65	return 'red.500';	×
66	default:	×
67	return 'gray.500';	×
68	}	×
69	}, [saveStatus]);	×
70
71	const handleContentChange = useCallback(	×
72	(value: string \| undefined) => {	×
73	onContentChange(value \|\| '');	×
74	},	×
75	[onContentChange]	×
76	);	×
77
78	return (	×
79	<Box as="main" h="100%" display="flex" flexDirection="column">	×
80	{/* Save status bar */}
81	<Flex	×
82	justify="space-between"	×
83	align="center"	×
84	p={4}	×
85	borderBottom="1px solid"	×
86	borderColor="border"	×
87	>
88	<Text fontSize="lg" fontWeight="semibold">	×
89	{note?.name \|\| 'Select a note'}	×
90	</Text>	×
91	{saveStatus !== 'idle' && (	×
92	<Text fontSize="sm" color={saveStatusColor}>	×
93	{saveStatusText}	×
94	</Text>	×
95	)}
96	</Flex>	×
97
98	{/* Editor area */}
99	<Box flex={1} overflow="hidden" position="relative" minH={0}>	×
100	{note ? (	×
101	<Editor	×
102	value={note.data?.content === null ? welcomeContent : content}	×
103	onChange={handleContentChange}	×
104	selectedLine={selectedLine}	×
105	onEditorReady={onEditorReady}	×
106	placeholder="Start writing your note..."	×
107	/>	×
108	) : (
109	<Flex h="100%" align="center" justify="center">	×
110	<Text color="fg.muted">Select or create a note to start editing</Text>	×
111	</Flex>	×
112	)}
113	</Box>	×
114	</Box>	×
115	);
116	});	×
117
118	export default MiddlePanel;	×

jcubic / 10xDevs / 18687268278

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous