fix: unknown error in Rating History,self-match-modal, reset-password redirect,skip tutorial,add intellisense option button (#31)

* fix: unknown error in RatingHistory

* fix: self match-make modal and reset-password redirect

* fix: skip tutorial

* fix: avatarId for user2 and DC icon

* Feat : Autocomplete toggle

* Fix : Intellisense btn

---------

Co-authored-by: shubham-1806 <shub.agarwal2003@gmail.com>

Author: Ram-20062003

src/components/BattleTV/BattleTV.tsx

@@ -23,6 +23,7 @@ import {
 import watchIcon from '../../assets/watch.png';
 import { useTour } from '@reactour/tour';
 import { apiConfig } from '../../api/ApiConfig';
+import codecharacterIcon from '../../../public/assets/codechar_favicon.png';
 
 function getIcon(loggedInUser: User, match: Match) {
   if (loggedInUser.username === match.user1.username) {
@@ -172,7 +173,12 @@ function PaginatedItems() {
                       </span>
                       <div className={styles.picholder}>
                         <img
-                          src={getAvatarByID(match.user1.avatarId).url}
+                          src={
+                            match.user2 == null
+                              ? codecharacterIcon
+                              : getAvatarByID(match.user2?.avatarId as number)
+                                  .url
+                          }
                           className={styles.pic}
                         ></img>
                       </div>

src/components/Editor/Editor.tsx

@@ -23,6 +23,7 @@ import {
   isCommitModalOpened,
   KeyboardHandler,
   Theme,
+  Autocomplete,
 } from '../../store/EditorSettings/settings';
 
 import {
@@ -63,6 +64,7 @@ export default function CodeEditor(props: Editor.Props): JSX.Element {
       : useAppSelector(dcCode);
   const fontSize: number = useAppSelector(FontSize);
   const theme: string = useAppSelector(Theme);
+  const autocomplete: boolean = useAppSelector(Autocomplete);
   const dispatch: React.Dispatch<unknown> = useAppDispatch();
   const [workspace, setWorkspace] = useState<Editor.Workspace>({
     filepath: '',
@@ -113,6 +115,7 @@ export default function CodeEditor(props: Editor.Props): JSX.Element {
   }
 
   useEffect(() => {
+    if (!autocomplete) return;
     const url = `${lspUrl}/${
       props.language == 'c_cpp' ? 'cpp' : props.language
     }`;
@@ -143,7 +146,7 @@ export default function CodeEditor(props: Editor.Props): JSX.Element {
     return () => {
       wsClient?.close(1000);
     };
-  }, [props.language]);
+  }, [props.language, autocomplete]);
 
   useEffect(() => {
     if (!divCodeEditor.current) return;

src/components/EditorSettings/EditorSettings.module.css

@@ -19,6 +19,62 @@
   font-weight: bold;
 }
 
+.autocompletediv{
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 5px;
+  padding-top: 5px;
+  padding-left: 10px;
+  padding-right: 20px;
+}
+
+.autocompletebtn{
+  padding-top: 2px;
+  padding-left: 15px;
+}
+
+.autocompleteLabel{
+  color:#aaaaaa;
+  font-family: 'Poppins';
+  font-weight: 400;
+  font-size: 18px;
+  height: 3vh;
+  margin-bottom: 1.5vh;
+  padding-top: 0.2rem;
+}
+
+.toggle {
+  width: 55px;
+  height: 28px;
+  border-radius: 25px;
+  background-color: gray;
+  position: relative;
+  cursor: pointer;
+}
+
+.toggleHandle {
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  background-color: #fff;
+  position: absolute;
+  top: 3.5px;
+  left: 2.5px;
+  transition: all 0.3s ease-in-out;
+}
+
+.on {
+  background-color: #232627;
+
+}
+
+.on .toggleHandle {
+  transform: translateX(25px);
+}
+
+.off .toggleHandle {
+  transform: translateX(0);
+}
 
 .editorSettingsBody {
   background-color: #1e1e1e;

src/components/EditorSettings/EditorSettings.tsx

@@ -8,6 +8,8 @@ import {
   IsSettingsOpen,
   FontSize,
   Theme,
+  Autocomplete,
+  autoCompleteChanged,
 } from '../../store/EditorSettings/settings';
 
 const EditorSettings = (): JSX.Element => {
@@ -16,6 +18,7 @@ const EditorSettings = (): JSX.Element => {
   const theme = useAppSelector(Theme);
 
   const dispatch = useAppDispatch();
+  const autocomplete = useAppSelector(Autocomplete);
 
   const fontSizeOptions = [];
   for (let i = 8; i <= 40; i += 2) {
@@ -32,6 +35,10 @@ const EditorSettings = (): JSX.Element => {
     dispatch(themeChanged(newTheme));
   }
 
+  const handleAutocompleteChange = () => {
+    dispatch(autoCompleteChanged(!autocomplete));
+  };
+
   return (
     <Modal
       show={isSettingsOpen}
@@ -94,6 +101,22 @@ const EditorSettings = (): JSX.Element => {
                 </select>
               </FormGroup>
             </Col>
+
+            <Col xs={12}>
+              <div className={styles.autocompletediv}>
+                <div className={styles.autocompleteLabel}>Intellisense</div>
+                <div className={styles.autocompletebtn}>
+                  <div
+                    className={`${styles.toggle} ${
+                      autocomplete ? styles.on : styles.off
+                    }`}
+                    onClick={handleAutocompleteChange}
+                  >
+                    <div className={styles.toggleHandle}></div>
+                  </div>
+                </div>
+              </div>
+            </Col>
           </Row>
         </Container>
       </Modal.Body>

src/components/RatingChart/RatingChart.tsx

@@ -24,7 +24,6 @@ function RatingHistoryChart() {
   const [items, setItems] = useState<RatingHistory[]>([]);
   const [labelItems, setLabelItems] = useState<string[]>([]);
   const [dataItems, setDataItems] = useState<number[]>([]);
-  const [currentUser, setCurrentUser] = useState<string>('');
   const userApi = new UserApi(apiConfig);
 
   const labels: string[] = [];
@@ -79,14 +78,10 @@ function RatingHistoryChart() {
   useEffect(() => {
     const currentUserApi = new CurrentUserApi(apiConfig);
     currentUserApi.getCurrentUser().then(response => {
-      setCurrentUser(response.id);
+      fetchRatingHistory(response.id);
     });
   }, []);
 
-  useEffect(() => {
-    fetchRatingHistory();
-  }, [currentUser]);
-
   useEffect(() => {
     items &&
       items.map((entry: RatingHistory) => {
@@ -100,9 +95,9 @@ function RatingHistoryChart() {
       });
   }, [isLoaded]);
 
-  function fetchRatingHistory() {
+  function fetchRatingHistory(id: string) {
     setIsLoaded(false);
-    const ratingHistory = userApi.getRatingHistory(currentUser);
+    const ratingHistory = userApi.getRatingHistory(id);
     ratingHistory
       .then(response => {
         setItems(response);

src/components/SelfMatchMakingModal/SelfMatchMakeModal.tsx

@@ -26,7 +26,6 @@ import {
   MatchMode,
 } from '@codecharacter-2023/client';
 import Toast from 'react-hot-toast';
-import { isloggedIn } from '../../store/User/UserSlice';
 
 const selfMatchModal = (): JSX.Element => {
   const IsSelfMatchModalOpen = useAppSelector(isSelfMatchModalOpen);
@@ -37,7 +36,6 @@ const selfMatchModal = (): JSX.Element => {
   const dispatch = useAppDispatch();
   const [completeCodeHistory, setCodeHistory] = useState<CodeRevision[]>([]);
   const [completeMapHistory, setMapHistory] = useState<GameMapRevision[]>([]);
-  const isLogged = useAppSelector(isloggedIn);
 
   useEffect(() => {
     if (localStorage.getItem('token') !== null) {
@@ -72,7 +70,7 @@ const selfMatchModal = (): JSX.Element => {
           }
         });
     }
-  }, [isLogged]);
+  }, [IsSelfMatchModalOpen]);
 
   function handleCodeCommitChange(selectedValue: string) {
     if (selectedValue === 'Current Code') {

src/components/SideBar/SideBar.tsx

@@ -54,11 +54,13 @@ const SideBar: React.FunctionComponent = () => {
 
   useEffect(() => {
     setTimeout(() => {
-      currentUserApi.getCurrentUser().then(res => {
-        if (res.isTutorialComplete === false && res.tutorialLevel === 6) {
-          setIsOpen(true);
-        }
-      });
+      if (localStorage.getItem('token') != null) {
+        currentUserApi.getCurrentUser().then(res => {
+          if (res.isTutorialComplete === false && res.tutorialLevel === 6) {
+            setIsOpen(true);
+          }
+        });
+      }
     }, 1000);
   }, [isTourOver]);
 

src/components/TourIntroModal/TourIntroModal.tsx

@@ -51,13 +51,10 @@ const TourIntroModal = (): JSX.Element => {
     setIsTourOpen(false);
     currentUserApi
       .updateCurrentUser({
-        name: User.name,
-        country: User.country,
-        college: User.college,
-        updateTutorialLevel: 'NEXT',
+        updateTutorialLevel: 'SKIP',
       })
       .then(() => {
-        Toast.success('Tutorial skipped successfully');
+        Toast.success('Tutorial skipped');
       })
       .catch(err => {
         if (err instanceof ApiError) Toast.error(err.message);

src/pages/SideBarWrap/SideBarWrap.tsx

@@ -3,23 +3,16 @@ import Tour from '../../components/TourProvider/TourProvider';
 import { SideBarSteps } from '../../components/TourProvider/SideBarSteps';
 import { CurrentUserApi } from '@codecharacter-2023/client';
 import { apiConfig, ApiError } from '../../api/ApiConfig';
-import { useAppSelector } from '../../store/hooks';
-import { user } from '../../store/User/UserSlice';
 import Toast from 'react-hot-toast';
 
 const SideBarWrap = () => {
   const currentUserApi = new CurrentUserApi(apiConfig);
 
-  const User = useAppSelector(user);
-
   const setOpened = (opened: boolean) => {
     if (opened === false) {
       currentUserApi
         .updateCurrentUser({
-          name: User.name,
-          country: User.country,
-          college: User.college,
-          updateTutorialLevel: 'SKIP',
+          updateTutorialLevel: 'NEXT',
         })
         .then(() => {
           Toast.success('Tutorial Completed');

src/store/EditorSettings/settings.ts

@@ -10,6 +10,7 @@ export interface settingsStateType {
   enableSnippets: boolean;
   isInfoOpen: boolean;
   isCommitModalOpen: boolean;
+  autocomplete: boolean;
 }
 
 const initialState: settingsStateType = {
@@ -21,6 +22,7 @@ const initialState: settingsStateType = {
   enableSnippets: true,
   isInfoOpen: false,
   isCommitModalOpen: false,
+  autocomplete: true,
 };
 
 export interface CodeAndLanguage {
@@ -56,6 +58,9 @@ export const settingsSlice = createSlice({
     isCommitModalOpened: (state, action: PayloadAction<boolean>) => {
       state.isCommitModalOpen = action.payload;
     },
+    autoCompleteChanged: (state, action: PayloadAction<boolean>) => {
+      state.autocomplete = action.payload;
+    },
   },
 });
 
@@ -68,6 +73,7 @@ export const {
   enableSnippetsChanged,
   isInfoOpened,
   isCommitModalOpened,
+  autoCompleteChanged,
 } = settingsSlice.actions;
 
 export const IsSettingsOpen = (state: RootState): boolean =>
@@ -86,5 +92,7 @@ export const IsInfoOpen = (state: RootState): boolean =>
   state.codeEditorReducer.settingsState.isInfoOpen;
 export const IsCommitModalOpen = (state: RootState): boolean =>
   state.codeEditorReducer.settingsState.isCommitModalOpen;
+export const Autocomplete = (state: RootState): boolean =>
+  state.codeEditorReducer.settingsState.autocomplete;
 
 export default settingsSlice.reducer;