feat: change max time unit to a dropdown

Author: Eldemarkki

public/locales/en/common.json

@@ -231,8 +231,16 @@
       "defaultDayRange": "Default day range",
       "language": "Language",
       "smoothCharts": "Smooth charts",
-      "timeInHours": "Convert large time units to hours",
-      "title": "Settings"
+      "title": "Settings",
+      "timeUnits": {
+        "label": "Largest displayed time unit",
+        "y": "Year",
+        "mo": "Month",
+        "d": "Day",
+        "h": "Hour",
+        "min": "Minute",
+        "s": "Second"
+      }
     },
     "title": "My profile",
     "username": "Username: {{username}}"

public/locales/fi/common.json

@@ -231,8 +231,16 @@
       "defaultDayRange": "Oletuksena näytettävä aikaväli",
       "language": "Kieli",
       "smoothCharts": "Pehmeät kaaviot",
-      "timeInHours": "Muunna suuret aikayksiköt tunteihin",
-      "title": "Asetukset"
+      "title": "Asetukset",
+      "timeUnits": {
+        "label": "Suurin näytettävä aikayksikkö",
+        "y": "Vuosi",
+        "mo": "Kuukausi",
+        "d": "Päivä",
+        "h": "Tunti",
+        "min": "Minuutti",
+        "s": "Sekuntti"
+      }
     },
     "title": "Profiili",
     "username": "Käyttäjänimi: {{username}}"

src/app/[locale]/profile/page.tsx

@@ -15,7 +15,7 @@ import { AuthTokenField } from "./AuthTokenField";
 import { redirect } from "next/navigation";
 import { getMe } from "../../../api/usersApi";
 import ChangeUsernameForm from "../../../components/ChangeUsernameForm";
-import { TimeInHoursSelector } from "../../../components/TimeInHoursSelector/TimeInHoursSelector";
+import { MaxTimeUnitSelector } from "../../../components/MaxTimeUnitSelector/MaxTimeUnitSelector";
 
 export type ProfilePageProps = {
   username: string;
@@ -130,7 +130,7 @@ export default async function ProfilePage({
         <SmoothChartsSelector />
         <LanguageSelector locale={locale} />
         <DefaultDayRangeSelector />
-        <TimeInHoursSelector />
+        <MaxTimeUnitSelector />
       </Stack>
     </Stack>
   );

src/components/Dashboard.tsx

@@ -19,7 +19,6 @@ import {
   getDayCount,
   isDayRange,
   prettyDuration,
-  TimeUnit,
 } from "../utils/dateUtils";
 import { TopProjects } from "./TopProjects/TopProjects";
 import { sumBy } from "../utils/arrayUtils";
@@ -57,8 +56,7 @@ export const Dashboard = ({
   initialActivity,
 }: DashboardProps) => {
   const { t } = useTranslation();
-  const { smoothCharts, defaultDayRange, timeInHours } = useSettings();
-  const maxTimeUnit: TimeUnit = timeInHours ? "h" : "y";
+  const { smoothCharts, defaultDayRange, maxTimeUnit } = useSettings();
 
   const [statisticsRange, setStatisticsRange] = useState<DayRange>(
     defaultDayRange ?? "week",

src/components/DefaultDayRangeSelector/DefaultDayRangeSelector.tsx

@@ -5,16 +5,22 @@ import { useSettings } from "../../hooks/useSettings";
 import { DayRange } from "../../utils/dateUtils";
 import { useTranslation } from "react-i18next";
 import { useRouter } from "next/navigation";
+import { useId } from "react";
 
 export const DefaultDayRangeSelector = () => {
   const { defaultDayRange, setDefaultDayRange } = useSettings();
   const { t } = useTranslation();
   const router = useRouter();
 
+  const id = useId();
+
   return (
     <Group>
-      <Text>{t("profile.settings.defaultDayRange")}</Text>
+      <label htmlFor={id}>
+        <Text>{t("profile.settings.defaultDayRange")}</Text>
+      </label>
       <SegmentedControl
+        id={id}
         data={[
           { label: t("dashboard.timeFilters.week"), value: "week" },
           { label: t("dashboard.timeFilters.month"), value: "month" },

src/components/LanguageSelector/LanguageSelector.tsx

@@ -10,6 +10,7 @@ import {
 import { useSettings } from "../../hooks/useSettings";
 import { Locales } from "../../i18next";
 import { useTranslation } from "react-i18next";
+import { useId } from "react";
 
 type LanguageSelectorType = "segmented" | "dropdown";
 
@@ -29,6 +30,8 @@ export const LanguageSelector = ({
   const { setLanguage } = useSettings();
   const { t } = useTranslation();
 
+  const id = useId();
+
   const data = [
     { label: "🇺🇸 English", value: "en" },
     { label: "🇫🇮 Suomi", value: "fi" },
@@ -42,13 +45,15 @@ export const LanguageSelector = ({
   const Component =
     type === "segmented" ? (
       <SegmentedControl
+        id={id}
         size={size}
         data={data}
         value={locale}
         onChange={onChange}
       />
     ) : (
       <Select
+        id={id}
         size={size}
         data={data}
         value={locale}
@@ -59,7 +64,9 @@ export const LanguageSelector = ({
 
   return showLabel ? (
     <Group>
-      {<Text>{t("profile.settings.language")}</Text>}
+      <label htmlFor={id}>
+        <Text>{t("profile.settings.language")}</Text>
+      </label>
       {Component}
     </Group>
   ) : (

src/components/MaxTimeUnitSelector/MaxTimeUnitSelector.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { useTranslation } from "react-i18next";
+import { useSettings } from "../../hooks/useSettings";
+import { Group, Select, Text } from "@mantine/core";
+import { TimeUnit, timeUnits } from "../../utils/dateUtils";
+import { useId } from "react";
+
+export const MaxTimeUnitSelector = () => {
+  const { maxTimeUnit, setMaxTimeUnit } = useSettings();
+  const { t } = useTranslation();
+
+  const id = useId();
+
+  return (
+    <Group>
+      <label htmlFor={id}>
+        <Text>{t("profile.settings.timeUnits.label")}</Text>
+      </label>
+      <Select
+        id={id}
+        value={maxTimeUnit}
+        data={timeUnits.map((x) => ({
+          value: x.suffix,
+          label: t(`profile.settings.timeUnits.${x.suffix}`),
+        }))}
+        onChange={(v) => {
+          if (v) {
+            setMaxTimeUnit(v as unknown as TimeUnit);
+          }
+        }}
+      />
+    </Group>
+  );
+};

src/components/SmoothChartsSelector/SmoothChartsSelector.tsx

@@ -1,21 +1,27 @@
 "use client";
 
-import { Checkbox, Group } from "@mantine/core";
+import { Checkbox, Group, Text } from "@mantine/core";
 import { useSettings } from "../../hooks/useSettings";
 import { useTranslation } from "react-i18next";
+import { useId } from "react";
 
 export const SmoothChartsSelector = () => {
   const { smoothCharts, setSmoothCharts } = useSettings();
   const { t } = useTranslation();
 
+  const id = useId();
+
   return (
     <Group>
+      <label htmlFor={id}>
+        <Text>{t("profile.settings.smoothCharts")}</Text>
+      </label>
       <Checkbox
+        id={id}
         checked={smoothCharts}
         onChange={(e) => {
           setSmoothCharts(e.target.checked);
         }}
-        label={t("profile.settings.smoothCharts")}
       />
     </Group>
   );

src/components/TimeInHoursSelector/TimeInHoursSelector.tsx

@@ -1,7 +1,8 @@
 import { createContext } from "react";
-import { DayRange } from "../utils/dateUtils";
+import { DayRange, TimeUnit } from "../utils/dateUtils";
 import { Locales } from "../i18next";
 import { MantineColorScheme } from "@mantine/core";
+import { DEFAULT_MAX_TIME_UNIT } from "../utils/constants";
 
 interface SettingsContextValue {
   smoothCharts: boolean;
@@ -13,8 +14,8 @@ interface SettingsContextValue {
   setColorScheme: (colorScheme: MantineColorScheme) => void;
   defaultDayRange?: DayRange;
   setDefaultDayRange: (defaultDayRange: DayRange) => void;
-  timeInHours: boolean;
-  setTimeInHours: (timeInHours: boolean) => void;
+  maxTimeUnit: TimeUnit;
+  setMaxTimeUnit: (maxTimeUnit: TimeUnit) => void;
 }
 
 const defaultCallback = () => {
@@ -30,8 +31,8 @@ const defaultValue: SettingsContextValue = {
   setColorScheme: defaultCallback,
   defaultDayRange: undefined,
   setDefaultDayRange: defaultCallback,
-  timeInHours: false,
-  setTimeInHours: defaultCallback,
+  maxTimeUnit: DEFAULT_MAX_TIME_UNIT,
+  setMaxTimeUnit: defaultCallback,
 };
 
 export const SettingsContext = createContext(defaultValue);