From 897830cd443c94e91c69a2e656f7196852a6712a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=B2=81=E6=A0=91=E4=BA=BA?= <lu.shuren@um-react.app>
Date: Sat, 3 Jun 2023 14:13:37 +0100
Subject: [PATCH] refactor: move components to sub dir

---
 src/Loader.tsx                            | 24 -----------------------
 src/{ => components}/App.tsx              |  2 +-
 src/components/AppRoot.tsx                | 23 ++++++++++++++++++++++
 src/{ => components}/CurrentYear.tsx      |  0
 src/{ => components}/Footer.tsx           |  0
 src/{ => components}/SDKVersion.tsx       |  0
 src/{ => components}/SelectFile.tsx       |  4 ++--
 src/features/file-listing/FileListing.tsx |  2 +-
 src/main.tsx                              | 13 ++++++------
 9 files changed, 34 insertions(+), 34 deletions(-)
 delete mode 100644 src/Loader.tsx
 rename src/{ => components}/App.tsx (87%)
 create mode 100644 src/components/AppRoot.tsx
 rename src/{ => components}/CurrentYear.tsx (100%)
 rename src/{ => components}/Footer.tsx (100%)
 rename src/{ => components}/SDKVersion.tsx (100%)
 rename src/{ => components}/SelectFile.tsx (94%)

diff --git a/src/Loader.tsx b/src/Loader.tsx
deleted file mode 100644
index a728531..0000000
--- a/src/Loader.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React, { useEffect } from 'react';
-import App from './App';
-
-import { ChakraProvider } from '@chakra-ui/react';
-import { Provider } from 'react-redux';
-import { theme } from './theme';
-import { persistSettings } from './features/settings/persistSettings';
-import type { AppStore } from './store';
-
-export function Loader({ store }: { store: AppStore }) {
-  useEffect(() => {
-    return persistSettings(store);
-  }, [store]);
-
-  return (
-    <React.StrictMode>
-      <ChakraProvider theme={theme}>
-        <Provider store={store}>
-          <App />
-        </Provider>
-      </ChakraProvider>
-    </React.StrictMode>
-  );
-}
diff --git a/src/App.tsx b/src/components/App.tsx
similarity index 87%
rename from src/App.tsx
rename to src/components/App.tsx
index cf4640d..5abf092 100644
--- a/src/App.tsx
+++ b/src/components/App.tsx
@@ -1,7 +1,7 @@
 import { Box, Center, Container } from '@chakra-ui/react';
 import { SelectFile } from './SelectFile';
 
-import { FileListing } from './features/file-listing/FileListing';
+import { FileListing } from '~/features/file-listing/FileListing';
 import { Footer } from './Footer';
 
 function App() {
diff --git a/src/components/AppRoot.tsx b/src/components/AppRoot.tsx
new file mode 100644
index 0000000..70d1115
--- /dev/null
+++ b/src/components/AppRoot.tsx
@@ -0,0 +1,23 @@
+import { useEffect } from 'react';
+import App from './App';
+
+import { ChakraProvider } from '@chakra-ui/react';
+import { Provider } from 'react-redux';
+import { theme } from '~/theme';
+import { persistSettings } from '~/features/settings/persistSettings';
+import { setupStore } from '~/store';
+
+// Private to this file only.
+const store = setupStore();
+
+export function AppRoot() {
+  useEffect(() => persistSettings(store), []);
+
+  return (
+    <ChakraProvider theme={theme}>
+      <Provider store={store}>
+        <App />
+      </Provider>
+    </ChakraProvider>
+  );
+}
diff --git a/src/CurrentYear.tsx b/src/components/CurrentYear.tsx
similarity index 100%
rename from src/CurrentYear.tsx
rename to src/components/CurrentYear.tsx
diff --git a/src/Footer.tsx b/src/components/Footer.tsx
similarity index 100%
rename from src/Footer.tsx
rename to src/components/Footer.tsx
diff --git a/src/SDKVersion.tsx b/src/components/SDKVersion.tsx
similarity index 100%
rename from src/SDKVersion.tsx
rename to src/components/SDKVersion.tsx
diff --git a/src/SelectFile.tsx b/src/components/SelectFile.tsx
similarity index 94%
rename from src/SelectFile.tsx
rename to src/components/SelectFile.tsx
index 181c6fe..fc0fd78 100644
--- a/src/SelectFile.tsx
+++ b/src/components/SelectFile.tsx
@@ -2,8 +2,8 @@ import { useDropzone } from 'react-dropzone';
 import { Box, Text } from '@chakra-ui/react';
 import { UnlockIcon } from '@chakra-ui/icons';
 
-import { useAppDispatch } from './hooks';
-import { addNewFile, processFile } from './features/file-listing/fileListingSlice';
+import { useAppDispatch } from '~/hooks';
+import { addNewFile, processFile } from '~/features/file-listing/fileListingSlice';
 import { nanoid } from 'nanoid';
 
 export function SelectFile() {
diff --git a/src/features/file-listing/FileListing.tsx b/src/features/file-listing/FileListing.tsx
index 5211cbf..09bec14 100644
--- a/src/features/file-listing/FileListing.tsx
+++ b/src/features/file-listing/FileListing.tsx
@@ -1,7 +1,7 @@
 import { VStack } from '@chakra-ui/react';
 
 import { selectFiles } from './fileListingSlice';
-import { useAppSelector } from '../../hooks';
+import { useAppSelector } from '~/hooks';
 import { FileRow } from './FileRow';
 
 export function FileListing() {
diff --git a/src/main.tsx b/src/main.tsx
index 469e6dc..d72bd43 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,9 +1,10 @@
+import React from 'react';
 import ReactDOM from 'react-dom/client';
 
-import { setupStore } from './store';
-import { Loader } from './Loader';
+import { AppRoot } from './components/AppRoot';
 
-// Private to this file only.
-const store = setupStore();
-
-ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(<Loader store={store} />);
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+  <React.StrictMode>
+    <AppRoot />
+  </React.StrictMode>
+);