feat: add `user_setting` model (#145)

* feat: add `user_setting` model

* chore: add global store

* chore: update settings in web

* chore: update `i18n` example

api/user.go

@@ -34,6 +34,7 @@ type User struct {
 	Name            string         `json:"name"`
 	PasswordHash    string         `json:"-"`
 	OpenID          string         `json:"openId"`
+	UserSettingList []*UserSetting `json:"userSettingList"`
 }
 
 type UserCreate struct {

api/user_setting.go

@@ -0,0 +1,34 @@
+package api
+
+type UserSettingKey string
+
+const (
+	// UserSettingLocaleKey is the key type for user locale
+	UserSettingLocaleKey UserSettingKey = "locale"
+)
+
+// String returns the string format of UserSettingKey type.
+func (key UserSettingKey) String() string {
+	switch key {
+	case UserSettingLocaleKey:
+		return "locale"
+	}
+	return ""
+}
+
+type UserSetting struct {
+	UserID int
+	Key    UserSettingKey `json:"key"`
+	// Value is a JSON string with basic value
+	Value string `json:"value"`
+}
+
+type UserSettingUpsert struct {
+	UserID int
+	Key    UserSettingKey `json:"key"`
+	Value  string         `json:"value"`
+}
+
+type UserSettingFind struct {
+	UserID int
+}

server/user.go

@@ -58,24 +58,29 @@ func (s *Server) registerUserRoutes(g *echo.Group) {
 		return nil
 	})
 
-	g.GET("/user/:id", func(c echo.Context) error {
+	// GET /api/user/me is used to check if the user is logged in.
+	g.GET("/user/me", func(c echo.Context) error {
 		ctx := c.Request().Context()
-		id, err := strconv.Atoi(c.Param("id"))
+		userID, ok := c.Get(getUserIDContextKey()).(int)
-		if err != nil {
+		if !ok {
-			return echo.NewHTTPError(http.StatusBadRequest, "Malformatted user id").SetInternal(err)
+			return echo.NewHTTPError(http.StatusUnauthorized, "Missing auth session")
 		}
 
-		user, err := s.Store.FindUser(ctx, &api.UserFind{
+		userFind := &api.UserFind{
-			ID: &id,
+			ID: &userID,
-		})
+		}
+		user, err := s.Store.FindUser(ctx, userFind)
 		if err != nil {
-			return echo.NewHTTPError(http.StatusInternalServerError, "Failed to fetch user").SetInternal(err)
+			return echo.NewHTTPError(http.StatusInternalServerError, "Failed to find user").SetInternal(err)
 		}
 
-		if user != nil {
+		userSettingList, err := s.Store.FindUserSettingList(ctx, &api.UserSettingFind{
-			// data desensitize
+			UserID: userID,
-			user.OpenID = ""
+		})
+		if err != nil {
+			return echo.NewHTTPError(http.StatusInternalServerError, "Failed to find userSettingList").SetInternal(err)
 		}
+		user.UserSettingList = userSettingList
 
 		c.Response().Header().Set(echo.HeaderContentType, echo.MIMEApplicationJSONCharsetUTF8)
 		if err := json.NewEncoder(c.Response().Writer).Encode(composeResponse(user)); err != nil {
@@ -84,22 +89,54 @@ func (s *Server) registerUserRoutes(g *echo.Group) {
 		return nil
 	})
 
-	// GET /api/user/me is used to check if the user is logged in.
+	g.POST("/user/setting", func(c echo.Context) error {
-	g.GET("/user/me", func(c echo.Context) error {
 		ctx := c.Request().Context()
 		userID, ok := c.Get(getUserIDContextKey()).(int)
 		if !ok {
 			return echo.NewHTTPError(http.StatusUnauthorized, "Missing auth session")
 		}
 
-		userFind := &api.UserFind{
+		userSettingUpsert := &api.UserSettingUpsert{}
-			ID: &userID,
+		if err := json.NewDecoder(c.Request().Body).Decode(userSettingUpsert); err != nil {
+			return echo.NewHTTPError(http.StatusBadRequest, "Malformatted post user setting upsert request").SetInternal(err)
 		}
-		user, err := s.Store.FindUser(ctx, userFind)
+
+		if userSettingUpsert.Key.String() == "" {
+			return echo.NewHTTPError(http.StatusBadRequest, "Invalid user setting key")
+		}
+
+		userSettingUpsert.UserID = userID
+		userSetting, err := s.Store.UpsertUserSetting(ctx, userSettingUpsert)
+		if err != nil {
+			return echo.NewHTTPError(http.StatusInternalServerError, "Failed to upsert user setting").SetInternal(err)
+		}
+
+		c.Response().Header().Set(echo.HeaderContentType, echo.MIMEApplicationJSONCharsetUTF8)
+		if err := json.NewEncoder(c.Response().Writer).Encode(composeResponse(userSetting)); err != nil {
+			return echo.NewHTTPError(http.StatusInternalServerError, "Failed to encode user setting response").SetInternal(err)
+		}
+		return nil
+	})
+
+	g.GET("/user/:id", func(c echo.Context) error {
+		ctx := c.Request().Context()
+		id, err := strconv.Atoi(c.Param("id"))
+		if err != nil {
+			return echo.NewHTTPError(http.StatusBadRequest, "Malformatted user id").SetInternal(err)
+		}
+
+		user, err := s.Store.FindUser(ctx, &api.UserFind{
+			ID: &id,
+		})
 		if err != nil {
 			return echo.NewHTTPError(http.StatusInternalServerError, "Failed to fetch user").SetInternal(err)
 		}
 
+		if user != nil {
+			// data desensitize
+			user.OpenID = ""
+		}
+
 		c.Response().Header().Set(echo.HeaderContentType, echo.MIMEApplicationJSONCharsetUTF8)
 		if err := json.NewEncoder(c.Response().Writer).Encode(composeResponse(user)); err != nil {
 			return echo.NewHTTPError(http.StatusInternalServerError, "Failed to encode user response").SetInternal(err)

store/db/migration/dev/LATEST__SCHEMA.sql

@@ -3,6 +3,7 @@ DROP TABLE IF EXISTS `memo_organizer`;
 DROP TABLE IF EXISTS `memo`;
 DROP TABLE IF EXISTS `shortcut`;
 DROP TABLE IF EXISTS `resource`;
+DROP TABLE IF EXISTS `user_setting`;
 DROP TABLE IF EXISTS `user`;
 
 -- user
@@ -139,3 +140,13 @@ SET
 WHERE
   rowid = old.rowid;
 END;
+
+-- user_setting
+CREATE TABLE user_setting (
+  user_id INTEGER NOT NULL,
+  key TEXT NOT NULL,
+  value TEXT NOT NULL,
+  FOREIGN KEY(user_id) REFERENCES user(id) ON DELETE CASCADE
+);
+
+CREATE UNIQUE INDEX user_setting_key_user_id_index ON user_setting(key, user_id);

store/db/migration/prod/0.4/00__user_setting.sql

@@ -0,0 +1,9 @@
+-- user_setting
+CREATE TABLE user_setting (
+  user_id INTEGER NOT NULL,
+  key TEXT NOT NULL,
+  value TEXT NOT NULL,
+  FOREIGN KEY(user_id) REFERENCES user(id) ON DELETE CASCADE
+);
+
+CREATE UNIQUE INDEX user_setting_key_user_id_index ON user_setting(key, user_id);

store/user_setting.go

@@ -0,0 +1,122 @@
+package store
+
+import (
+	"context"
+	"database/sql"
+
+	"github.com/usememos/memos/api"
+)
+
+type userSettingRaw struct {
+	UserID int
+	Key    api.UserSettingKey
+	Value  string
+}
+
+func (raw *userSettingRaw) toUserSetting() *api.UserSetting {
+	return &api.UserSetting{
+		UserID: raw.UserID,
+		Key:    raw.Key,
+		Value:  raw.Value,
+	}
+}
+
+func (s *Store) UpsertUserSetting(ctx context.Context, upsert *api.UserSettingUpsert) (*api.UserSetting, error) {
+	tx, err := s.db.BeginTx(ctx, nil)
+	if err != nil {
+		return nil, FormatError(err)
+	}
+	defer tx.Rollback()
+
+	userSettingRaw, err := upsertUserSetting(ctx, tx, upsert)
+	if err != nil {
+		return nil, err
+	}
+
+	if err := tx.Commit(); err != nil {
+		return nil, err
+	}
+
+	userSetting := userSettingRaw.toUserSetting()
+
+	return userSetting, nil
+}
+
+func (s *Store) FindUserSettingList(ctx context.Context, find *api.UserSettingFind) ([]*api.UserSetting, error) {
+	tx, err := s.db.BeginTx(ctx, nil)
+	if err != nil {
+		return nil, FormatError(err)
+	}
+	defer tx.Rollback()
+
+	userSettingRawList, err := findUserSettingList(ctx, tx, find)
+	if err != nil {
+		return nil, err
+	}
+
+	list := []*api.UserSetting{}
+	for _, raw := range userSettingRawList {
+		list = append(list, raw.toUserSetting())
+	}
+
+	return list, nil
+}
+
+func upsertUserSetting(ctx context.Context, tx *sql.Tx, upsert *api.UserSettingUpsert) (*userSettingRaw, error) {
+	query := `
+		INSERT INTO user_setting (
+			user_id, key, value
+		)
+		VALUES (?, ?, ?)
+		ON CONFLICT(user_id, key) DO UPDATE 
+		SET
+			value = EXCLUDED.value
+		RETURNING user_id, key, value
+	`
+	var userSettingRaw userSettingRaw
+	if err := tx.QueryRowContext(ctx, query, upsert.UserID, upsert.Key, upsert.Value).Scan(
+		&userSettingRaw.UserID,
+		&userSettingRaw.Key,
+		&userSettingRaw.Value,
+	); err != nil {
+		return nil, FormatError(err)
+	}
+
+	return &userSettingRaw, nil
+}
+
+func findUserSettingList(ctx context.Context, tx *sql.Tx, find *api.UserSettingFind) ([]*userSettingRaw, error) {
+	query := `
+		SELECT
+			user_id,
+		  key,
+			value
+		FROM user_setting
+		WHERE user_id = ?
+	`
+	rows, err := tx.QueryContext(ctx, query, find.UserID)
+	if err != nil {
+		return nil, FormatError(err)
+	}
+	defer rows.Close()
+
+	userSettingRawList := make([]*userSettingRaw, 0)
+	for rows.Next() {
+		var userSettingRaw userSettingRaw
+		if err := rows.Scan(
+			&userSettingRaw.UserID,
+			&userSettingRaw.Key,
+			&userSettingRaw.Value,
+		); err != nil {
+			return nil, FormatError(err)
+		}
+
+		userSettingRawList = append(userSettingRawList, &userSettingRaw)
+	}
+
+	if err := rows.Err(); err != nil {
+		return nil, FormatError(err)
+	}
+
+	return userSettingRawList, nil
+}

web/src/App.tsx

@@ -1,9 +1,13 @@
 import { useEffect, useState } from "react";
+import useI18n from "./hooks/useI18n";
 import { appRouterSwitch } from "./routers";
-import { locationService } from "./services";
+import { globalService, locationService } from "./services";
 import { useAppSelector } from "./store";
+import * as storage from "./helpers/storage";
 
 function App() {
+  const { setLocale } = useI18n();
+  const global = useAppSelector((state) => state.global);
   const pathname = useAppSelector((state) => state.location.pathname);
   const [isLoading, setLoading] = useState(true);
 
@@ -12,9 +16,18 @@ function App() {
     window.onpopstate = () => {
       locationService.updateStateWithLocation();
     };
+    globalService.initialState().then(() => {
       setLoading(false);
+    });
   }, []);
 
+  useEffect(() => {
+    setLocale(global.locale);
+    storage.set({
+      locale: global.locale,
+    });
+  }, [global]);
+
   return <>{isLoading ? null : appRouterSwitch(pathname)}</>;
 }
 

web/src/components/AboutSiteDialog.tsx

@@ -10,8 +10,8 @@ import "../less/about-site-dialog.less";
 interface Props extends DialogProps {}
 
 const AboutSiteDialog: React.FC<Props> = ({ destroy }: Props) => {
+  const { t } = useI18n();
   const [profile, setProfile] = useState<Profile>();
-  const { t, setLocale } = useI18n();
 
   useEffect(() => {
     try {
@@ -27,10 +27,6 @@ const AboutSiteDialog: React.FC<Props> = ({ destroy }: Props) => {
         version: "0.0.0",
       });
     }
-
-    setTimeout(() => {
-      setLocale("zh");
-    }, 2333);
   }, []);
 
   const handleCloseBtnClick = () => {
@@ -42,7 +38,7 @@ const AboutSiteDialog: React.FC<Props> = ({ destroy }: Props) => {
       <div className="dialog-header-container">
         <p className="title-text">
           <span className="icon-text">🤠</span>
-          {t("about")} <b>Memos</b>
+          {t("common.about")} <b>Memos</b>
         </p>
         <button className="btn close-btn" onClick={handleCloseBtnClick}>
           <Icon.X />

web/src/components/Settings/PreferencesSection.tsx

@@ -1,11 +1,27 @@
-import { memoService } from "../../services";
+import { globalService, memoService, userService } from "../../services";
 import * as utils from "../../helpers/utils";
+import { useAppSelector } from "../../store";
+import Only from "../common/OnlyWhen";
 import toastHelper from "../Toast";
+import Selector from "../common/Selector";
 import "../../less/settings/preferences-section.less";
 
 interface Props {}
 
+const localeSelectorItems = [
+  {
+    text: "English",
+    value: "en",
+  },
+  {
+    text: "中文",
+    value: "zh",
+  },
+];
+
 const PreferencesSection: React.FC<Props> = () => {
+  const { setting } = useAppSelector((state) => state.user.user as User);
+
   const handleExportBtnClick = async () => {
     const formatedMemos = memoService.getState().memos.map((m) => {
       return {
@@ -64,8 +80,19 @@ const PreferencesSection: React.FC<Props> = () => {
     fileInputEl.click();
   };
 
+  const handleLocaleChanged = async (value: string) => {
+    globalService.setLocale(value as Locale);
+    await userService.upsertUserSetting("locale", value);
+  };
+
   return (
     <div className="section-container preferences-section-container">
+      {/* Hide export/import buttons */}
+      <label className="form-label">
+        <span className="normal-text">Language:</span>
+        <Selector className="ml-2 w-28" value={setting.locale} dataSource={localeSelectorItems} handleValueChanged={handleLocaleChanged} />
+      </label>
+      <Only when={false}>
         <p className="title-text">Others</p>
         <div className="btns-container">
           <button className="btn" onClick={handleExportBtnClick}>
@@ -75,6 +102,7 @@ const PreferencesSection: React.FC<Props> = () => {
             Import from JSON
           </button>
         </div>
+      </Only>
     </div>
   );
 };

web/src/components/common/Selector.tsx

@@ -3,7 +3,7 @@ import useToggle from "../../hooks/useToggle";
 import Icon from "../Icon";
 import "../../less/common/selector.less";
 
-interface TVObject {
+interface SelectorItem {
   text: string;
   value: string;
 }
@@ -11,7 +11,7 @@ interface TVObject {
 interface Props {
   className?: string;
   value: string;
-  dataSource: TVObject[];
+  dataSource: SelectorItem[];
   handleValueChanged?: (value: string) => void;
 }
 
@@ -48,7 +48,7 @@ const Selector: React.FC<Props> = (props: Props) => {
     }
   }, [showSelector]);
 
-  const handleItemClick = (item: TVObject) => {
+  const handleItemClick = (item: SelectorItem) => {
     if (handleValueChanged) {
       handleValueChanged(item.value);
     }

web/src/helpers/api.ts

@@ -46,6 +46,10 @@ export function getUserById(id: number) {
   return axios.get<ResponseObject<User>>(`/api/user/${id}`);
 }
 
+export function upsertUserSetting(upsert: UserSettingUpsert) {
+  return axios.post<ResponseObject<UserSetting>>(`/api/user/setting`, upsert);
+}
+
 export function patchUser(userPatch: UserPatch) {
   return axios.patch<ResponseObject<User>>(`/api/user/${userPatch.id}`, userPatch);
 }

web/src/helpers/storage.ts

@@ -4,9 +4,8 @@
 interface StorageData {
   // Editor content cache
   editorContentCache: string;
-  shouldSplitMemoWord: boolean;
+  // locale
-  shouldHideImageUrl: boolean;
+  locale: Locale;
-  shouldUseMarkdownParser: boolean;
 }
 
 type StorageKey = keyof StorageData;

web/src/labs/i18n/useI18n.ts

@@ -24,10 +24,19 @@ const useI18n = () => {
   }, []);
 
   const translate = (key: string) => {
-    try {
+    const keys = key.split(".");
-      const value = resources[locale][key] as string;
+    let value = resources[locale];
+    for (const k of keys) {
+      if (value) {
+        value = value[k];
+      } else {
+        return key;
+      }
+    }
+
+    if (value) {
       return value;
-    } catch (error) {
+    } else {
       return key;
     }
   };

web/src/locales/en.json

@@ -1,3 +1,8 @@
 {
-  "about": "About"
+  "common": {
+    "about": "About",
+    "email": "Email",
+    "password": "Password",
+    "sign-in": "Sign in"
+  }
 }

web/src/locales/zh.json

@@ -1,3 +1,8 @@
 {
-  "about": "关于"
+  "common": {
+    "about": "关于",
+    "email": "邮箱",
+    "password": "密码",
+    "sign-in": "登录"
+  }
 }

web/src/pages/Signin.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import * as api from "../helpers/api";
 import { validate, ValidatorConfig } from "../helpers/validator";
+import useI18n from "../hooks/useI18n";
 import useLoading from "../hooks/useLoading";
 import { locationService, userService } from "../services";
 import toastHelper from "../components/Toast";
@@ -17,6 +18,7 @@ const validateConfig: ValidatorConfig = {
 };
 
 const Signin: React.FC<Props> = () => {
+  const { t } = useI18n();
   const pageLoadingState = useLoading(true);
   const [siteHost, setSiteHost] = useState<User>();
   const [email, setEmail] = useState("");
@@ -127,11 +129,11 @@ const Signin: React.FC<Props> = () => {
         </div>
         <div className={`page-content-container ${actionBtnLoadingState.isLoading ? "requesting" : ""}`}>
           <div className="form-item-container input-form-container">
-            <span className={`normal-text ${email ? "not-null" : ""}`}>Email</span>
+            <span className={`normal-text ${email ? "not-null" : ""}`}>{t("common.email")}</span>
             <input type="email" value={email} onChange={handleEmailInputChanged} />
           </div>
           <div className="form-item-container input-form-container">
-            <span className={`normal-text ${password ? "not-null" : ""}`}>Password</span>
+            <span className={`normal-text ${password ? "not-null" : ""}`}>{t("common.password")}</span>
             <input type="password" value={password} onChange={handlePasswordInputChanged} />
           </div>
         </div>
@@ -141,7 +143,7 @@ const Signin: React.FC<Props> = () => {
               className={`btn signin-btn ${actionBtnLoadingState.isLoading ? "requesting" : ""}`}
               onClick={() => handleSigninBtnsClick()}
             >
-              Sign in
+              {t("common.sign-in")}
             </button>
           ) : (
             <button

web/src/services/globalService.ts

@@ -0,0 +1,41 @@
+import store from "../store";
+import * as api from "../helpers/api";
+import * as storage from "../helpers/storage";
+import { setGlobalState, setLocale } from "../store/modules/global";
+import { convertResponseModelUser } from "./userService";
+
+const globalService = {
+  getState: () => {
+    return store.getState().global;
+  },
+
+  initialState: async () => {
+    const defaultGlobalState = {
+      locale: "en" as Locale,
+    };
+
+    const { locale: storageLocale } = storage.get(["locale"]);
+    if (storageLocale) {
+      defaultGlobalState.locale = storageLocale;
+    }
+    try {
+      const { data } = (await api.getMyselfUser()).data;
+      if (data) {
+        const user = convertResponseModelUser(data);
+        if (user.setting.locale) {
+          defaultGlobalState.locale = user.setting.locale;
+        }
+      }
+    } catch (error) {
+      // do nth
+    }
+
+    store.dispatch(setGlobalState(defaultGlobalState));
+  },
+
+  setLocale: (locale: Locale) => {
+    store.dispatch(setLocale(locale));
+  },
+};
+
+export default globalService;

web/src/services/index.ts

@@ -1,3 +1,4 @@
+import globalService from "./globalService";
 import editorStateService from "./editorStateService";
 import locationService from "./locationService";
 import memoService from "./memoService";
@@ -5,4 +6,4 @@ import shortcutService from "./shortcutService";
 import userService from "./userService";
 import resourceService from "./resourceService";
 
-export { editorStateService, locationService, memoService, shortcutService, userService, resourceService };
+export { globalService, editorStateService, locationService, memoService, shortcutService, userService, resourceService };

web/src/services/userService.ts

@@ -4,9 +4,24 @@ import * as api from "../helpers/api";
 import store from "../store";
 import { setUser, patchUser, setHost, setOwner } from "../store/modules/user";
 
-const convertResponseModelUser = (user: User): User => {
+const defauleSetting: Setting = {
+  locale: "en",
+};
+
+export const convertResponseModelUser = (user: User): User => {
+  const setting: Setting = {
+    ...defauleSetting,
+  };
+
+  if (user.userSettingList) {
+    for (const userSetting of user.userSettingList) {
+      setting[userSetting.key] = JSON.parse(userSetting.value);
+    }
+  }
+
   return {
     ...user,
+    setting,
     createdTs: user.createdTs * 1000,
     updatedTs: user.updatedTs * 1000,
   };
@@ -76,6 +91,14 @@ const userService = {
     }
   },
 
+  upsertUserSetting: async (key: string, value: any) => {
+    await api.upsertUserSetting({
+      key: key as any,
+      value: JSON.stringify(value),
+    });
+    await userService.doSignIn();
+  },
+
   patchUser: async (userPatch: UserPatch): Promise<void> => {
     const { data } = (await api.patchUser(userPatch)).data;
     if (userPatch.id === store.getState().user.user?.id) {

web/src/store/index.ts

@@ -1,5 +1,6 @@
 import { configureStore } from "@reduxjs/toolkit";
 import { TypedUseSelectorHook, useSelector } from "react-redux";
+import globalReducer from "./modules/global";
 import userReducer from "./modules/user";
 import memoReducer from "./modules/memo";
 import editorReducer from "./modules/editor";
@@ -8,6 +9,7 @@ import locationReducer from "./modules/location";
 
 const store = configureStore({
   reducer: {
+    global: globalReducer,
     user: userReducer,
     memo: memoReducer,
     editor: editorReducer,

web/src/store/modules/global.ts

@@ -0,0 +1,25 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+interface State {
+  locale: Locale;
+}
+
+const globalSlice = createSlice({
+  name: "global",
+  initialState: {} as State,
+  reducers: {
+    setGlobalState: (_, action: PayloadAction<State>) => {
+      return action.payload;
+    },
+    setLocale: (state, action: PayloadAction<Locale>) => {
+      return {
+        ...state,
+        locale: action.payload,
+      };
+    },
+  },
+});
+
+export const { setGlobalState, setLocale } = globalSlice.actions;
+
+export default globalSlice.reducer;

web/src/types/i18n.d.ts

@@ -0,0 +1 @@
+type Locale = "en" | "zh";

web/src/types/modules/setting.d.ts

@@ -0,0 +1,15 @@
+interface Setting {
+  locale: "en" | "zh";
+}
+
+interface UserLocaleSetting {
+  key: "locale";
+  value: "en" | "zh";
+}
+
+type UserSetting = UserLocaleSetting;
+
+interface UserSettingUpsert {
+  key: keyof Setting;
+  value: string;
+}

web/src/types/modules/user.d.ts

@@ -12,6 +12,9 @@ interface User {
   email: string;
   name: string;
   openId: string;
+  userSettingList: UserSetting[];
+
+  setting: Setting;
 }
 
 interface UserCreate {