Add Swedish locale (#244)

* Add Swedish locale

* Stop reload when changing language

* Add translation

* Remove unused

src/components/page-layout/footer.tsx

@@ -1,5 +1,4 @@
 import Link from "next/link";
-import { useRouter } from "next/router";
 import { Trans, useTranslation } from "next-i18next";
 import * as React from "react";
 
@@ -16,7 +15,6 @@ import { LanguageSelect } from "../poll/language-selector";
 
 const Footer: React.VoidFunctionComponent = () => {
   const { t } = useTranslation("common");
-  const router = useRouter();
   return (
     <div className="mt-16 bg-slate-50/70">
       <div className="mx-auto max-w-7xl space-y-8 p-8 lg:flex lg:space-x-16 lg:space-y-0">
@@ -134,12 +132,7 @@ const Footer: React.VoidFunctionComponent = () => {
         </div>
         <div className="lg:w-2/6">
           <div className="mb-4 font-medium">{t("language")}</div>
-          <LanguageSelect
-            className="mb-4 w-full"
-            onChange={(locale) => {
-              router.push(router.asPath, router.asPath, { locale });
-            }}
-          />
+          <LanguageSelect className="mb-4 w-full" />
           <a
             href="https://github.com/lukevella/rallly/wiki/Guide-for-translators"
             className="inline-flex items-center rounded-md border px-3 py-2 text-xs text-slate-500"

src/components/poll/language-selector.tsx

@@ -17,12 +17,14 @@ export const LanguageSelect: React.VoidFunctionComponent<{
         Cookies.set("NEXT_LOCALE", e.target.value, {
           expires: 365,
         });
+        router.push(router.asPath, router.asPath, { locale: e.target.value });
         onChange?.(e.target.value);
       }}
     >
       <option value="en">{t("english")}</option>
       <option value="fr">{t("french")}</option>
       <option value="de">{t("german")}</option>
+      <option value="sv">{t("swedish")}</option>
     </select>
   );
 };

src/components/preferences.tsx

@@ -1,5 +1,4 @@
 import clsx from "clsx";
-import { useRouter } from "next/router";
 import { useTranslation } from "next-i18next";
 import { usePlausible } from "next-plausible";
 import React from "react";
@@ -13,8 +12,6 @@ const Preferences: React.VoidFunctionComponent = () => {
   const { weekStartsOn, setWeekStartsOn, timeFormat, setTimeFormat } =
     usePreferences();
 
-  const router = useRouter();
-
   const plausible = usePlausible();
   return (
     <div>
@@ -22,7 +19,7 @@ const Preferences: React.VoidFunctionComponent = () => {
         <div className="grow text-sm text-slate-500">
           {t("common:language")}
         </div>
-        <LanguageSelect className="w-full" onChange={() => router.reload()} />
+        <LanguageSelect className="w-full" />
       </div>
       <div className="grow space-y-2">
         <div>

src/components/preferences/preferences-provider.tsx

@@ -2,6 +2,7 @@ import dayjs from "dayjs";
 import de from "dayjs/locale/de";
 import en from "dayjs/locale/en";
 import fr from "dayjs/locale/fr";
+import sv from "dayjs/locale/sv";
 import duration from "dayjs/plugin/duration";
 import isBetween from "dayjs/plugin/isBetween";
 import isSameOrBefore from "dayjs/plugin/isSameOrBefore";
@@ -22,6 +23,7 @@ const dayJsLocales = {
   de,
   en,
   fr,
+  sv,
 };
 
 dayjs.extend(localizedFormat);