Initial commit

src/features/locale/localeSlice.ts

@@ -0,0 +1,63 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+import dayjs from "dayjs";
+import "dayjs/locale/ar";
+import LocalizedFormat from "dayjs/plugin/localizedFormat";
+import preParsePostFormat from "dayjs/plugin/preParsePostFormat";
+import { AppThunk } from "redux/store";
+import { DEFAULT_LANGUAGE } from "utils/constants";
+
+dayjs.extend(LocalizedFormat);
+dayjs.extend(preParsePostFormat); // for arabic numbers
+
+export type LocaleState = {
+  locale: string;
+  isRTL: boolean;
+};
+
+const initialState: LocaleState = {
+  locale:
+    localStorage.getItem(DEFAULT_LANGUAGE) ||
+    import.meta.env.VITE_DEFAULT_LANGUAGE,
+  isRTL:
+    (localStorage.getItem(DEFAULT_LANGUAGE) ||
+      import.meta.env.VITE_DEFAULT_LANGUAGE) === "ar",
+};
+
+function setDateLocale(appLocale: string) {
+  switch (appLocale) {
+    case "ar":
+      dayjs.locale("ar");
+      break;
+    case "en":
+      dayjs.locale("en");
+      break;
+    default:
+      dayjs.locale("en");
+      break;
+  }
+}
+
+export const localeSlice = createSlice({
+  name: "locale",
+  initialState,
+  reducers: {
+    setLocale(state, action: PayloadAction<string>) {
+      state.locale = action.payload;
+      state.isRTL = action.payload === "ar";
+    },
+  },
+});
+export const { setLocale } = localeSlice.actions;
+export default localeSlice.reducer;
+
+export const setLocalesThunk =
+  (newLocale?: string): AppThunk =>
+  async (dispatch) => {
+    const storedLang = localStorage.getItem(DEFAULT_LANGUAGE);
+
+    const lang =
+      newLocale || storedLang || import.meta.env.VITE_DEFAULT_LANGUAGE;
+    if (storedLang !== lang) localStorage.setItem(DEFAULT_LANGUAGE, lang);
+    setDateLocale(lang);
+    dispatch(setLocale(lang));
+  };