feat(state_updater): add settings methods to state updater

src/client/web/src/client/settings_mock.ts

@@ -0,0 +1,60 @@
+// TODO: replace this with jest mocks
+import { Response, Quota } from ".";
+
+import { ClientConfig } from "./";
+
+export interface SettingsClientResps {
+  healthMockResp?: Response;
+  setClientCfgMockResp?: Response;
+  getClientCfgMockResp?: Response<ClientConfig>;
+}
+
+export const resps = {
+  healthMockResp: { status: 200, statusText: "", data: {} },
+  setClientCfgMockResp: { status: 200, statusText: "", data: {} },
+  getClientCfgMockResp: {
+    status: 200,
+    statusText: "",
+    data: {
+      siteName: "",
+      siteDesc: "",
+      bg: {
+        url: "",
+        repeat: "",
+        position: "",
+        align: "",
+      },
+    },
+  },
+};
+export class MockSettingsClient {
+  private url: string;
+  private resps: SettingsClientResps;
+
+  constructor(url: string) {
+    this.url = url;
+    this.resps = resps;
+  }
+
+  setMock = (resps: SettingsClientResps) => {
+    this.resps = resps;
+  };
+
+  wrapPromise = (resp: any): Promise<any> => {
+    return new Promise<any>((resolve) => {
+      resolve(resp);
+    });
+  };
+
+  health = (): Promise<Response> => {
+    return this.wrapPromise(this.resps.healthMockResp);
+  };
+
+  setClientCfg = (): Promise<Response> => {
+    return this.wrapPromise(this.resps.setClientCfgMockResp);
+  };
+
+  getClientCfg = (): Promise<Response> => {
+    return this.wrapPromise(this.resps.getClientCfgMockResp);
+  };
+}

src/client/web/src/components/__test__/browser.test.tsx

@@ -8,7 +8,7 @@ import { updater } from "../state_updater";
 import { MockWorker } from "../../worker/interface";
 import { MockUsersClient, resps as usersResps } from "../../client/users_mock";
 import { MockFilesClient, resps as filesResps } from "../../client/files_mock";
-import { mockFileList } from "../../test/helpers";
+import { MockSettingsClient } from "../../client/settings_mock";
 
 describe("Browser", () => {
   const initBrowser = (): any => {
@@ -19,9 +19,10 @@ describe("Browser", () => {
     const coreState = newState();
     const usersCl = new MockUsersClient("");
     const filesCl = new MockFilesClient("");
+    const settingsCl = new MockSettingsClient("");
 
     updater().init(coreState);
-    updater().setClients(usersCl, filesCl);
+    updater().setClients(usersCl, filesCl, settingsCl);
 
     const browser = new Browser({
       browser: coreState.browser,

src/client/web/src/components/__test__/pane_login.test.tsx

@@ -9,6 +9,7 @@ import { updater } from "../state_updater";
 import { MockWorker, UploadState, UploadEntry } from "../../worker/interface";
 import { MockUsersClient, resps as usersResps } from "../../client/users_mock";
 import { MockFilesClient, resps as filesResps } from "../../client/files_mock";
+import { MockSettingsClient } from "../../client/settings_mock";
 
 describe("Login", () => {
   test("login", async () => {
@@ -20,13 +21,14 @@ describe("Login", () => {
     const pane = new AuthPane({
       login: coreState.login,
       msg: coreState.msg,
-      update: (updater: (prevState: ICoreState) => ICoreState) => { },
+      update: (updater: (prevState: ICoreState) => ICoreState) => {},
     });
 
     const usersCl = new MockUsersClient("");
     const filesCl = new MockFilesClient("");
+    const settingsCl = new MockSettingsClient("");
     updater().init(coreState);
-    updater().setClients(usersCl, filesCl);
+    updater().setClients(usersCl, filesCl, settingsCl);
 
     await pane.login();
 

src/client/web/src/components/core_state.ts

@@ -16,6 +16,8 @@ export interface MsgProps {
 
 export interface UIProps {
   isVertical: boolean;
+  siteName: string;
+  siteDesc: string;
   bg: {
     url: string;
     repeat: string;
@@ -77,6 +79,8 @@ export function initState(): ICoreState {
     },
     ui: {
       isVertical: isVertical(),
+      siteName: "",
+      siteDesc: "",
       bg: {
         url: "",
         repeat: "",

src/client/web/src/components/state_mgr.tsx

@@ -9,7 +9,8 @@ import { ICoreState, newState } from "./core_state";
 import { RootFrame } from "./root_frame";
 import { FilesClient } from "../client/files";
 import { UsersClient } from "../client/users";
-import { IUsersClient, IFilesClient } from "../client";
+import { SettingsClient } from "../client/settings";
+import { IUsersClient, IFilesClient, ISettingsClient } from "../client";
 
 export interface Props {}
 export interface State extends ICoreState {}
@@ -17,6 +18,7 @@ export interface State extends ICoreState {}
 export class StateMgr extends React.Component<Props, State, {}> {
   private usersClient: IUsersClient = new UsersClient("");
   private filesClient: IFilesClient = new FilesClient("");
+  private settingsClient: ISettingsClient = new SettingsClient("");
 
   constructor(p: Props) {
     super(p);
@@ -34,13 +36,25 @@ export class StateMgr extends React.Component<Props, State, {}> {
     this.filesClient = client;
   };
 
+  setSettingsClient = (client: ISettingsClient) => {
+    this.settingsClient = client;
+  };
+
   initUpdater = async (state: ICoreState): Promise<void> => {
     updater().init(state);
-    if (this.usersClient == null || this.filesClient == null) {
+    if (
+      this.usersClient == null ||
+      this.filesClient == null ||
+      this.settingsClient == null
+    ) {
       console.error("updater's clients are not inited");
       return;
     }
-    updater().setClients(this.usersClient, this.filesClient);
+    updater().setClients(
+      this.usersClient,
+      this.filesClient,
+      this.settingsClient
+    );
 
     const params = new URLSearchParams(document.location.search.substring(1));
     return updater()

src/client/web/src/components/state_updater.ts

@@ -8,6 +8,7 @@ import {
   ListRolesResp,
   IUsersClient,
   IFilesClient,
+  ISettingsClient,
   MetadataResp,
   UploadInfo,
   Quota,
@@ -15,9 +16,11 @@ import {
   roleVisitor,
   roleAdmin,
   visitorID,
+  ClientConfig,
 } from "../client";
 import { FilesClient } from "../client/files";
 import { UsersClient } from "../client/users";
+import { SettingsClient } from "../client/settings";
 import { UploadEntry, UploadState } from "../worker/interface";
 import { Up } from "../worker/upload_mgr";
 import { alertMsg } from "../common/env";
@@ -33,11 +36,17 @@ export class Updater {
   props: ICoreState;
   private usersClient: IUsersClient = new UsersClient("");
   private filesClient: IFilesClient = new FilesClient("");
+  private settingsClient: ISettingsClient = new SettingsClient("");
 
   init = (props: ICoreState) => (this.props = { ...props });
-  setClients(usersClient: IUsersClient, filesClient: IFilesClient) {
+  setClients(
+    usersClient: IUsersClient,
+    filesClient: IFilesClient,
+    settingsClient: ISettingsClient
+  ) {
     this.usersClient = usersClient;
     this.filesClient = filesClient;
+    this.settingsClient = settingsClient;
   }
 
   initUploads = () => {
@@ -116,8 +125,7 @@ export class Updater {
     let localUploads = Map<string, UploadEntry>([]);
     this.props.browser.uploadings.forEach((entry: UploadEntry) => {
       localUploads = localUploads.set(entry.filePath, entry);
-    })
-
+    });
 
     let updatedUploads = List<UploadEntry>([]);
     luResp.data.uploadInfos.forEach((remoteInfo: UploadInfo) => {
@@ -352,7 +360,7 @@ export class Updater {
           return Promise.all([this.listRoles(), this.listUsers()]);
         }
         return;
-      })
+      });
   };
 
   resetUser = () => {
@@ -365,7 +373,7 @@ export class Updater {
       downloadSpeedLimit: 0,
       spaceLimit: "0",
     };
-  }
+  };
 
   self = async (): Promise<boolean> => {
     const resp = await this.usersClient.self();
@@ -377,7 +385,7 @@ export class Updater {
       this.props.login.quota = resp.data.quota;
       return true;
     }
-    this.resetUser()
+    this.resetUser();
     return false;
   };
 
@@ -553,6 +561,23 @@ export class Updater {
     return resp.status === 200;
   };
 
+  setClientCfg = async (cfg: ClientConfig): Promise<number> => {
+    const resp = await this.settingsClient.setClientCfg(cfg);
+    return resp.status;
+  };
+
+  getClientCfg = async (): Promise<number> => {
+    const resp = await this.settingsClient.getClientCfg();
+    if (resp.status === 200) {
+      const clientCfg = resp.data.clientCfg as ClientConfig;
+      this.props.ui.siteName = clientCfg.siteName;
+      this.props.ui.siteDesc = clientCfg.siteDesc;
+      this.props.ui.bg = clientCfg.bg;
+    }
+
+    return resp.status;
+  };
+
   updateBrowser = (prevState: ICoreState): ICoreState => {
     return {
       ...prevState,