execute-it · pratikdaigavane · Sep 11, 2020
diff --git a/craco.config.js b/craco.config.js
@@ -1,17 +1,17 @@
 const CracoLessPlugin = require('craco-less');
 
 module.exports = {
-  plugins: [
-    {
-      plugin: CracoLessPlugin,
-      options: {
-        lessLoaderOptions: {
-          lessOptions: {
-            modifyVars: { '@primary-color': '#1DA57A' },
-            javascriptEnabled: true,
-          },
+    plugins: [
+        {
+            plugin: CracoLessPlugin,
+            options: {
+                lessLoaderOptions: {
+                    lessOptions: {
+                        modifyVars: {'@primary-color': '#1DA57A'},
+                        javascriptEnabled: true,
+                    },
+                },
+            },
         },
-      },
-    },
-  ],
+    ],
 };
diff --git a/package.json b/package.json
@@ -1,73 +1,74 @@
 {
-    "name": "create-react-app-antd",
-    "version": "0.1.0",
-    "private": true,
-    "dependencies": {
-        "@ant-design/icons": "^4.2.2",
-        "@convergence/ace-collab-ext": "^0.4.0",
-        "@convergence/color-assigner": "^0.3.0",
-        "@convergence/convergence": "^1.0.0-rc.7",
-        "@craco/craco": "^5.6.4",
-        "@lottiefiles/react-lottie-player": "^2.1.8",
-        "@testing-library/jest-dom": "^5.9.0",
-        "@testing-library/react": "^10.2.1",
-        "@testing-library/user-event": "^11.1.0",
-        "antd": "^4.5.2",
-        "antd-theme-webpack-plugin": "^1.3.6",
-        "axios": "^0.20.0",
-        "craco-less": "^1.17.0",
-        "mediasoup-client": "^2.4.10",
-        "query-string": "^6.13.1",
-        "querystring": "^0.2.0",
-        "react": "^16.13.1",
-        "react-chat-widget": "^3.0.5",
-        "react-chat-window": "^1.2.1",
-        "react-cookie": "^4.0.3",
-        "react-cookies": "^0.1.1",
-        "react-css-theme-switcher": "^0.1.6",
-        "react-dark-mode-toggle": "^0.0.9",
-        "react-dom": "^16.13.1",
-        "react-floating-action-button": "^1.0.5",
-        "react-google-button": "^0.7.1",
-        "react-html-parser": "^2.0.2",
-        "react-lottie": "^1.2.3",
-        "react-router-dom": "^5.2.0",
-        "react-scripts": "3.4.1",
-        "react-split-pane": "^0.1.92",
-        "react-toggle-dark-mode": "^1.0.2",
-        "reactjs-localstorage": "^1.0.1",
-        "socket.io-client": "^2.3.0",
-        "validator": "^13.1.1",
-        "xterm-addon-attach": "^0.6",
-        "xterm-for-react": "^1.0.4"
-    },
-    "scripts": {
-        "start": "craco start",
-        "build": "craco build",
-        "test": "craco test"
-    },
-    "eslintConfig": {
-        "extends": "react-app"
-    },
-    "browserslist": {
-        "production": [
-            ">0.2%",
-            "not dead",
-            "not op_mini all"
-        ],
-        "development": [
-            "last 1 chrome version",
-            "last 1 firefox version",
-            "last 1 safari version"
-        ]
-    },
-    "devDependencies": {
-        "autoprefixer": "^9.8.6",
-        "gulp": "^4.0.2",
-        "gulp-csso": "^4.0.1",
-        "gulp-debug": "^4.0.0",
-        "gulp-less": "^4.0.1",
-        "gulp-postcss": "^8.0.0",
-        "less-plugin-npm-import": "^2.1.0"
-    }
+  "name": "create-react-app-antd",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@ant-design/icons": "^4.2.2",
+    "@convergence/ace-collab-ext": "^0.4.0",
+    "@convergence/color-assigner": "^0.3.0",
+    "@convergence/convergence": "^1.0.0-rc.7",
+    "@craco/craco": "^5.6.4",
+    "@lottiefiles/react-lottie-player": "^2.1.8",
+    "@testing-library/jest-dom": "^5.9.0",
+    "@testing-library/react": "^10.2.1",
+    "@testing-library/user-event": "^11.1.0",
+    "antd": "^4.5.2",
+    "antd-theme-webpack-plugin": "^1.3.6",
+    "axios": "^0.20.0",
+    "craco-less": "^1.17.0",
+    "mediasoup-client": "^2.4.10",
+    "query-string": "^6.13.1",
+    "querystring": "^0.2.0",
+    "react": "^16.13.1",
+    "react-chat-widget": "^3.0.5",
+    "react-chat-window": "^1.2.1",
+    "react-cookie": "^4.0.3",
+    "react-cookies": "^0.1.1",
+    "react-css-theme-switcher": "^0.1.6",
+    "react-dark-mode-toggle": "^0.0.9",
+    "react-dom": "^16.13.1",
+    "react-floating-action-button": "^1.0.5",
+    "react-google-button": "^0.7.1",
+    "react-html-parser": "^2.0.2",
+    "react-lottie": "^1.2.3",
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "3.4.1",
+    "react-split-pane": "^0.1.92",
+    "react-toggle-dark-mode": "^1.0.2",
+    "reactjs-localstorage": "^1.0.1",
+    "socket.io-client": "^2.3.0",
+    "validator": "^13.1.1",
+    "xterm-addon-attach": "^0.6",
+    "xterm-addon-fit": "^0.4.0",
+    "xterm-for-react": "^1.0.4"
+  },
+  "scripts": {
+    "start": "craco start",
+    "build": "craco build",
+    "test": "craco test"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "autoprefixer": "^9.8.6",
+    "gulp": "^4.0.2",
+    "gulp-csso": "^4.0.1",
+    "gulp-debug": "^4.0.0",
+    "gulp-less": "^4.0.1",
+    "gulp-postcss": "^8.0.0",
+    "less-plugin-npm-import": "^2.1.0"
+  }
 }
diff --git a/public/index.html b/public/index.html
@@ -2,19 +2,19 @@
 <html lang="en">
 
 <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
+    <meta charset="utf-8"/>
+    <link href="%PUBLIC_URL%/favicon.ico" rel="icon"/>
+<!--    <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>-->
 
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta name="description" content="Web site created using create-react-app" />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <meta content="width=device-width, initial-scale=1" name="viewport"/>
+    <meta content="#000000" name="theme-color"/>
+    <meta content="Web site created using create-react-app" name="description"/>
+    <link href="%PUBLIC_URL%/logo192.png" rel="apple-touch-icon"/>
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link href="%PUBLIC_URL%/manifest.json" rel="manifest"/>
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -28,18 +28,18 @@
 </head>
 
 <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
+<noscript>You need to enable JavaScript to run this app.</noscript>
+<div id="root"></div>
+<!--
+  This HTML file is a template.
+  If you open it directly in the browser, you will see an empty page.
 
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
+  You can add webfonts, meta tags, or analytics to this file.
+  The build step will place the bundled scripts into the <body> tag.
 
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
+  To begin the development, run `npm start` or `yarn start`.
+  To create a production bundle, use `npm run build` or `yarn build`.
+-->
 </body>
 
 </html>
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,22 +1,21 @@
-import React, { useEffect, useContext, useState } from "react";
-import { Route, Switch } from "react-router-dom";
-import { useThemeSwitcher } from "react-css-theme-switcher";
+import React, {useContext, useEffect, useState} from "react";
+import {Route, Switch, withRouter} from "react-router-dom";
+import {useThemeSwitcher} from "react-css-theme-switcher";
 import SignIn from "./pages/sign-in/signIn.page";
 import "./App.less";
-import { Layout } from "antd";
-import { reactLocalStorage } from "reactjs-localstorage";
+import {Layout} from "antd";
+import {reactLocalStorage} from "reactjs-localstorage";
 import Callback from "./pages/callback/callback.page";
 import WorkspacePage from "./pages/editor/workspace.page";
 import RoomPage from "./pages/rooms/rooms.page";
 import UserContext from "./context/UserContext";
 import cookie from "react-cookies";
 import axios from "axios";
-import { withRouter } from "react-router-dom";
 // import TestPage from './pages/test/test.page'
 import HeaderComponent from "./components/headerComponent/headerComponent.component";
 import JoinPage from "./pages/join/join.page";
 
-const { Header, Content } = Layout;
+const {Header, Content} = Layout;
 const App = (props) => {
     const [loading, setLoading] = useState(true);
 
@@ -27,7 +26,7 @@ const App = (props) => {
         const dark = (await reactLocalStorage.get("theme", "dark")) === "dark";
         await checkCookie();
         setIsDarkMode(dark);
-        await switcher({ theme: dark ? themes.dark : themes.light });
+        await switcher({theme: dark ? themes.dark : themes.light});
         // eslint-disable-next-line
     }, []);
 
@@ -62,14 +61,14 @@ const App = (props) => {
         }
     };
 
-    const { switcher, status, themes } = useThemeSwitcher();
+    const {switcher, status, themes} = useThemeSwitcher();
 
     const [isDarkMode, setIsDarkMode] = React.useState();
 
     const toggleTheme = (isChecked) => {
         setIsDarkMode(isChecked);
         reactLocalStorage.set("theme", isChecked ? "dark" : "light");
-        switcher({ theme: isChecked ? themes.dark : themes.light });
+        switcher({theme: isChecked ? themes.dark : themes.light});
         window.location.reload();
     };
 
@@ -90,26 +89,26 @@ const App = (props) => {
                 <Content>
                     <Switch>
                         <Route exact path="/login">
-                            <SignIn />
+                            <SignIn/>
                         </Route>
                         <Route exact path="/callback">
-                            <Callback />
+                            <Callback/>
                         </Route>
                         <Route path="/join">
-                            <JoinPage />
+                            <JoinPage/>
                         </Route>
                         {loading ? (
                             <div></div>
                         ) : (
                             <>
                                 <Route exact path="/rooms">
-                                    <RoomPage />
+                                    <RoomPage/>
                                 </Route>
                                 {/* <Route exact path='/test'>
                             <TestPage />
                         </Route>                         */}
                                 <Route exact path="/workspace">
-                                    <WorkspacePage />
+                                    <WorkspacePage/>
                                 </Route>
                                 {/* <Route path="/join">
                                     <JoinPage />

diff --git a/src/App.less b/src/App.less
@@ -88,23 +88,25 @@
 .Resizer.disabled {
   cursor: not-allowed;
 }
+
 .Resizer.disabled:hover {
   border-color: transparent;
 }
 
-.SplitPane{
+.SplitPane {
   height: 80%;
 }
 
 
-.sc-chat-window{
+.sc-chat-window {
   z-index: 99999;
 }
 
-.sc-launcher{
+.sc-launcher {
   z-index: 99999;
 }
-.ant-tabs-nav{
+
+.ant-tabs-nav {
   margin-bottom: 0px !important;
 }
 
@@ -136,7 +138,7 @@
   background: rgba(88, 88, 88, 1)
 }
 
-.terminal.xterm{
+.terminal.xterm {
   padding: 1rem
 }
 
diff --git a/src/assets/animation.json b/src/assets/animation.json