Code improvements suggested by Sonarqube (#12)

* refactor: code quality - Implement changes suggested by Sonarqube - Fix typescript issues
fhswf · Mar 22, 2024 · 7aa65c2 · 7aa65c2
1 parent 13b13ce
commit 7aa65c2
Show file tree

Hide file tree

Showing 16 changed files with 51 additions and 50 deletions.
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="de">
 
 <head>
   <meta charset="UTF-8" />

diff --git a/src/chat/ChatApp.jsx → src/chat/ChatApp.tsx b/src/chat/ChatApp.jsx → src/chat/ChatApp.tsx
diff --git a/src/chat/ChatHistory.jsx → src/chat/ChatHistory.tsx b/src/chat/ChatHistory.jsx → src/chat/ChatHistory.tsx
@@ -1,13 +1,13 @@
 import React from 'react'
-import { useGlobal, useMessages } from './context'
+import { useMessage } from './hooks/useMessage'
 
 export function ChatHistory() {
-  const { message } = useMessages()
+  const { message } = useMessage()
   return (
     <div>
       {
         message.messages.map(item =>
-          <div>
+          <div key={item.id}>
             {item.content}
           </div>
         )

diff --git a/src/chat/ChatMessage.jsx → src/chat/ChatMessage.tsx b/src/chat/ChatMessage.jsx → src/chat/ChatMessage.tsx
@@ -4,7 +4,8 @@ import { CopyIcon, ScrollView, Error, EmptyChat, ChatHelp } from './component'
 import { MessageRender } from './MessageRender'
 import { ConfigInfo } from './ConfigInfo'
 import { useGlobal } from './context'
-import { useMesssage, useSendKey, useOptions } from './hooks'
+import { useSendKey, useOptions } from './hooks'
+import { useMessage } from './hooks/useMessage'
 import { dateFormat } from './utils'
 import avatar from '../assets/images/avatar-gpt.png'
 import styles from './style/message.module.less'
@@ -13,8 +14,8 @@ import { useTranslation } from "react-i18next";
 
 export function MessageHeader() {
   const { is, setIs, clearMessage, options } = useGlobal()
-  const { message } = useMesssage()
-  const { messages = [] } = message || {}
+  const { message } = useMessage()
+  const messages = message.messages;
   const columnIcon = is.sidebar ? 'column-close' : 'column-open'
   const { setGeneral } = useOptions()
   const { t } = useTranslation();
@@ -115,7 +116,7 @@ const onEnter = (content, event) => {
 
 export function MessageContainer() {
   const { options } = useGlobal()
-  const { message } = useMesssage()
+  const { message } = useMessage()
   const { messages = [] } = message || {}
   if (options?.openai?.apiKey) {
     return (
@@ -124,7 +125,7 @@ export function MessageContainer() {
           messages.length ? <div className={styles.container}>
             {messages
               .filter(message => message.role === "user" || message.role === "assistant")
-              .map((item, index) => <MessageItem key={index} {...item} />)}
+              .map((item, index) => <MessageItem key={item.id} {...item} />)}
             {message?.error && <Error />}
           </div> : <ChatHelp />
         }
@@ -138,16 +139,14 @@ export function MessageContainer() {
 export function ChatMessage() {
   const { is } = useGlobal()
   return (
-    <React.Fragment>
-      <div className={styles.message}>
-        <MessageHeader />
-        <ScrollView>
-          <MessageContainer />
-          {is.thinking && <Loading />}
-        </ScrollView>
-        <MessageBar />
-      </div>
-    </React.Fragment >
+    <div className={styles.message}>
+      <MessageHeader />
+      <ScrollView>
+        <MessageContainer />
+        {is.thinking && <Loading />}
+      </ScrollView>
+      <MessageBar />
+    </div>
   )
 }
 
diff --git a/src/chat/ChatOptions.jsx → src/chat/ChatOptions.tsx b/src/chat/ChatOptions.jsx → src/chat/ChatOptions.tsx
diff --git a/src/chat/ChatSideBar.jsx → src/chat/ChatSideBar.tsx b/src/chat/ChatSideBar.jsx → src/chat/ChatSideBar.tsx
@@ -3,12 +3,11 @@ import { Avatar, Button, Icon, Panel, Tooltip } from '../components'
 import { useGlobal } from './context'
 import { classnames } from '../components/utils'
 import { useOptions } from './hooks'
-import { t, use } from 'i18next'
+import { t } from 'i18next'
 import Markdown from 'react-markdown'
 import remarkMath from 'remark-math'
 import smartypants from 'remark-smartypants'
 import remarkGfm from 'remark-gfm'
-import remarkBreaks from 'remark-breaks'
 import rehypeKatex from 'rehype-katex'
 
 import styles from './style/sider.module.less'
@@ -97,12 +96,12 @@ export function ChatSideBar() {
 
             <Panel title="User information" className={styles.user} onClose={() => setUserModal(false)}>
               <Button type="icon" icon="close" onClick={() => setUserModal(false)} class={styles.close} />
-              <div class={styles.user}>
+              <div className={styles.user}>
                 <Avatar src={user?.avatar || ""} />
                 <div className={styles.name}>{user?.name}</div>
                 <div className={styles.email}>{user?.email}</div>
               </div>
-              <div class={styles.panel}>
+              <div className={styles.panel}>
                 <Button type="primary" onClick={logout}>Logout</Button>
               </div>
             </Panel>

diff --git a/src/chat/context/action.ts b/src/chat/context/action.ts
@@ -1,7 +1,6 @@
 import { fetchStream } from "../service/index";
-import i18next, { t, use } from "i18next";
-import { useApps } from "../apps/context";
-import { AccountOptions, GeneralOptions, GlobalState, OpenAIOptions, Options, OptionAction, GlobalActions, Messages, GlobalAction, GlobalActionType, AnyOptions, OptionActionType } from "./types";
+import i18next, { t } from "i18next";
+import { Chat, GlobalState, Options, OptionAction, GlobalActions, Messages, GlobalAction, GlobalActionType, OptionActionType } from "./types";
 import React from "react";
 
 
@@ -39,19 +38,19 @@ export default function action(state: Partial<GlobalState>, dispatch: React.Disp
     async newChat(app) {
       const { currentApp, is, options, currentChat, chat } = state;
       const newApp = app || currentApp;
-      let messages = [{ content: newApp?.content || t("system_welcome"), sentTime: Date.now(), role: "system", id: 1, }]
+      let messages: Messages = [{ content: newApp?.content || t("system_welcome"), sentTime: Date.now(), role: "system", id: 1, }]
       console.log("newChat: ", newApp, chat)
       const chatList = [
         {
           title: newApp?.title || t("new_conversation"),
           id: Date.now(),
           messages,
           ct: Date.now(),
-          icon: [2, "files"],
+          //icon: [2, "files"],
         },
         ...chat,
       ];
-      let _chat = chatList;
+      let _chat: Chat[] = chatList;
       setState({ chat: _chat, currentChat: 0 });
       console.log("newChat: ", _chat)
       if (newApp.botStarts) {
@@ -120,13 +119,17 @@ export default function action(state: Partial<GlobalState>, dispatch: React.Disp
       console.log('set options: ', type, data);
       let options = { ...state.options };
       if (type === OptionActionType.OPENAI) {
+        options[type] = { ...options[type], ...data };
       }
-      options[type] = { ...options[type], ...data };
-      if (type === "general") {
+      else if (type === OptionActionType.GENERAL) {
+        options[type] = { ...options[type], ...data };
         if (data.language) {
           i18next.changeLanguage(data.language);
         }
       }
+      else if (type === OptionActionType.ACCOUNT) {
+        options[type] = { ...options[type], ...data };
+      }
       console.log('set options: ', options);
       setState({ options });
     },

diff --git a/src/chat/context/index.tsx b/src/chat/context/index.tsx
@@ -10,11 +10,11 @@ import action from "./action";
 import reducer from "./reducer";
 import { initState } from "./initState";
 import { fetchAndGetUser } from "../utils";
-import { GlobalAction, GlobalState, GlobalActionType } from "./types";
+import { GlobalAction, GlobalActions, GlobalState, GlobalActionType } from "./types";
 
 
 export const ChatContext = createContext(null);
-export const MessagesContext = createContext<Dispatch<GlobalAction> | null>(null);
+export const MessagesContext = createContext<Dispatch<GlobalAction>>(null);
 
 export const ChatProvider = ({ children }) => {
   const init: GlobalState = JSON.parse(localStorage.getItem("SESSIONS")) || initState;
@@ -46,17 +46,16 @@ export const ChatProvider = ({ children }) => {
   }, [latestState.current]);
 
 
-  return (<>
+  return (
     <ChatContext.Provider value={{ ...state, ...actionList }}>
       <MessagesContext.Provider value={dispatch}>
         {children}
       </MessagesContext.Provider>
     </ChatContext.Provider>
-  </>
   );
 };
 
-export const useGlobal = () => useContext<GlobalAction & GlobalState>(ChatContext);
+export const useGlobal = () => useContext<GlobalActions & GlobalState>(ChatContext);
 export const useMessages = () => useContext(MessagesContext);
 
 
diff --git a/src/chat/context/initState.ts b/src/chat/context/initState.ts
@@ -9,7 +9,7 @@ export const initState: GlobalState = {
     {
       title: t("chatbot_title"),
       id: 1,
-      ct: "2023-12-12",
+      ct: Date.now(),
       messages: [
         {
           content: t("system_welcome"),

diff --git a/src/chat/context/reducer.ts b/src/chat/context/reducer.ts
@@ -6,20 +6,13 @@ export default function reduce(state: GlobalState, action: GlobalAction): Global
   // console.log("context reducer:", state, action);
   switch (type) {
     case "CHANGE_MESSAGE":
-      return {
-        ...state,
-        ...payload,
-      };
     case "IS_CONFIG":
-      return {
-        ...state,
-        ...payload,
-      };
     case "SET_STATE":
       return {
         ...state,
         ...payload,
       };
+
     default:
       return state;
   }

diff --git a/src/chat/context/types.ts b/src/chat/context/types.ts
@@ -50,6 +50,7 @@ export type GlobalState = {
     chat: Chat[];
     currentChat: number;
     currentApp: App | null;
+    currentEditor?: any;
     options: Options;
     is: {
         typeing: boolean;
@@ -105,8 +106,9 @@ export type Messages = Message[];
 export type Chat = {
     title: string;
     id: number;
-    ct: string;
+    ct: number;
     messages: Messages;
+    error?: any;
 };
 
 export type App = {

diff --git a/src/chat/hooks/index.js → src/chat/hooks/index.ts b/src/chat/hooks/index.js → src/chat/hooks/index.ts
diff --git a/src/chat/hooks/useMessage.js → src/chat/hooks/useMessage.ts b/src/chat/hooks/useMessage.js → src/chat/hooks/useMessage.ts
@@ -1,9 +1,15 @@
 import { useState, useEffect } from "react";
 import { useGlobal } from "../context";
+import { Chat, Message } from "../context/types";
+
+
+export function useMessage() {
+  type Messages = {
+    messages: Message[];
+  };
 
-export function useMesssage() {
   const { currentChat, chat, is } = useGlobal();
-  const [message, setMessage] = useState({ messages: [] });
+  const [message, setMessage] = useState<Partial<Chat>>({ messages: [] });
   useEffect(() => {
     if (chat.length) {
       setMessage(chat[currentChat]);

diff --git a/src/chat/hooks/useOptions.js b/src/chat/hooks/useOptions.js
@@ -3,7 +3,7 @@ import { useGlobal } from "../context";
 
 export function useOptions() {
   const { options, setOptions } = useGlobal();
-  const { size, theme } = options?.general;
+  const { size, theme } = options.general;
   useEffect(() => {
     const body = document.querySelector("html");
     body.classList = [];

diff --git a/src/hooks/index.js → src/hooks/index.ts b/src/hooks/index.js → src/hooks/index.ts
diff --git a/src/index.tsx b/src/index.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import * as ReactDOMClient from "react-dom/client";
-import ChatApp from "./chat/ChatApp.jsx";
+import ChatApp from "./chat/ChatApp.js";
 import "./i18n/config.ts";
 
 const root = ReactDOMClient.createRoot(document.getElementById("app"));