refactor: more TS code

src/app/services/channel.ts

@@ -50,12 +50,11 @@ export const channelApi = createApi({
       }),
       async onQueryStarted({ id, name, description }, { dispatch, queryFulfilled }) {
         // id: who send to ,from_uid: who sent
-        const patchResult = dispatch(updateChannel({ gid: id, name, description }));
+        dispatch(updateChannel({ gid: id, name, description }));
         try {
           await queryFulfilled;
         } catch {
           console.log("channel update failed");
-          patchResult.undo();
         }
       }
     }),

src/app/slices/auth.data.ts

@@ -7,7 +7,8 @@ import {
   KEY_TOKEN,
   KEY_UID
 } from "../config";
-import { AuthData, AuthToken, RenewTokenResponse, User } from "../../types/auth";
+import { AuthData, RenewTokenResponse } from "../../types/auth";
+import { User } from "../../types/user";
 
 interface State {
   initialized: boolean;

src/app/slices/message.channel.ts

@@ -37,7 +37,10 @@ const channelMsgSlice = createSlice({
         }
       }
     },
-    replaceChannelMsg(state, action) {
+    replaceChannelMsg(
+      state,
+      action: PayloadAction<{ id: number; localMid: number; serverMid: number }>
+    ) {
       const { id, localMid, serverMid } = action.payload;
       if (state[id]) {
         const localIdx = state[id]!.findIndex((i) => i == localMid);

src/app/slices/message.reaction.ts

@@ -4,7 +4,7 @@ import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 export interface State {
   [mid: number]:
     | {
-        [reaction: number]: number[];
+        [reaction: string]: number[];
       }
     | undefined;
 }
@@ -26,7 +26,10 @@ const reactionMessageSlice = createSlice({
         delete state[id];
       });
     },
-    toggleReactionMessage(state, action) {
+    toggleReactionMessage(
+      state,
+      action: PayloadAction<{ from_uid: number; mid: number; rid: number; action: string }>
+    ) {
       // rid: reaction's mid, mid: which message append to
       const { from_uid, mid, rid, action: reaction } = action.payload;
       const ridExisted = state[rid] || false;
@@ -52,8 +55,6 @@ const reactionMessageSlice = createSlice({
       } else {
         state[mid]![reaction] = [from_uid];
       }
-      // todo: ???
-      state[rid] = true;
     }
   }
 });

src/app/slices/message.ts

@@ -1,9 +1,12 @@
-import { createSlice } from "@reduxjs/toolkit";
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 import BASE_URL, { ContentTypes } from "../config";
 import { isImage } from "../../common/utils";
 
 export interface State {
-  replying: {};
+  [key: number]: object;
+  replying: {
+    [key: string | number]: number;
+  };
 }
 
 const initialState: State = {
@@ -20,19 +23,34 @@ const messageSlice = createSlice({
     fillMessage(state, action) {
       return Object.assign({ ...initialState }, action.payload);
     },
-    updateMessage(state, action) {
+    updateMessage(state, action: PayloadAction<{ mid: number; [key: string | number]: any }>) {
       const { mid, ...rest } = action.payload;
       state[mid] = { ...state[mid], ...rest };
     },
-    addMessage(state, action) {
+    addMessage(
+      state,
+      action: PayloadAction<{
+        mid: number;
+        sending: boolean;
+        content_type: string;
+        content: string;
+        properties?: {
+          content_type: string;
+          size: number;
+        };
+        file_path?: string;
+        download?: string;
+        thumbnail?: string;
+      }>
+    ) {
       const data = action.payload;
-      const { mid, sending, content_type, content, properties = {} } = data;
+      const { mid, sending, content_type, content, properties } = data;
       // 如果是正发送，并且已存在，则不覆盖
       if (sending && state[mid]) return;
       const isFile = content_type == ContentTypes.file;
       // image
-      const props = properties ?? {};
-      const isPic = isImage(props.content_type, props.size);
+      const props = properties;
+      const isPic = isImage(props?.content_type, props?.size);
       if (isFile) {
         if (!sending) {
           data.file_path = content;
@@ -53,18 +71,18 @@ const messageSlice = createSlice({
       }
       state[mid] = data;
     },
-    removeMessage(state, action) {
+    removeMessage(state, action: PayloadAction<number | number[]>) {
       const mids = Array.isArray(action.payload) ? action.payload : [action.payload];
-      mids.forEach((id) => {
+      mids.forEach((id: number) => {
         delete state[id];
       });
     },
-    addReplyingMessage(state, action) {
+    addReplyingMessage(state, action: PayloadAction<{ key: string | number; mid: number }>) {
       const { key, mid } = action.payload;
       console.log("to ", key, mid);
       state.replying[key] = mid;
     },
-    removeReplyingMessage(state, action) {
+    removeReplyingMessage(state, action: PayloadAction<string | number>) {
       const key = action.payload;
       if (state.replying[key]) {
         delete state.replying[key];
@@ -76,7 +94,6 @@ const messageSlice = createSlice({
 export const {
   resetMessage,
   fillMessage,
-  setMessage,
   updateMessage,
   addMessage,
   removeMessage,

src/common/component/Message/ReactionPicker.tsx

@@ -36,7 +36,6 @@ const StyledPicker = styled.div`
 `;
 
 export default function ReactionPicker({ mid, hidePicker }) {
-  // const wrapperRef = useRef(null);
   const [reactMessage, { isLoading }] = useReactMessageMutation();
   const { reactionData, currUid } = useAppSelector((store) => {
     return {
@@ -44,8 +43,7 @@ export default function ReactionPicker({ mid, hidePicker }) {
       currUid: store.authData.user?.uid
     };
   });
-  // useOutsideClick(wrapperRef, hidePicker);
-  const handleReact = (emoji) => {
+  const handleReact = (emoji: string) => {
     console.log("react", emoji);
     reactMessage({ mid, action: emoji });
     hidePicker();

src/common/component/StyledSettingContainer.tsx

@@ -100,7 +100,7 @@ interface Props {
   closeModal: () => void;
   title?: string;
   navs: Nav[];
-  dangers: Danger[];
+  dangers: [Danger | boolean];
   nav: { title: string; name?: string; component?: ReactNode };
   children: ReactNode;
 }

src/common/hook/useUploadFile.ts

@@ -11,7 +11,7 @@ interface IProps {
   id: number;
 }
 const useUploadFile = (props: IProps) => {
-  const { context, id } = props;
+  const { context, id } = props ? props : { context: "channel", id: 0 };
   const dispatch = useAppDispatch();
   const { stageFiles, replying } = useAppSelector((store) => {
     return {

src/routes/invite/index.tsx

@@ -36,7 +36,7 @@ const InvitePage: FC = () => {
 
   useEffect(() => {
     if (checkSuccess) {
-      setValid(isValid);
+      setValid(!!isValid);
     } else {
       setValid(false);
     }

src/routes/login/index.tsx

@@ -80,6 +80,9 @@ export default function LoginPage() {
             "No associated account found, please user admin for an invitation link to join."
           );
           break;
+        case 451:
+          toast.error("License error: Domain incorrect!");
+          break;
         default:
           toast.error("Something Error");
           break;

src/routes/setting/index.tsx

@@ -4,20 +4,19 @@ import StyledSettingContainer from "../../common/component/StyledSettingContaine
 import useNavs from "./navs";
 import LogoutConfirmModal from "./LogoutConfirmModal";
 
-let from: string = "";
+let pageFrom: string = "";
 
 export default function Setting() {
   const [searchParams] = useSearchParams();
   const navs = useNavs();
   const flattenNaves = navs.map(({ items }) => items).flat();
   const navKey = searchParams.get("nav");
-  from = from ?? (searchParams.get("f") || "/");
   const [logoutConfirm, setLogoutConfirm] = useState(false);
   const navigateTo = useNavigate();
+  pageFrom = pageFrom ? pageFrom : searchParams.get("f") || "/";
   const close = () => {
-    // todo: check usage
-    navigateTo(from!);
-    from = "";
+    navigateTo(pageFrom);
+    pageFrom = "";
   };
 
   const toggleLogoutConfirm = () => {

src/routes/settingChannel/index.tsx

@@ -25,7 +25,7 @@ export default function ChannelSetting() {
     })
     .flat();
   const navKey = searchParams.get("nav");
-  from = from ?? (searchParams.get("f") || "/");
+  from = from ? from : searchParams.get("f") || "/";
   const [deleteConfirm, setDeleteConfirm] = useState(false);
   const [leaveConfirm, setLeaveConfirm] = useState(false);
   const close = () => {
@@ -40,7 +40,7 @@ export default function ChannelSetting() {
   };
   if (!cid) return null;
   const currNav = flattenNavs.find((n) => n.name == navKey) || flattenNavs[0];
-  const canDelete = loginUser.isAdmin || channel?.owner == loginUser.uid;
+  const canDelete = loginUser?.is_admin || channel?.owner == loginUser?.uid;
   const canLeave = !channel?.is_public;
 
   return (