update settings

src/App.tsx

@@ -2,6 +2,8 @@ import { ConfigProvider, Layout, theme } from "antd";
 import DashboardLayout from "./core/components/DashboardLayout";
 import {
   darkMode,
+  primaryColor,
+  setPrimaryColor,
   setUserAuthenticated,
   userAuthenticated,
 } from "./core/reducers/appSlice";
@@ -19,6 +21,7 @@ function App() {
 
   const isDarkMode = useSelector(darkMode);
   const uAuthenticated = useSelector(userAuthenticated);
+  const primColor = useSelector(primaryColor);
 
   console.info(
     "\n %c LMS %c v1.0.0 %c \n",
@@ -36,12 +39,13 @@ function App() {
     (async () => {
       try {
         const response = await myFetch({
-          url: "/user",
+          url: "/app",
           method: "GET",
         });
 
         if (response) {
-          dispatch(setUserAuthenticated(true))
+          dispatch(setUserAuthenticated(true));
+          dispatch(setPrimaryColor(`#${response.Organization.PrimaryColor}`));
         }
       } catch (error) {}
     })();
@@ -58,6 +62,9 @@ function App() {
       <ConfigProvider
         theme={{
           algorithm: isDarkMode ? darkAlgorithm : defaultAlgorithm,
+          token: {
+            colorPrimary: primColor,
+          },
         }}
       >
         {uAuthenticated == null ? (

src/core/reducers/appSlice.tsx

@@ -5,6 +5,7 @@ export const appSlice = createSlice({
   initialState: {
     darkMode: false,
     userAuthenticated: null,
+    primaryColor: "#1677FF",
   },
   reducers: {
     setDarkMode: (state, action) => {
@@ -12,14 +13,19 @@ export const appSlice = createSlice({
     },
     setUserAuthenticated: (state, action) => {
       state.userAuthenticated = action.payload;
-    }
+    },
+    setPrimaryColor: (state, action) => {
+      state.primaryColor = action.payload;
+    },
   },
   selectors: {
     darkMode: (state) => state.darkMode,
     userAuthenticated: (state) => state.userAuthenticated,
+    primaryColor: (state) => state.primaryColor,
   },
-})
+});
 
-export const { setDarkMode, setUserAuthenticated } = appSlice.actions;
+export const { setDarkMode, setUserAuthenticated, setPrimaryColor } =
+  appSlice.actions;
 
-export const { darkMode, userAuthenticated } = appSlice.selectors;
+export const { darkMode, userAuthenticated, primaryColor } = appSlice.selectors;

src/core/services/organization.ts

@@ -1,24 +1,35 @@
-import { createApi } from '@reduxjs/toolkit/query/react';
+import { createApi } from "@reduxjs/toolkit/query/react";
-import { baseQueryWithErrorHandling } from 'core/helper/api';
+import { baseQueryWithErrorHandling } from "core/helper/api";
-import { TeamMember, OrganizationSettings } from 'core/types/organization';
+import { TeamMember, OrganizationSettings } from "core/types/organization";
 
 export const organizationApi = createApi({
-    reducerPath: 'organizationApi',
+  reducerPath: "organizationApi",
   baseQuery: baseQueryWithErrorHandling,
   endpoints: (builder) => ({
     getTeam: builder.query<TeamMember[], undefined>({
       query: () => ({
-                url: 'organization/team/members',
+        url: "organization/team/members",
-                method: 'GET',
+        method: "GET",
       }),
     }),
     getOrganizationSettings: builder.query<OrganizationSettings, undefined>({
       query: () => ({
-                url: 'organization/settings',
+        url: "organization/settings",
-                method: 'GET',
+        method: "GET",
+      }),
+    }),
+    updateOrganizationSettings: builder.mutation({
+      query: ({ primaryColor, companyName }) => ({
+        url: "organization/settings",
+        method: "PATCH",
+        body: { PrimaryColor: primaryColor, CompanyName: companyName },
       }),
     }),
   }),
 });
 
-export const { useGetTeamQuery, useGetOrganizationSettingsQuery } = organizationApi;
+export const {
+  useGetTeamQuery,
+  useGetOrganizationSettingsQuery,
+  useUpdateOrganizationSettingsMutation,
+} = organizationApi;

src/features/Settings/index.tsx

@@ -1,4 +1,4 @@
-import { Button, Card, Divider, Flex, Form, Input, Typography } from "antd";
+import { Button, Card, Flex, Form, Input } from "antd";
 import HeaderBar from "../../core/components/Header";
 import MyBanner from "../../shared/components/MyBanner";
 import { MyContainer } from "../../shared/components/MyContainer";
@@ -6,14 +6,19 @@ import { SaveOutlined } from "@ant-design/icons";
 import MyUpload from "shared/components/MyUpload";
 import { Constants } from "core/utils/utils";
 import ColorPicker from "antd/es/color-picker";
-import { useGetOrganizationSettingsQuery } from "core/services/organization";
+import {
+  useGetOrganizationSettingsQuery,
+  useUpdateOrganizationSettingsMutation,
+} from "core/services/organization";
 import MyErrorResult from "shared/components/MyResult";
 import { useForm } from "antd/es/form/Form";
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 import { AggregationColor } from "antd/es/color-picker/color";
+import { useDispatch } from "react-redux";
+import { setPrimaryColor } from "core/reducers/appSlice";
 
 type FieldType = {
-  primaryColor: string;
+  primaryColor: string | AggregationColor;
   companyName: string;
   subdomain: string;
 };
@@ -27,9 +32,29 @@ export default function Settings() {
   );
 
   const [form] = useForm<FieldType>();
+  const dispatch = useDispatch();
+  const debounceRef = useRef<null | NodeJS.Timeout>(null);
+  const currentPrimaryColor = useRef<string>();
+
+  const [updateOrganizationSettings, { isLoading: isUpdateSettingsLoading }] =
+    useUpdateOrganizationSettingsMutation();
 
   const handleSave = (values: FieldType) => {
-    console.log(values);
+    const hexColor =
+      typeof values.primaryColor === "string"
+        ? values.primaryColor
+        : values.primaryColor.toHexString().split("#")[1];
+
+    try {
+      updateOrganizationSettings({
+        primaryColor: hexColor,
+        companyName: values.companyName,
+      });
+
+      currentPrimaryColor.current = hexColor;
+    } catch (error) {
+      console.error(error);
+    }
   };
 
   useEffect(() => {
@@ -39,9 +64,21 @@ export default function Settings() {
         companyName: data.CompanyName,
         subdomain: data.Subdomain,
       });
+
+      currentPrimaryColor.current = data.PrimaryColor;
     }
   }, [data]);
 
+  useEffect(() => {
+    return () => {
+      dispatch(setPrimaryColor(currentPrimaryColor.current));
+
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current);
+      }
+    };
+  }, []);
+
   if (error) return <MyErrorResult />;
 
   return (
@@ -49,8 +86,7 @@ export default function Settings() {
       <MyBanner title="Settings" subtitle="MANAGE" headerBar={<HeaderBar />} />
 
       <MyContainer>
-        <Flex vertical gap={16} style={{ paddingBottom: 16 }}>
+        <Form form={form} onFinish={handleSave} layout="vertical">
-          <Form form={form} onFinish={handleSave}>
           <Card
             loading={isLoading}
             styles={{
@@ -66,48 +102,37 @@ export default function Settings() {
                 shape="circle"
                 size="large"
                 htmlType="submit"
+                loading={isUpdateSettingsLoading}
               />
             }
           >
-              <Flex vertical gap={2}>
+            <Flex wrap gap={12}>
-                <Flex gap={32}>
+              <Form.Item<FieldType> name="primaryColor" label="Primary color">
-                  <Flex vertical>
-                    <Typography.Text style={{ fontSize: 16 }}>
-                      Primary Color
-                    </Typography.Text>
-                    <Form.Item name="primaryColor">
                 <ColorPicker
-                        defaultValue="#1677ff"
                   size="small"
                   showText
-                        format="hex"
+                  onChange={(color: AggregationColor) => {
+                    if (debounceRef.current) {
+                      clearTimeout(debounceRef.current);
+                    }
+
+                    debounceRef.current = setTimeout(() => {
+                      dispatch(setPrimaryColor(color.toHexString()));
+                    }, 600);
+                  }}
                 />
               </Form.Item>
-                  </Flex>
+              <Form.Item<FieldType> name="companyName" label="Company name">
-                  <Flex vertical>
-                    <Typography.Text style={{ fontSize: 16 }}>
-                      Company name
-                    </Typography.Text>
-                    <Form.Item name="companyName">
                 <Input defaultValue="Jannex" />
               </Form.Item>
-                  </Flex>
+              <Form.Item<FieldType> name="subdomain" label="Subdomain">
-                  <Flex vertical>
-                    <Typography.Text style={{ fontSize: 16 }}>
-                      Subdomain
-                    </Typography.Text>
-                    <Form.Item name="subdomain">
                 <Input
                   addonBefore="https://"
                   addonAfter=". jannex.de"
                   defaultValue="mysite"
                 />
               </Form.Item>
-                  </Flex>
+              <Form.Item label="Logo">
-                  <Flex vertical>
-                    <Typography.Text style={{ fontSize: 16 }}>
-                      Logo
-                    </Typography.Text>
                 <MyUpload
                   action={`/changeCompanyLogo`}
                   onChange={(info) => {
@@ -133,12 +158,10 @@ export default function Settings() {
                     }}
                   />
                 </MyUpload>
+              </Form.Item>
             </Flex>
-                </Flex>
+
-                <Flex vertical>
+            <Form.Item label="Thumbnail">
-                  <Typography.Text style={{ fontSize: 16 }}>
-                    Thumbnail
-                  </Typography.Text>
               <MyUpload
                 action={`/changeCompanyLogo`}
                 onChange={(info) => {
@@ -165,11 +188,9 @@ export default function Settings() {
                   }}
                 />
               </MyUpload>
-                </Flex>
+            </Form.Item>
-              </Flex>
           </Card>
         </Form>
-        </Flex>
       </MyContainer>
     </>
   );