format frontend

josStorer · Aug 23, 2024 · 3aec1f4 · 3aec1f4
1 parent 33b5fb7
commit 3aec1f4
Show file tree

Hide file tree

Showing 66 changed files with 8,656 additions and 5,955 deletions.
diff --git a/frontend/i18nally.json b/frontend/i18nally.json
@@ -81,9 +81,7 @@
     }
   ],
   "ignores": {
-    "valuesInProject": [
-      "use strict"
-    ],
+    "valuesInProject": ["use strict"],
     "valuesInFile": {},
     "filesInProject": [],
     "unignoredFunctionNames": [],
@@ -107,4 +105,4 @@
       "middleware"
     ]
   }
-}
+}
diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js
@@ -1,4 +1,4 @@
-export default {
+module.exports = {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},

diff --git a/frontend/prettier.config.js b/frontend/prettier.config.js
@@ -14,6 +14,6 @@ module.exports = {
   importOrderCombineTypeAndValueImports: true,
   plugins: [
     '@ianvs/prettier-plugin-sort-imports',
-    'prettier-plugin-tailwindcss'
-  ]
-}
+    'prettier-plugin-tailwindcss',
+  ],
+}
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -23,51 +23,68 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import { FluentProvider, Tab, TabList, webDarkTheme, webLightTheme } from '@fluentui/react-components';
-import { FC, useEffect, useState } from 'react';
-import { Route, Routes, useLocation, useNavigate } from 'react-router';
-import { pages as clientPages } from './pages';
-import { useMediaQuery } from 'usehooks-ts';
-import commonStore from './stores/commonStore';
-import { observer } from 'mobx-react-lite';
-import { useTranslation } from 'react-i18next';
-import { CustomToastContainer } from './components/CustomToastContainer';
-import { LazyImportComponent } from './components/LazyImportComponent';
+import { FC, useEffect, useState } from 'react'
+import {
+  FluentProvider,
+  Tab,
+  TabList,
+  webDarkTheme,
+  webLightTheme,
+} from '@fluentui/react-components'
+import { observer } from 'mobx-react-lite'
+import { useTranslation } from 'react-i18next'
+import { Route, Routes, useLocation, useNavigate } from 'react-router'
+import { useMediaQuery } from 'usehooks-ts'
+import { CustomToastContainer } from './components/CustomToastContainer'
+import { LazyImportComponent } from './components/LazyImportComponent'
+import { pages as clientPages } from './pages'
+import commonStore from './stores/commonStore'
 
 const App: FC = observer(() => {
-  const { t } = useTranslation();
-  const navigate = useNavigate();
-  const location = useLocation();
-  const mq = useMediaQuery('(min-width: 640px)');
-  const pages = commonStore.platform === 'web' ? clientPages.filter(page =>
-    !['/configs', '/models', '/downloads', '/train', '/about'].some(path => page.path === path)
-  ) : clientPages;
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const location = useLocation()
+  const mq = useMediaQuery('(min-width: 640px)')
+  const pages =
+    commonStore.platform === 'web'
+      ? clientPages.filter(
+          (page) =>
+            !['/configs', '/models', '/downloads', '/train', '/about'].some(
+              (path) => page.path === path
+            )
+        )
+      : clientPages
 
-  const [path, setPath] = useState<string>(pages[0].path);
+  const [path, setPath] = useState<string>(pages[0].path)
 
   const selectTab = (selectedPath: unknown) =>
-    typeof selectedPath === 'string' ? navigate({ pathname: selectedPath }) : null;
+    typeof selectedPath === 'string'
+      ? navigate({ pathname: selectedPath })
+      : null
 
-  useEffect(() => setPath(location.pathname), [location]);
+  useEffect(() => setPath(location.pathname), [location])
 
   return (
     <FluentProvider
       theme={commonStore.settings.darkMode ? webDarkTheme : webLightTheme}
-      data-theme={commonStore.settings.darkMode ? 'dark' : 'light'}>
+      data-theme={commonStore.settings.darkMode ? 'dark' : 'light'}
+    >
       <div className="flex h-screen">
-        <div className="flex flex-col w-16 sm:w-48 p-2 justify-between">
+        <div className="flex w-16 flex-col justify-between p-2 sm:w-48">
           <TabList
             size="large"
             appearance="subtle"
             selectedValue={path}
             onTabSelect={(_, { value }) => selectTab(value)}
             vertical
           >
-            {pages.filter(page => page.top).map(({ label, path, icon }, index) => (
-              <Tab icon={icon} key={`${path}-${index}`} value={path}>
-                {mq && t(label)}
-              </Tab>
-            ))}
+            {pages
+              .filter((page) => page.top)
+              .map(({ label, path, icon }, index) => (
+                <Tab icon={icon} key={`${path}-${index}`} value={path}>
+                  {mq && t(label)}
+                </Tab>
+              ))}
           </TabList>
           <TabList
             size="large"
@@ -76,24 +93,30 @@ const App: FC = observer(() => {
             onTabSelect={(_, { value }) => selectTab(value)}
             vertical
           >
-            {pages.filter(page => !page.top).map(({ label, path, icon }, index) => (
-              <Tab icon={icon} key={`${path}-${index}`} value={path}>
-                {mq && t(label)}
-              </Tab>
-            ))}
+            {pages
+              .filter((page) => !page.top)
+              .map(({ label, path, icon }, index) => (
+                <Tab icon={icon} key={`${path}-${index}`} value={path}>
+                  {mq && t(label)}
+                </Tab>
+              ))}
           </TabList>
         </div>
-        <div className="h-full w-full py-2 pr-2 box-border overflow-y-hidden">
+        <div className="box-border h-full w-full overflow-y-hidden py-2 pr-2">
           <Routes>
             {pages.map(({ path, element }, index) => (
-              <Route key={`${path}-${index}`} path={path} element={<LazyImportComponent lazyChildren={element} />} />
+              <Route
+                key={`${path}-${index}`}
+                path={path}
+                element={<LazyImportComponent lazyChildren={element} />}
+              />
             ))}
           </Routes>
         </div>
       </div>
       <CustomToastContainer />
     </FluentProvider>
-  );
-});
+  )
+})
 
-export default App;
+export default App
diff --git a/frontend/src/_locales/i18n-react.ts b/frontend/src/_locales/i18n-react.ts
@@ -1,13 +1,16 @@
-import i18n, { changeLanguage } from 'i18next';
-import { initReactI18next } from 'react-i18next';
-import { resources } from './resources';
-import { getUserLanguage } from '../utils';
+import i18n, { changeLanguage } from 'i18next'
+import { initReactI18next } from 'react-i18next'
+import { getUserLanguage } from '../utils'
+import { resources } from './resources'
 
-i18n.use(initReactI18next).init({
-  resources,
-  interpolation: {
-    escapeValue: false // not needed for react as it escapes by default
-  }
-}).then(() => {
-  changeLanguage(getUserLanguage());
-});
+i18n
+  .use(initReactI18next)
+  .init({
+    resources,
+    interpolation: {
+      escapeValue: false, // not needed for react as it escapes by default
+    },
+  })
+  .then(() => {
+    changeLanguage(getUserLanguage())
+  })
diff --git a/frontend/src/_locales/i18n.ts b/frontend/src/_locales/i18n.ts
@@ -1,9 +1,11 @@
-import i18n, { changeLanguage } from 'i18next';
-import { resources } from './resources';
-import { getUserLanguage } from '../utils';
+import i18n, { changeLanguage } from 'i18next'
+import { getUserLanguage } from '../utils'
+import { resources } from './resources'
 
-i18n.init({
-  resources
-}).then(() => {
-  changeLanguage(getUserLanguage());
-});
+i18n
+  .init({
+    resources,
+  })
+  .then(() => {
+    changeLanguage(getUserLanguage())
+  })
diff --git a/frontend/src/_locales/ja/main.json b/frontend/src/_locales/ja/main.json
@@ -364,4 +364,4 @@
   "Note: You are using an English state": "注意: あなたは英語のstateを使用しています",
   "Note: You are using a Chinese state": "注意: あなたは中国語のstateを使用しています",
   "Note: You are using a Japanese state": "注意: あなたは日本語のstateを使用しています"
-}
+}
diff --git a/frontend/src/_locales/resources.ts b/frontend/src/_locales/resources.ts
@@ -1,9 +1,9 @@
-import zhHans from './zh-hans/main.json';
-import ja from './ja/main.json';
+import ja from './ja/main.json'
+import zhHans from './zh-hans/main.json'
 
 export const resources = {
   zh: {
-    translation: zhHans
+    translation: zhHans,
   },
   // de: {
   //   translation: de,
@@ -21,8 +21,8 @@ export const resources = {
   //   translation: it,
   // },
   ja: {
-    translation: ja
-  }
+    translation: ja,
+  },
   // ko: {
   //   translation: ko,
   // },
@@ -35,4 +35,4 @@ export const resources = {
   // zhHant: {
   //   translation: zhHant,
   // },
-};
+}
diff --git a/frontend/src/_locales/zh-hans/main.json b/frontend/src/_locales/zh-hans/main.json
@@ -364,4 +364,4 @@
   "Note: You are using an English state": "注意: 你正在使用一个英文state",
   "Note: You are using a Chinese state": "注意: 你正在使用一个中文state",
   "Note: You are using a Japanese state": "注意: 你正在使用一个日文state"
-}
+}