fix: fast refresh issue

app/layout.tsx

@@ -1,5 +1,5 @@
 import { authCookieKey, authenticatedPathRegex } from '@/lib/constants';
-import theme from '@/util/theme';
+import { theme } from '@/util/theme';
 import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter';
 import { ThemeProvider } from '@mui/material/styles';
 import { GoogleAnalytics, GoogleTagManager } from '@next/third-parties/google';

app/page.tsx

@@ -1,4 +1,4 @@
-import LandingPage from '@/components/Landing';
+import { LandingPage } from '@/components/Landing';
 
 export default function Home() {
   return (

app/rosters/components/RostersPage.tsx

@@ -49,7 +49,7 @@ const rolesMap: Record<string, string> = {
   member: 'Mem'
 };
 
-const RostersPage = (props: {
+export const RostersPage = (props: {
   guildId: string;
   userId: string;
   token: string;
@@ -964,5 +964,3 @@ function getRosterName(roster: RostersEntity) {
   }
   return roster.name;
 }
-
-export default RostersPage;

app/rosters/page.tsx

@@ -1,7 +1,7 @@
 import jwt from 'jsonwebtoken';
 import { headers } from 'next/headers';
 import { redirect } from 'next/navigation';
-import RostersPage from './components/RostersPage';
+import { RostersPage } from './components/RostersPage';
 
 const getServerSideProps = async () => {
   const headersList = headers();

app/rosters/template.tsx

@@ -1,5 +1,5 @@
 'use client';
-import MotionPresets from '@/components/MotionPresets';
+import { MotionPresets } from '@/components/MotionPresets';
 
 export default function PageTemplate({
   children

app/web/components/AttackLog.tsx

@@ -53,7 +53,7 @@ interface ClanWar {
   };
 }
 
-export default function AttackLog({ data }: { data: ClanWar }) {
+export function AttackLog({ data }: { data: ClanWar }) {
   return (
     <Paper
       variant="outlined"

app/web/components/AttackLogPage.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import AttackLog from '@/app/web/components/AttackLog';
-import Loader from '@/app/web/components/Loader';
+import { AttackLog } from '@/app/web/components/AttackLog';
+import { Loader } from '@/app/web/components/Loader';
 import Container from '@mui/material/Container';
 import { useParams } from 'next/navigation';
 import * as React from 'react';

app/web/components/CapitalContributionPage.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import CapitalDonation from '@/app/web/components/CapitalDonation';
-import Loader from '@/app/web/components/Loader';
+import { CapitalDonation } from '@/app/web/components/CapitalDonation';
+import { Loader } from '@/app/web/components/Loader';
 import Container from '@mui/material/Container';
 import { useParams } from 'next/navigation';
 import { useEffect, useState } from 'react';

app/web/components/CapitalDonation.tsx

@@ -18,7 +18,7 @@ interface Logs {
   createdAt: string;
 }
 
-export default function CapitalDonation({ logs }: { logs: Logs[] }) {
+export function CapitalDonation({ logs }: { logs: Logs[] }) {
   const clan = logs[0]?.clan;
   return (
     <Paper

app/web/components/History.tsx

@@ -53,7 +53,7 @@ interface Summary {
   destruction: number;
 }
 
-export default function History({
+export function History({
   wars,
   attacker,
   summary
@@ -404,31 +404,3 @@ export default function History({
     </Paper>
   );
 }
-
-export const fakeWar = Array.from({ length: 50 }).map((_, index) => {
-  const oldStars = Math.floor(Math.random() * 3);
-  const newStars = Math.floor(Math.random() * 3);
-  const percentage = Math.floor(Math.random() * 100);
-
-  return {
-    oldStars,
-    newStars,
-    percentage,
-    townHall: Math.floor(Math.random() * 5) + 10,
-    opponent: {
-      townHall: Math.floor(Math.random() * 5) + 10,
-      index: Math.floor(Math.random() * 50)
-    }
-  };
-});
-
-// export const fakeRounds = Array.from({ length: 10 }).map((_, index) => {
-//   // generate random name
-//   const name = Math.random().toString(36).substring(7);
-//   return {
-//     name: "Air Hounds vs War Snippers",
-//     date: "10/10/2022",
-//     index: Math.floor(Math.random() * 50),
-//     war: fakeWar,
-//   };
-// });

app/web/components/Loader.tsx

@@ -3,7 +3,7 @@ import Skeleton from '@mui/material/Skeleton';
 import Typography from '@mui/material/Typography';
 import { Container, Stack } from '@mui/system';
 
-const Loader = ({
+export const Loader = ({
   loading,
   message
 }: {
@@ -57,4 +57,3 @@ const Loader = ({
     </Container>
   );
 };
-export default Loader;

app/web/components/PlayerPage.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import History from '@/app/web/components/History';
-import Loader from '@/app/web/components/Loader';
+import { History } from '@/app/web/components/History';
+import { Loader } from '@/app/web/components/Loader';
 import Container from '@mui/material/Container';
 import { useParams } from 'next/navigation';
 import { useEffect, useState } from 'react';

components/BottomNav.tsx

@@ -34,7 +34,7 @@ const navigationItems = [
   }
 ];
 
-export default function BottomNav() {
+export function BottomNav() {
   const _pathname = usePathname();
   const { id } = useParams();
 

components/Landing.tsx

@@ -22,7 +22,7 @@ import {
 } from 'react-icons/fa';
 import { FiActivity } from 'react-icons/fi';
 
-export const FEATURES = [
+const FEATURES = [
   {
     icon: FaSearch,
     title: 'Clash Search',
@@ -72,7 +72,7 @@ export const FEATURES = [
   }
 ];
 
-export default function LandingPage() {
+export function LandingPage() {
   return (
     <>
       <Navbar />

components/MotionPresets.tsx

@@ -24,7 +24,7 @@ export const effects: Record<AnimationType, MotionProps> = {
   }
 };
 
-export default function MotionPresets({
+export function MotionPresets({
   children,
   motionType
 }: {

components/SkeletonLoader.tsx

@@ -1,7 +1,7 @@
 import Skeleton from '@mui/material/Skeleton';
 import Stack from '@mui/material/Stack';
 
-export default function SkeletonLoader() {
+export function SkeletonLoader() {
   return (
     <Stack spacing={1} my={6}>
       <Skeleton variant="text" sx={{ fontSize: '2rem', mb: 2 }} />

components/TopNav.tsx

@@ -5,7 +5,7 @@ import Stack from '@mui/material/Stack';
 import Container from '@mui/material/Container';
 import Typography from '@mui/material/Typography';
 
-export default function TopNav() {
+export function TopNav() {
   return (
     <Paper
       sx={{

components/Transition.tsx

@@ -2,13 +2,11 @@ import Slide from '@mui/material/Slide';
 import { TransitionProps } from '@mui/material/transitions';
 import { forwardRef } from 'react';
 
-const Transition = forwardRef(function Transition(
+export const Transition = forwardRef(function Transition(
   props: TransitionProps & {
     children: React.ReactElement;
   },
   ref: React.Ref<unknown>
 ) {
   return <Slide direction="up" ref={ref} {...props} />;
 });
-
-export default Transition;

hooks/useAPI.ts

@@ -2,7 +2,7 @@ import { authCookieKey } from '@/lib/constants';
 import { getCookie, setCookie } from 'cookies-next';
 import { GuildClansAggregated } from './types';
 
-const useAPI = () => {
+export const useAPI = () => {
   const login = async (email: string, password: string) => {
     const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/auth/login`, {
       method: 'POST',
@@ -101,5 +101,3 @@ const useAPI = () => {
 
   return { login, signup, testToken, uploadFile, getClans };
 };
-
-export default useAPI;

util/theme.ts

@@ -9,7 +9,7 @@ const kanit = Kanit({
   display: 'swap'
 });
 
-const theme = createTheme({
+export const theme = createTheme({
   palette: {
     mode: 'dark'
   },
@@ -35,5 +35,3 @@ const theme = createTheme({
     }
   }
 });
-
-export default theme;