refactor: use function for component

Author: jooy2

src/renderer/App.tsx

@@ -7,19 +7,19 @@ import Player from '@/renderer/screens/Player';
 import About from '@/renderer/screens/About';
 import Settings from '@/renderer/screens/Settings';
 
-const App = () => (
-  <HashRouter>
-    <Routes>
-      <Route path="/">
-        <Route index element={<Main />} />
-        <Route path="/explorer" element={<Explorer />} />
-        <Route path="/player" element={<Player />} />
-        <Route path="/settings" element={<Settings />} />
-        <Route path="/about" element={<About />} />
-        <Route path="*" element={<NotFound />} />
-      </Route>
-    </Routes>
-  </HashRouter>
-);
-
-export default App;
+export default function App() {
+  return (
+    <HashRouter>
+      <Routes>
+        <Route path="/">
+          <Route index element={<Main />} />
+          <Route path="/explorer" element={<Explorer />} />
+          <Route path="/player" element={<Player />} />
+          <Route path="/settings" element={<Settings />} />
+          <Route path="/about" element={<About />} />
+          <Route path="*" element={<NotFound />} />
+        </Route>
+      </Routes>
+    </HashRouter>
+  );
+}

src/renderer/components/dialogs/ModalConfirm.tsx

@@ -8,7 +8,14 @@ import { useTranslation } from 'react-i18next';
 
 import { userSelectNone } from '@/renderer/utils/styles';
 
-const ModalConfirm = ({ open = false, noCancel = false, onOk, onCancel, onClose, content }) => {
+export default function ModalConfirm({
+  open = false,
+  noCancel = false,
+  onOk,
+  onCancel,
+  onClose,
+  content,
+}) {
   const [t] = useTranslation(['common', 'notice', 'menu']);
 
   const handleDialogClose = () => {
@@ -35,6 +42,4 @@ const ModalConfirm = ({ open = false, noCancel = false, onOk, onCancel, onClose,
       </DialogActions>
     </Dialog>
   );
-};
-
-export default ModalConfirm;
+}

src/renderer/components/dialogs/ModalLocalStorageView.tsx

@@ -17,7 +17,7 @@ import { useMemo, useState } from 'react';
 import ModalConfirm from '@/renderer/components/dialogs/ModalConfirm';
 import { css } from '@emotion/react';
 
-const ModalLocalStorageView = () => {
+export default function ModalLocalStorageView() {
   const [t] = useTranslation(['common', 'notice', 'menu']);
   const dispatch = useDispatch();
   const stateAppScreen = useSelector((state: RootState) => state.appScreen);
@@ -128,6 +128,4 @@ const ModalLocalStorageView = () => {
       />
     </>
   );
-};
-
-export default ModalLocalStorageView;
+}

src/renderer/components/dialogs/ModalMetadata.tsx

@@ -17,7 +17,7 @@ import { userSelectNone } from '@/renderer/utils/styles';
 import { RootState } from '@/renderer/store';
 import { setConfig } from '@/renderer/store/slices/appScreenSlice';
 
-const ModalMetadata = () => {
+export default function ModalMetadata() {
   const [t] = useTranslation(['common', 'notice', 'menu']);
   const stateAppScreen = useSelector((state: RootState) => state.appScreen);
   const dispatch = useDispatch();
@@ -73,6 +73,4 @@ const ModalMetadata = () => {
       </DialogActions>
     </Dialog>
   );
-};
-
-export default ModalMetadata;
+}

src/renderer/components/layouts/Header.tsx

@@ -20,7 +20,7 @@ import ModalMetadata from '@/renderer/components/dialogs/ModalMetadata';
 import { buttonGroupButtonBase, marginRightXs } from '@/renderer/utils/styles';
 import { arrWithNumber } from '@/renderer/utils/helper';
 
-const Header = ({ title, withBackButton, withRefresh = false }) => {
+export default function Header({ title, withBackButton, withRefresh = false }) {
   const navigate = useNavigate();
   const location = useLocation();
   const dispatch = useDispatch();
@@ -137,6 +137,4 @@ const Header = ({ title, withBackButton, withRefresh = false }) => {
       </Toolbar>
     </AppBar>
   );
-};
-
-export default Header;
+}

src/renderer/components/layouts/Layout.tsx

@@ -9,7 +9,7 @@ import { headerArea } from '@/renderer/utils/styles';
 import { useSelector } from 'react-redux';
 import { RootState } from '@/renderer/store';
 
-const Layout = ({
+export default function Layout({
   title = 'Flare Player',
   titleTail = ' - Flare Flash Player',
   withTail = true,
@@ -19,7 +19,7 @@ const Layout = ({
   withPadding = true,
   withBackButton = false,
   children,
-}) => {
+}) {
   const stateAppScreen = useSelector((state: RootState) => state.appScreen);
 
   return (
@@ -71,6 +71,4 @@ const Layout = ({
       </Grid>
     </div>
   );
-};
-
-export default Layout;
+}

src/renderer/components/layouts/ThemeContainer.tsx

@@ -10,7 +10,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { RootState } from '@/renderer/store';
 import { setConfig } from '@/renderer/store/slices/appScreenSlice';
 
-const ThemeContainer = ({ children }) => {
+export default function ThemeContainer({ children }) {
   const dispatch = useDispatch();
   const stateAppScreen = useSelector((state: RootState) => state.appScreen);
   const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
@@ -111,6 +111,4 @@ const ThemeContainer = ({ children }) => {
       <ThemeProvider theme={muiTheme}>{children}</ThemeProvider>
     </MuiThemeProvider>
   );
-};
-
-export default ThemeContainer;
+}

src/renderer/components/views/FlashPlayer.tsx

@@ -18,7 +18,7 @@ import VolumeUp from '@mui/icons-material/VolumeUp';
 import { useTranslation } from 'react-i18next';
 import ModalConfirm from '@/renderer/components/dialogs/ModalConfirm';
 
-const FlashPlayer = ({ url = '', autoplay = true, filePath = '', header = true }) => {
+export default function FlashPlayer({ url = '', autoplay = true, filePath = '', header = true }) {
   const [t] = useTranslation(['menu']);
   const navigate = useNavigate();
   const player: any = useRef(null);
@@ -246,6 +246,4 @@ const FlashPlayer = ({ url = '', autoplay = true, filePath = '', header = true }
       />
     </>
   );
-};
-
-export default FlashPlayer;
+}

src/renderer/components/views/PanelHeader.tsx

@@ -1,11 +1,11 @@
 /** @jsxImportSource @emotion/react */
 import Typography from '@mui/material/Typography';
 
-const PanelHeader = ({ title, desc }) => (
-  <>
-    <Typography component="h3">{title}</Typography>
-    <Typography component="span">{desc}</Typography>
-  </>
-);
-
-export default PanelHeader;
+export default function PanelHeader({ title, desc }) {
+  return (
+    <>
+      <Typography component="h3">{title}</Typography>
+      <Typography component="span">{desc}</Typography>
+    </>
+  );
+}

src/renderer/screens/About.tsx

@@ -15,7 +15,7 @@ import { paperBase } from '@/renderer/utils/styles';
 import { useSelector } from 'react-redux';
 import { RootState } from '@/renderer/store';
 
-const About = () => {
+export default function About() {
   const [t] = useTranslation(['common', 'notice', 'menu']);
   const stateAppScreen = useSelector((state: RootState) => state.appScreen);
   const ruffleVersion = useMemo(() => stateAppScreen.mainGlobalValues.APP_RUFFLE_VERSION_DATE, []);
@@ -60,6 +60,4 @@ const About = () => {
       </Grid>
     </Layout>
   );
-};
-
-export default About;
+}

src/renderer/screens/Explorer.tsx

@@ -26,7 +26,7 @@ import { loadingText, paperSm } from '@/renderer/utils/styles';
 import { setConfig } from '@/renderer/store/slices/appScreenSlice';
 import useTheme from '@mui/material/styles/useTheme';
 
-const Explorer = () => {
+export default function Explorer() {
   const dispatch = useDispatch();
   const stateAppScreen = useSelector((state: RootState) => state.appScreen);
   const theme = useTheme();
@@ -259,6 +259,4 @@ const Explorer = () => {
       </Grid>
     </Layout>
   );
-};
-
-export default Explorer;
+}

src/renderer/screens/Main.tsx

@@ -14,7 +14,7 @@ import { setConfig } from '@/renderer/store/slices/appScreenSlice';
 import { loadingText } from '@/renderer/utils/styles';
 import useTheme from '@mui/material/styles/useTheme';
 
-const Main = () => {
+export default function Main() {
   const dispatch = useDispatch();
   const theme = useTheme();
   const [t, i18n] = useTranslation(['common']);
@@ -153,6 +153,4 @@ const Main = () => {
       </Grid>
     </Layout>
   );
-};
-
-export default Main;
+}

src/renderer/screens/NotFound.tsx

@@ -1,10 +1,10 @@
 import { Link } from 'react-router-dom';
 
-const NotFound = () => (
-  <div className="App">
-    <h1>Unknown Error</h1>
-    <Link to="/">Go to Main Page</Link>
-  </div>
-);
-
-export default NotFound;
+export default function NotFound() {
+  return (
+    <div className="App">
+      <h1>Unknown Error</h1>
+      <Link to="/">Go to Main Page</Link>
+    </div>
+  );
+}

src/renderer/screens/Player.tsx

@@ -8,7 +8,7 @@ import Layout from '@/renderer/components/layouts/Layout';
 import FlashPlayer from '@/renderer/components/views/FlashPlayer';
 import { setConfig } from '@/renderer/store/slices/appScreenSlice';
 
-const Player = () => {
+export default function Player() {
   const stateAppScreen = useSelector((state: RootState) => state.appScreen);
   const dispatch = useDispatch();
   const navigate = useNavigate();
@@ -43,6 +43,4 @@ const Player = () => {
       />
     </Layout>
   );
-};
-
-export default Player;
+}

src/renderer/screens/Settings.tsx

@@ -22,7 +22,7 @@ import PanelHeader from '@/renderer/components/views/PanelHeader';
 import { setConfig } from '@/renderer/store/slices/appScreenSlice';
 import ModalLocalStorageView from '../components/dialogs/ModalLocalStorageView';
 
-const Settings = () => {
+export default function Settings() {
   const stateAppScreen = useSelector((state: RootState) => state.appScreen);
   const dispatch = useDispatch();
   const [t, i18n] = useTranslation(['common', 'notice', 'menu']);
@@ -461,6 +461,4 @@ const Settings = () => {
       </Grid>
     </Layout>
   );
-};
-
-export default Settings;
+}