folder structure

Author: yessGlory17

.vscode/settings.json

@@ -28,5 +28,8 @@
     "*.{css,sass,scss}.d.ts": true
   },
   "editor.formatOnSave": true,
-  "editor.defaultFormatter": "esbenp.prettier-vscode"
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
 }

src/renderer/App.tsx

@@ -1,46 +1,12 @@
-import { Container } from '@chakra-ui/react';
-import { useState } from 'react';
-
 import { MemoryRouter as Router, Routes, Route } from 'react-router-dom';
 import './App.css';
-import List from './components/List';
-import Searchbar from './components/Searchbar';
-import SearchEngineModal from './components/Settings/SearchEngineModal';
-import { SearchContextProvider } from './context/SearchContext';
-import { TabContextProvider } from './context/TabContext';
-import ShortcutKeys from './hooks/shortcut/ShortcutKeys';
-import useHotkeys from './hooks/shortcut/useHotkeys';
-
-const Hello = () => {
-  //Shorcut: Window Move
-  useHotkeys(`${ShortcutKeys.CTRL}+${ShortcutKeys.LeftArrow}`, () => {
-    window.electron.ipcRenderer.sendMessage('window-move', 'topLeft');
-  });
-
-  useHotkeys(`${ShortcutKeys.CTRL}+${ShortcutKeys.RightArrow}`, () => {
-    window.electron.ipcRenderer.sendMessage('window-move', 'topRight');
-  });
-
-  return (
-    <div id="container">
-      <SearchContextProvider>
-        <Container centerContent paddingTop="10px">
-          <TabContextProvider>
-            <Searchbar />
-            <List />
-            <SearchEngineModal />
-          </TabContextProvider>
-        </Container>
-      </SearchContextProvider>
-    </div>
-  );
-};
+import { BrowserPage } from './views/Browser';
 
 export default function App() {
   return (
     <Router>
       <Routes>
-        <Route path="/" element={<Hello />} />
+        <Route path="/" element={<BrowserPage />} />
       </Routes>
     </Router>
   );

src/renderer/components/BrowserCollapse.tsx src/renderer/components/BrowserCollapse/BrowserCollapse.tsx

@@ -14,9 +14,9 @@ import { FindInPageContext } from 'renderer/context/FindInPageContext';
 import { TabContext } from 'renderer/context/TabContext';
 import ShortcutKeys from 'renderer/hooks/shortcut/ShortcutKeys';
 import useHotkeys from 'renderer/hooks/shortcut/useHotkeys';
-import { SearchContext } from '../context/SearchContext';
-import FindInPage from './FindInPage/FindInPage';
-import Webview from './Webview';
+import { SearchContext } from '../../context/SearchContext';
+import FindInPage from '../FindInPage/FindInPage';
+import Webview from '../Webview/Webview';
 
 type BrowserCollapseTypes = {
   name: string;

src/renderer/components/BrowserCollapse/index.ts

@@ -0,0 +1,2 @@
+import BrowserCollapse from "./BrowserCollapse";
+export {BrowserCollapse};

src/renderer/components/FindInPage/FindInPage.tsx

@@ -25,7 +25,7 @@ import { AiOutlineClose, AiOutlineLeft, AiOutlineRight } from 'react-icons/ai';
 import { FindInPageContext } from 'renderer/context/FindInPageContext';
 import { TabContext } from 'renderer/context/TabContext';
 import useWebviewReady from 'renderer/hooks/webview/useWebviewReady';
-import { WebViewOverride } from '../BrowserCollapse';
+import { WebViewOverride } from '../BrowserCollapse/BrowserCollapse';
 
 type FindInPageProps = {
   children: ReactNode;

src/renderer/components/FindInPage/index.ts

@@ -0,0 +1,2 @@
+import FindInPage from './FindInPage';
+export { FindInPage };

src/renderer/components/Searchbar.tsx src/renderer/components/Searchbar/Searchbar.tsx

@@ -11,9 +11,9 @@ import { useCallback, useContext, useEffect, useState } from 'react';
 import { FcGoogle } from 'react-icons/fc';
 import { SiDuckduckgo } from 'react-icons/si';
 import { FaYandexInternational } from 'react-icons/fa';
-import '../App.css';
-import { SearchContext } from '../context/SearchContext';
-import { TabContext } from '../context/TabContext';
+import '../../App.css';
+import { SearchContext } from '../../context/SearchContext';
+import { TabContext } from '../../context/TabContext';
 
 const Searchbar = () => {
   const { onChange, search, searchEngine } = useContext(SearchContext);

src/renderer/components/Searchbar/index.ts

@@ -0,0 +1,2 @@
+import Searchbar from './Searchbar';
+export { Searchbar };

src/renderer/components/Settings/index.ts

@@ -0,0 +1,2 @@
+import SearchEngineModal from './SearchEngineModal';
+export { SearchEngineModal };

src/renderer/components/List.tsx src/renderer/components/TabList/TabList.tsx

@@ -3,12 +3,12 @@ import { useContext } from 'react';
 import { FindInPageProvider } from 'renderer/context/FindInPageContext';
 import ShortcutKeys from 'renderer/hooks/shortcut/ShortcutKeys';
 import useHotkeys from 'renderer/hooks/shortcut/useHotkeys';
-import { SearchContext } from '../context/SearchContext';
-import { TabContext } from '../context/TabContext';
-import BrowserCollapse from './BrowserCollapse';
-import FindInPage from './FindInPage/FindInPage';
+import { SearchContext } from '../../context/SearchContext';
+import { TabContext } from '../../context/TabContext';
+import BrowserCollapse from '../BrowserCollapse/BrowserCollapse';
+import FindInPage from '../FindInPage/FindInPage';
 
-const List = () => {
+const TabList = () => {
   const { tabs, setTabs } = useContext(SearchContext);
 
   const { currentTabIndex, setTabIndex } = useContext(TabContext);
@@ -66,4 +66,4 @@ const List = () => {
   );
 };
 
-export default List;
+export default TabList;

src/renderer/components/TabList/index.ts

@@ -0,0 +1,2 @@
+import TabList from './TabList';
+export { TabList };

src/renderer/components/Webview.tsx src/renderer/components/Webview/Webview.tsx

@@ -0,0 +1,2 @@
+import Webview from './Webview';
+export { Webview };

src/renderer/components/Webview/index.ts

@@ -0,0 +1,36 @@
+import { Container } from '@chakra-ui/react';
+import '../../App.css';
+import List from '../../components/TabList/TabList';
+import Searchbar from '../../components/Searchbar/Searchbar';
+import SearchEngineModal from '../../components/Settings/SearchEngineModal';
+import { SearchContextProvider } from '../../context/SearchContext';
+import { TabContextProvider } from '../../context/TabContext';
+import ShortcutKeys from '../../hooks/shortcut/ShortcutKeys';
+import useHotkeys from '../../hooks/shortcut/useHotkeys';
+
+const BrowserPage = () => {
+  //Shorcut: Window Move
+  useHotkeys(`${ShortcutKeys.CTRL}+${ShortcutKeys.LeftArrow}`, () => {
+    window.electron.ipcRenderer.sendMessage('window-move', 'topLeft');
+  });
+
+  useHotkeys(`${ShortcutKeys.CTRL}+${ShortcutKeys.RightArrow}`, () => {
+    window.electron.ipcRenderer.sendMessage('window-move', 'topRight');
+  });
+
+  return (
+    <div id="container">
+      <SearchContextProvider>
+        <Container centerContent paddingTop="10px">
+          <TabContextProvider>
+            <Searchbar />
+            <List />
+            <SearchEngineModal />
+          </TabContextProvider>
+        </Container>
+      </SearchContextProvider>
+    </div>
+  );
+};
+
+export default BrowserPage;

src/renderer/views/Browser/BrowserPage.tsx

@@ -0,0 +1,2 @@
+import BrowserPage from "./BrowserPage";
+export {BrowserPage};