select file in the tree

ui/shared/monaco/CodeEditor.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 
 import type { File } from './types';
 
-import CodeEditorFileExplorer from './CodeEditorFileExplorer';
+import CodeEditorSideBar from './CodeEditorSideBar';
 import * as themes from './utils/themes';
 
 export type Monaco = typeof monaco;
@@ -16,7 +16,7 @@ interface Props {
 
 const CodeEditor = ({ data }: Props) => {
   const instance = React.useRef<Monaco>();
-  const [ index ] = React.useState(0);
+  const [ index, setIndex ] = React.useState(0);
 
   const { colorMode } = useColorMode();
 
@@ -35,10 +35,9 @@ const CodeEditor = ({ data }: Props) => {
   }, [ ]);
 
   return (
-    <Flex overflow="hidden" borderRadius="md">
+    <Flex overflow="hidden" borderRadius="md" height="500px">
       <Box flexGrow={ 1 }>
         <MonacoEditor
-          height="500px"
           language="sol"
           path={ data[index].file_path }
           defaultValue={ data[index].source_code }
@@ -46,9 +45,7 @@ const CodeEditor = ({ data }: Props) => {
           onMount={ handleEditorDidMount }
         />
       </Box>
-      <Box w="250px" flexShrink={ 0 } bgColor="lightpink" fontSize="sm">
-        <CodeEditorFileExplorer data={ data }/>
-      </Box>
+      <CodeEditorSideBar data={ data } onFileSelect={ setIndex }/>
     </Flex>
   );
 };

ui/shared/monaco/CodeEditorFileExplorer.tsx

@@ -8,16 +8,26 @@ import composeFileTree from './utils/composeFileTree';
 
 interface Props {
   data: Array<File>;
+  onFileSelect: (index: number) => void;
 }
 
-const CodeEditorFileExplorer = ({ data }: Props) => {
+const CodeEditorFileExplorer = ({ data, onFileSelect }: Props) => {
   const tree = React.useMemo(() => {
     return composeFileTree(data);
   }, [ data ]);
 
+  const handleFileClick = React.useCallback((event: React.MouseEvent) => {
+    const filePath = (event.currentTarget as HTMLDivElement).getAttribute('data-file-path');
+    const fileIndex = data.findIndex((item) => item.file_path === filePath);
+
+    if (fileIndex > -1) {
+      onFileSelect(fileIndex);
+    }
+  }, [ data, onFileSelect ]);
+
   return (
     <Box>
-      <CodeEditorFileTree tree={ tree }/>
+      <CodeEditorFileTree tree={ tree } onItemClick={ handleFileClick }/>
     </Box>
   );
 };

ui/shared/monaco/CodeEditorFileTree.tsx

@@ -7,9 +7,10 @@ import type { FileTree } from './types';
 interface Props {
   tree: FileTree;
   level?: number;
+  onItemClick: (event: React.MouseEvent) => void;
 }
 
-const CodeEditorFileTree = ({ tree, level = 0 }: Props) => {
+const CodeEditorFileTree = ({ tree, level = 0, onItemClick }: Props) => {
   const itemProps: ChakraProps = {
     ml: level ? 4 : 0,
     borderWidth: '0px',
@@ -18,8 +19,9 @@ const CodeEditorFileTree = ({ tree, level = 0 }: Props) => {
     },
     cursor: 'pointer',
   };
+
   return (
-    <Accordion allowMultiple>
+    <Accordion allowMultiple defaultIndex={ tree.map((item, index) => index) } reduceMotion>
       {
         tree.map((leaf, index) => {
           if ('children' in leaf) {
@@ -30,14 +32,14 @@ const CodeEditorFileTree = ({ tree, level = 0 }: Props) => {
                   <span>{ leaf.name }</span>
                 </AccordionButton>
                 <AccordionPanel p={ 0 }>
-                  <CodeEditorFileTree tree={ leaf.children } level={ level + 1 }/>
+                  <CodeEditorFileTree tree={ leaf.children } level={ level + 1 } onItemClick={ onItemClick }/>
                 </AccordionPanel>
               </AccordionItem>
             );
           }
 
           return (
-            <AccordionItem key={ index } { ...itemProps }>
+            <AccordionItem key={ index } { ...itemProps } onClick={ onItemClick } data-file-path={ leaf.file_path }>
               { leaf.name }
             </AccordionItem>
           );

ui/shared/monaco/CodeEditorSideBar.tsx

+import { Box } from '@chakra-ui/react';
+import React from 'react';
+
+import type { File } from './types';
+
+import CodeEditorFileExplorer from './CodeEditorFileExplorer';
+
+interface Props {
+  data: Array<File>;
+  onFileSelect: (index: number) => void;
+}
+
+const CodeEditorSideBar = ({ onFileSelect, data }: Props) => {
+  return (
+    <Box w="250px" flexShrink={ 0 } bgColor="lightpink" fontSize="sm" overflowY="scroll">
+      <Box fontFamily="heading" pl={ 3 } letterSpacing={ 0.5 } fontWeight={ 600 }>EXPLORER</Box>
+      <CodeEditorFileExplorer data={ data } onFileSelect={ onFileSelect }/>
+    </Box>
+  );
+};
+
+export default React.memo(CodeEditorSideBar);