FIX : Changing settings requires refreshing the page to apply #490

src/app/[locale]/page.tsx

@@ -13,7 +13,6 @@ import {
   getOwnActivityData,
 } from "../../api/usersApi";
 import { redirect } from "next/navigation";
-import { getPreferences } from "../../utils/cookieUtils";
 
 export default async function MainPage({
   params: { locale },
@@ -51,8 +50,6 @@ export default async function MainPage({
       throw new Error(JSON.stringify(currentActivity));
     }
 
-    const { dayRange, smoothCharts, maxTimeUnit } = getPreferences();
-
     return (
       <div className={styles.dashboardContainer}>
         <Dashboard
@@ -63,11 +60,8 @@ export default async function MainPage({
             start_time: new Date(e.start_time),
             dayStart: startOfDay(new Date(e.start_time)),
           }))}
-          defaultDayRange={dayRange}
-          smoothCharts={smoothCharts}
           locale={locale}
           initialActivity={currentActivity}
-          maxTimeUnit={maxTimeUnit}
         />
       </div>
     );

src/app/[locale]/users/[username]/page.tsx

@@ -8,7 +8,6 @@ import { CurrentActivity } from "../../../../components/CurrentActivity/CurrentA
 import { GetUserActivityDataError } from "../../../../types";
 import initTranslations from "../../../i18n";
 import { Stack, Title } from "@mantine/core";
-import { getPreferences } from "../../../../utils/cookieUtils";
 
 export default async function UserPage({
   params: { locale, username },
@@ -45,18 +44,13 @@ export default async function UserPage({
     currentActivity = currentActivityResponse ?? undefined;
   }
 
-  const { dayRange, smoothCharts, maxTimeUnit } = getPreferences();
-
   return (
     <Dashboard
       allEntries={data}
       username={decodedUsername}
       isFrontPage={false}
       locale={locale}
       initialActivity={currentActivity}
-      defaultDayRange={dayRange}
-      maxTimeUnit={maxTimeUnit}
-      smoothCharts={smoothCharts}
     />
   );
 }

src/components/Dashboard.tsx

@@ -39,32 +39,30 @@ import { DataCard } from "./DataCard/DataCard";
 import MonthlyCodingTimeChart, {
   transformData as transformMonthlyData,
 } from "./MonthlyCodingTimeChart";
+import { useSettings } from "../hooks/useSettings";
 
 interface DashboardProps {
   username: string;
   isFrontPage: boolean;
   allEntries: ActivityDataEntry[];
-  defaultDayRange: DayRange;
-  smoothCharts: boolean;
   locale: string;
   initialActivity: CurrentActivity | undefined | null;
-  maxTimeUnit: TimeUnit;
 }
 
 export const Dashboard = ({
   username,
   isFrontPage,
   allEntries,
-  defaultDayRange,
-  smoothCharts,
   locale,
   initialActivity,
-  maxTimeUnit,
 }: DashboardProps) => {
   const { t } = useTranslation();
+  const { smoothCharts, defaultDayRange, timeInHours } = useSettings();
+  const maxTimeUnit: TimeUnit = timeInHours ? "h" : "y";
 
-  const [statisticsRange, setStatisticsRange] =
-    useState<DayRange>(defaultDayRange);
+  const [statisticsRange, setStatisticsRange] = useState<DayRange>(
+    defaultDayRange ?? "week",
+  );
   const [selectedProjects, setSelectedProjects] = useState<string[]>([]);
   const isSmallScreen = useMediaQuery("(max-width: 700px)");