fix: Misc (minor style fixes) and websocket (#58)

CaptainIRS · web-flow · commit dd311ac61898 · 2022-02-28T17:41:58.000+05:30
* fix: Misc (minor style fixes) and websocket

* fix types and history styles
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -2,7 +2,7 @@ version: '3.8'
 
 services:
   web:
-    container_name: codecharater_web
+    container_name: codecharacter_web
     build: .
     ports:
       - '3000:80'
diff --git a/src/components/Auth/Auth/Login/Login.tsx b/src/components/Auth/Auth/Login/Login.tsx
@@ -119,9 +119,9 @@ function Login(): JSX.Element {
     <div className={styles.mainContainer}>
       <Card className={styles.cardContainer}>
         <div className={styles.titleContainer}>
-          <h1 className={styles.name}>Welcome To CodeCharatcer!</h1>
+          <h1 className={styles.name}>Welcome To CodeCharacter!</h1>
           <Container className={styles.subTitle}>
-            Log in to access your dashboard and profile 👏️🎊️{' '}
+            Log in to access your dashboard and profile{' '}
           </Container>
         </div>
         <form className={styles.formContainer}>
@@ -144,7 +144,7 @@ function Login(): JSX.Element {
               {emailError && login ? (
                 <AlertMessage
                   err={emailError}
-                  content={'Please ! Enter a valid Email ID'}
+                  content={'Please enter a valid Email ID'}
                 />
               ) : (
                 <></>
diff --git a/src/components/Auth/Auth/ProgressBar/progressBar.module.css b/src/components/Auth/Auth/ProgressBar/progressBar.module.css
@@ -5,7 +5,7 @@
 
 .progressBar {
   height: 5px;
-  width: 230px;
+  width: 250px;
   text-align: center;
   margin: auto;
 }
diff --git a/src/components/Auth/Auth/Register/FormDetails/UserCreditionals.tsx b/src/components/Auth/Auth/Register/FormDetails/UserCreditionals.tsx
@@ -49,7 +49,7 @@ export default function UserCreditionals(props: creditionals): JSX.Element {
   };
   return (
     <div>
-      <div className={styles.levelTitle}>User Creditionals</div>
+      <div className={styles.levelTitle}>User Credentials</div>
       <Form.Group className="mb-3" controlId="formBasicPassword">
         <Form.Label>
           Password{' '}
diff --git a/src/components/Auth/Auth/Register/Register.tsx b/src/components/Auth/Auth/Register/Register.tsx
@@ -298,7 +298,7 @@ export default function Register(): JSX.Element {
         <div className={styles.titleContainer}>
           <h1> Register to CodeCharacter</h1>
           <Container className={styles.subTitle}>
-            <p> Register now and code your way through 👨‍💻️!! </p>
+            <p> Register now and code your way through! </p>
           </Container>
         </div>
         <ProgressBar
diff --git a/src/components/Auth/Auth/auth.module.css b/src/components/Auth/Auth/auth.module.css
@@ -16,7 +16,7 @@
 }
 
 .cardContainer {
-  max-width: 400px;
+  max-width: 500px;
   padding: 2%;
   padding-top: 0%;
   margin: auto;
diff --git a/src/components/BattleTV/BattleTV.tsx b/src/components/BattleTV/BattleTV.tsx
@@ -103,9 +103,14 @@ function PaginatedItems() {
                       className={styles.watchButton}
                       onClick={() => {
                         dispatch(
-                          getLogAction(getUsersGame(loggedInUser, match).id),
+                          getLogAction({
+                            id: getUsersGame(loggedInUser, match).id,
+                            callback: () => {
+                              console.log('success');
+                              navigate('/dashboard');
+                            },
+                          }),
                         );
-                        navigate('/dashboard');
                       }}
                     >
                       Watch
@@ -175,7 +180,7 @@ export default function BattleTV(): JSX.Element {
           <div className={styles.destruction}>Destruction %</div>
           <div className={styles.vs}>VS</div>
           <div className={styles.destruction}>Destruction %</div>
-          <div className={styles.coinused}>Coinused</div>
+          <div className={styles.coinused}>Coins Used</div>
           <div className={styles.username}></div>
           <div className={styles.pic}></div>
         </div>
diff --git a/src/components/BattleTV/BattleTvSlice.ts b/src/components/BattleTV/BattleTvSlice.ts
@@ -63,8 +63,7 @@ export function fetchBattleTv(): ThunkAction<
       .then(response => {
         useAppDispatch(getBattleTvSuccess(response));
       })
-      .catch(error => {
-        console.log(error);
+      .catch(() => {
         useAppDispatch(getBattleTvFailure());
       });
   };
diff --git a/src/components/CommitHistory/CommitTree/CommitHistory.css b/src/components/CommitHistory/CommitTree/CommitHistory.css
@@ -1,5 +1,6 @@
 .vertical-timeline-element--work,
 .vertical-timeline-element {
+  width: 90%;
   height: 120px;
   padding: 0%;
 }
diff --git a/src/components/CommitHistory/HistoryMain/History.tsx b/src/components/CommitHistory/HistoryMain/History.tsx
@@ -112,7 +112,7 @@ export default function History(): JSX.Element {
         </div>
       </div>
       <Row className={styles.viewContainer}>
-        <Col md="3">
+        <Col lg="3">
           <div></div>
           <div className={styles.completeTimeline}>
             {completeMapHistory && completeCodeHistroy ? (
@@ -131,7 +131,7 @@ export default function History(): JSX.Element {
           </div>
           <div></div>
         </Col>
-        <Col md="9" className={styles.codeView}>
+        <Col lg="9" className={styles.codeView}>
           <div className={BigButton == 'Code' ? styles.codeBox : styles.mapBox}>
             {BigButton == 'Code' ? (
               <CodeView code={currentCode} codeLang={codeLanguage} />
diff --git a/src/components/Leaderboard/Leaderboard.module.css b/src/components/Leaderboard/Leaderboard.module.css
@@ -89,6 +89,7 @@ html {
 }
 
 .list .item .score {
+  font-family: monospace;
   margin-right: 1.5rem;
   opacity: 1;
 }
diff --git a/src/components/Leaderboard/Leaderboard.tsx b/src/components/Leaderboard/Leaderboard.tsx
@@ -7,10 +7,8 @@ import { getAvatarByID } from '../Avatar/Avatar';
 import {
   LeaderboardApi,
   MatchApi,
-  CodeApi,
-  MapApi,
-  CreateMatchRequest,
   LeaderboardEntry,
+  MatchMode,
 } from '@codecharacter-2022/client';
 import { apiConfig, ApiError } from '../../api/ApiConfig';
 import Loader from '../Loader/Loader';
@@ -24,11 +22,11 @@ function PaginatedItems() {
   const [currentItems, setCurrentItems] = useState<LeaderboardEntry[]>([]);
   const [isLoaded, setIsLoaded] = useState(false);
   const [show, setShow] = useState(false);
-  let currentOpponentId: string;
+  const [currentOpponentUsername, setCurrentOpponentUsername] = useState('');
 
   const handleClose = () => setShow(false);
-  const handleShow = (opponentId: string) => {
-    currentOpponentId = opponentId;
+  const handleShow = (username: string) => {
+    setCurrentOpponentUsername(username);
     setShow(true);
   };
 
@@ -42,7 +40,7 @@ function PaginatedItems() {
     const endOffset = itemOffset + itemsPerPage;
     setCurrentItems(items.slice(itemOffset, endOffset));
     setPageCount(Math.ceil(items.length / itemsPerPage));
-  }, [itemOffset, itemsPerPage]);
+  }, [itemOffset, itemsPerPage, items]);
 
   const handlePageClick = (event: { selected: number }) => {
     const newOffset = (event.selected * itemsPerPage) % items.length;
@@ -64,30 +62,17 @@ function PaginatedItems() {
   };
 
   async function handleMatchStart() {
-    enum MatchMode {
-      Self = 'SELF',
-      Manual = 'MANUAL',
-      Auto = 'AUTO',
-    }
-    const codeAPI = new CodeApi(apiConfig);
-    const mapAPI = new MapApi(apiConfig);
-    const codeRevisionId = await codeAPI.getCodeRevisions().then(response => {
-      response[response.length - 1].parentRevision;
-    });
-    const mapRevisionId = await mapAPI.getMapRevisions().then(response => {
-      response[response.length - 1].parentRevision;
-    });
-    const matchRequest = {
-      mode: MatchMode.Self,
-      opponentId: currentOpponentId,
-      codeRevisionId: codeRevisionId,
-      mapRevisionId: mapRevisionId,
-    };
-
     const matchAPI = new MatchApi(apiConfig);
-    matchAPI.createMatch(matchRequest as CreateMatchRequest).catch(error => {
-      if (error instanceof ApiError) console.log(error);
-    });
+    matchAPI
+      .createMatch({
+        mode: MatchMode.Manual,
+        opponentUsername: currentOpponentUsername,
+        codeRevisionId: undefined,
+        mapRevisionId: undefined,
+      })
+      .catch(error => {
+        if (error instanceof ApiError) console.log(error);
+      });
     setShow(false);
   }
   return (
@@ -103,15 +88,16 @@ function PaginatedItems() {
                   <Modal.Title>Start a new match</Modal.Title>
                 </Modal.Header>
                 <Modal.Body className={styles.editorSettingsBody}>
-                  Do you want to start a match ?
+                  Do you want to start a match against {currentOpponentUsername}
+                  ?
                 </Modal.Body>
                 <Modal.Footer>
                   <Button variant="secondary" onClick={handleClose}>
                     Close
                   </Button>
                   <Button
                     className={styles.matchButton}
-                    onClick={handleMatchStart}
+                    onClick={() => handleMatchStart()}
                   >
                     Start match
                   </Button>
@@ -153,7 +139,9 @@ function PaginatedItems() {
                             src={swordImage}
                           ></img>
                         </td>
-                        <td className={styles.score}>{row.stats.rating}</td>
+                        <td className={styles.score}>
+                          {row.stats.rating.toFixed(3)}
+                        </td>
                         <td className={styles.score}>{row.stats.wins}</td>
                         <td className={styles.score}>{row.stats.ties}</td>
                         <td className={styles.score}>{row.stats.losses}</td>
diff --git a/src/components/Profile/Profile.tsx b/src/components/Profile/Profile.tsx
@@ -307,7 +307,7 @@ const Profile = (props: profile): JSX.Element => {
                       {collegeError ? (
                         <AlertMessage
                           err={collegeError}
-                          content={'Please Enter a valid College name'}
+                          content={'Please enter a valid College name'}
                         />
                       ) : (
                         <></>
@@ -478,7 +478,7 @@ const Profile = (props: profile): JSX.Element => {
                       {confirmpasswordError ? (
                         <AlertMessage
                           err={confirmpasswordError}
-                          content={'Please! check your password'}
+                          content={'Please check your password'}
                         />
                       ) : (
                         <></>
@@ -523,7 +523,7 @@ const Profile = (props: profile): JSX.Element => {
                     }}
                     className={styles.linkButton}
                   >
-                    Want to Change Credentials
+                    Want to Change Credentials?
                   </Button>
                 ) : (
                   <Button
diff --git a/src/components/SideBar/SideBar.module.css b/src/components/SideBar/SideBar.module.css
@@ -27,7 +27,7 @@
 }
 
 .deltaLogo > img {
-  width: 40px;
-  height: 40px;
+  width: 1.5rem;
+  height: 1.5rem;
   cursor: pointer;
 }
diff --git a/src/components/Toast/Toast.tsx b/src/components/Toast/Toast.tsx
@@ -1,18 +1,22 @@
 import { Toaster } from 'react-hot-toast';
+import { Websocket } from '../Websocket/Websocket';
 
 const Toast: React.FunctionComponent = () => {
   return (
-    <Toaster
-      position="bottom-right"
-      toastOptions={{
-        style: {
-          background: '#242a3b',
-          color: '#ffffff',
-          fontFamily: 'Montserrat',
-          borderRadius: '5px',
-        },
-      }}
-    />
+    <>
+      <Toaster
+        position="bottom-right"
+        toastOptions={{
+          style: {
+            background: '#242a3b',
+            color: '#ffffff',
+            fontFamily: 'Montserrat',
+            borderRadius: '5px',
+          },
+        }}
+      />
+      <Websocket />
+    </>
   );
 };
 
diff --git a/src/components/Websocket/Websocket.tsx b/src/components/Websocket/Websocket.tsx
@@ -0,0 +1,70 @@
+import {
+  CurrentUserApi,
+  Game,
+  GameStatus,
+  Notification,
+} from '@codecharacter-2022/client';
+import { apiConfig } from '../../api/ApiConfig';
+import { Stomp } from '@stomp/stompjs';
+import { useEffect } from 'react';
+import Toast from 'react-hot-toast';
+import { getLogAction } from '../../store/rendererLogs/logSlice';
+import { useAppDispatch } from '../../store/hooks';
+import { BASE_PATH } from '../../config/config';
+
+export const Websocket: React.FunctionComponent = () => {
+  const currentUserapi = new CurrentUserApi(apiConfig);
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    currentUserapi.getCurrentUser().then(user => {
+      const baseUrl = BASE_PATH.replace('http', 'ws');
+      const url = `${baseUrl}/ws`;
+      const wsClient = Stomp.over(() => new WebSocket(url));
+      wsClient.brokerURL = url;
+      const handleConnect = () => {
+        wsClient.subscribe(`/updates/${user.id}`, message => {
+          const game = JSON.parse(message.body) as Game;
+          switch (game.status) {
+            case GameStatus.Executing:
+              Toast.loading('Executing now...');
+              break;
+            case GameStatus.Executed:
+              Toast.success('Executed successfully!');
+              // TODO: find non-hacky way to do this
+              dispatch(
+                getLogAction({
+                  id: game.id,
+                  callback: () => (window.location.href = './#/dashboard'),
+                }),
+              );
+              break;
+            case GameStatus.ExecuteError:
+              Toast.error('Execution error!');
+              dispatch(
+                getLogAction({
+                  id: game.id,
+                  callback: () => (window.location.href = './#/dashboard'),
+                }),
+              );
+              break;
+          }
+          message.ack();
+        });
+        wsClient.subscribe(`/notifications/${user.id}`, message => {
+          const notification = JSON.parse(message.body) as Notification;
+          Toast(() => (
+            <div>
+              <h3>{notification.title}</h3>
+              {notification.content}
+            </div>
+          ));
+          message.ack();
+        });
+      };
+
+      wsClient.onConnect = handleConnect;
+      wsClient.activate();
+    });
+  }, []);
+  return <div></div>;
+};
diff --git a/src/main.tsx b/src/main.tsx
@@ -9,7 +9,6 @@ import { Provider } from 'react-redux';
 import { PersistGate } from 'redux-persist/integration/react';
 import { persistStore } from 'redux-persist';
 import Loader from './components/Loader/Loader';
-import './websocket/websocket';
 import AllRoutes from './AllRoutes';
 
 const persistor = persistStore(store);
diff --git a/src/pages/Dashboard/Dashboard.tsx b/src/pages/Dashboard/Dashboard.tsx
diff --git a/src/store/User/UserApi.ts b/src/store/User/UserApi.ts
diff --git a/src/store/User/UserSlice.ts b/src/store/User/UserSlice.ts
diff --git a/src/store/rendererLogs/logSlice.ts b/src/store/rendererLogs/logSlice.ts
diff --git a/src/websocket/websocket.ts b/src/websocket/websocket.ts

Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,7 @@`
`5`	`5`
`6`	`6`	`.progressBar {`
`7`	`7`	`height: 5px;`
`8`		`- width: 230px;`
	`8`	`+ width: 250px;`
`9`	`9`	`text-align: center;`
`10`	`10`	`margin: auto;`
`11`	`11`	`}`
Original file line number	Diff line number	Diff line change
`@@ -16,7 +16,7 @@`
`16`	`16`	`}`
`17`	`17`
`18`	`18`	`.cardContainer {`
`19`		`- max-width: 400px;`
	`19`	`+ max-width: 500px;`
`20`	`20`	`padding: 2%;`
`21`	`21`	`padding-top: 0%;`
`22`	`22`	`margin: auto;`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,6 @@`
`1`	`1`	`.vertical-timeline-element--work,`
`2`	`2`	`.vertical-timeline-element {`
	`3`	`+ width: 90%;`
`3`	`4`	`height: 120px;`
`4`	`5`	`padding: 0%;`
`5`	`6`	`}`