Implementation of Sidebar

.vscode/c_cpp_properties.json

@@ -0,0 +1,20 @@
+{
+    "configurations": [
+        {
+            "name": "Win32",
+            "includePath": [
+                "${workspaceFolder}/**"
+            ],
+            "defines": [
+                "_DEBUG",
+                "UNICODE",
+                "_UNICODE"
+            ],
+            "compilerPath": "C:/Program Files (x86)/Microsoft Visual Studio/2017/BuildTools/VC/Tools/MSVC/14.16.27023/bin/Hostx64/x64/cl.exe",
+            "cStandard": "c11",
+            "cppStandard": "c++17",
+            "intelliSenseMode": "msvc-x64"
+        }
+    ],
+    "version": 4
+}

src/App.js

@@ -1,66 +1,65 @@
-import React, { Component } from 'react';
+import React, { Component } from "react";
 
-import { isAuthenticated } from './utils/Token'
-import { Switch, Route, Redirect } from 'react-router-dom'
-
-import LoginPage from './pages/Auth/Login'
-import SearchOrgPage from './pages/Guest/SearchOrg'
-import HomePage from './pages/Guest/Home'
+import { isAuthenticated } from "./utils/Token";
+import { Switch, Route, Redirect } from "react-router-dom";
 
+import LoginPage from "./pages/Auth/Login";
+import SearchOrgPage from "./pages/Guest/SearchOrg";
+import HomePage from "./pages/Guest/Home";
 
 class App extends Component {
-  // In case of user is not logged in(token not found) then the Private route will redirect the user to the login page 
+  // In case of user is not logged in(token not found) then the Private route will redirect the user to the login page
   PrivateRoute = ({ component, ...rest }) => {
-    let ResultComponent = component
-    ResultComponent = <ResultComponent />
+    let ResultComponent = component;
+    ResultComponent = <ResultComponent />;
 
     if (!isAuthenticated()) {
-      ResultComponent = <Redirect to={{
-        pathname: "/login/",
-      }} />
+      ResultComponent = (
+        <Redirect
+          to={{
+            pathname: "/login/",
+          }}
+        />
+      );
     }
 
-    return (
-      <Route
-        {...rest}
-        render={props => ResultComponent}
-      />
-    );
-  }
+    return <Route {...rest} render={(props) => ResultComponent} />;
+  };
 
-  // In case of user is logged in(token found) then the Public route will not let the user enter login or signup page 
+  // In case of user is logged in(token found) then the Public route will not let the user enter login or signup page
   PublicRoute = ({ component, ...rest }) => {
-    let ResultComponent = component
-    ResultComponent = <ResultComponent />
+    let ResultComponent = component;
+    ResultComponent = <ResultComponent />;
 
     if (isAuthenticated()) {
-      ResultComponent = <Redirect to={{
-        pathname: "/searchOrgs/",
-      }} />
+      ResultComponent = (
+        <Redirect
+          to={{
+            pathname: "/searchOrgs/",
+          }}
+        />
+      );
     }
 
-    return (
-      <Route
-        {...rest}
-        render={props => ResultComponent}
-      />
-    );
-  }
-
+    return <Route {...rest} render={(props) => ResultComponent} />;
+  };
 
   render() {
     return (
       <div className="App">
         {this.props.token}
         <Switch>
-          <this.PrivateRoute exact path="/searchOrgs/" component={SearchOrgPage} />
+          <this.PrivateRoute
+            exact
+            path="/searchOrgs/"
+            component={SearchOrgPage}
+          />
           <this.PublicRoute exact path="/login/" component={LoginPage} />
-          <Route exact path='/' component={HomePage} />
+          <Route exact path="/" component={HomePage} />
         </Switch>
       </div>
     );
   }
 }
 
-
-export default App
+export default App;

src/components/GroupDetail/GroupRole.js

@@ -1,112 +1,110 @@
-import React, { Fragment } from 'react';
+import React, { Fragment } from "react";
 import {
-    Grid,
-    Card,
-    Button,
-    TextareaAutosize,
-    Typography,
-} from '@material-ui/core';
-import LockIcon from '@material-ui/icons/Lock';
-import { Skeleton } from '@material-ui/lab';
-import PropTypes from 'prop-types';
+  Grid,
+  Card,
+  Button,
+  TextareaAutosize,
+  Typography,
+} from "@material-ui/core";
+import "./default.css";
+import LockIcon from "@material-ui/icons/Lock";
+import { Skeleton } from "@material-ui/lab";
+import PropTypes from "prop-types";
 
 const classes = {
-    card_style: {
-        margin: '10px auto',
-        padding: '20px 20px',
-        textAlign: 'center',
-        width: '500px',
-        fontSize: '18px',
-    },
-    text_area: {
-        width: '450px',
-    },
+  card_style: {
+    margin: "10px auto",
+    padding: "20px 20px",
+    textAlign: "center",
+    width: "500px",
+    fontSize: "18px",
+  },
+  text_area: {
+    width: "450px",
+  },
 };
 
 const GroupRole = ({
-    stateData: { loading, role, edit, isAdmin },
-    setEdit,
+  stateData: { loading, role, edit, isAdmin },
+  setEdit,
 }) => {
-    return (
-        <Card style={classes.card_style}>
-            <Button
-                style={{ 'margin-left': '400px' }}
-                disabled={loading}
-                variant='contained'
-                color='primary'
-                onClick={() => setEdit(edit)}>
-                {isAdmin ? (
-                    edit ? (
-                        <div>Save</div>
-                    ) : (
-                        <div>Edit</div>
-                    )
-                ) : (
-                    <div>
-                        Edit
-                        <span style={{ margin: 5 }}>
-                            <LockIcon style={{ fontSize: 12 }} />
-                        </span>
-                    </div>
-                )}
-            </Button>
-            <Grid
-                container
-                direction='column'
-                justify='center'
-                alignItems='center'>
-                <Grid item style={{ width: '100%' }}>
-                    <Typography align='center' variant='h5'>
-                        Role
-                    </Typography>
-                </Grid>
+  return (
+    <Card style={classes.card_style}>
+      <Button
+        style={{ "margin-left": "400px" }}
+        disabled={loading}
+        variant="contained"
+        color="primary"
+        onClick={() => setEdit(edit)}
+      >
+        {isAdmin ? (
+          edit ? (
+            <div>Save</div>
+          ) : (
+            <div>Edit</div>
+          )
+        ) : (
+          <div>
+            Edit
+            <span style={{ margin: 5 }}>
+              <LockIcon style={{ fontSize: 12 }} />
+            </span>
+          </div>
+        )}
+      </Button>
+      <Grid container direction="column" justify="center" alignItems="center">
+        <Grid item style={{ width: "100%" }}>
+          <Typography align="center" variant="h5">
+            Role
+          </Typography>
+        </Grid>
 
-                <Grid item style={{ width: '100%' }}>
-                    {loading ? (
-                        <Fragment>
-                            <Skeleton
-                                variant='text'
-                                animation='wave'
-                                style={{ width: '100%' }}
-                            />
-                            <Skeleton
-                                variant='text'
-                                animation='wave'
-                                style={{ width: '100%' }}
-                            />
-                        </Fragment>
-                    ) : (
-                        <Fragment>
-                            {isAdmin ? (
-                                edit ? (
-                                    <TextareaAutosize
-                                        style={classes.text_area}
-                                        defaultValue={role}
-                                        rowsMin={4}
-                                    />
-                                ) : (
-                                    <p>{role}</p>
-                                )
-                            ) : (
-                                <p>{role}</p>
-                            )}
-                        </Fragment>
-                    )}
-                </Grid>
-            </Grid>
-        </Card>
-    );
+        <Grid item style={{ width: "100%" }}>
+          {loading ? (
+            <Fragment>
+              <Skeleton
+                variant="text"
+                animation="wave"
+                style={{ width: "100%" }}
+              />
+              <Skeleton
+                variant="text"
+                animation="wave"
+                style={{ width: "100%" }}
+              />
+            </Fragment>
+          ) : (
+            <Fragment>
+              {isAdmin ? (
+                edit ? (
+                  <TextareaAutosize
+                    style={classes.text_area}
+                    defaultValue={role}
+                    rowsMin={4}
+                  />
+                ) : (
+                  <p>{role}</p>
+                )
+              ) : (
+                <p>{role}</p>
+              )}
+            </Fragment>
+          )}
+        </Grid>
+      </Grid>
+    </Card>
+  );
 };
 
 //Prop types for checking the props passed. This would throw an error when no props are passed
 GroupRole.propTypes = {
-    stateData: PropTypes.shape({
-        role: PropTypes.string.isRequired,
-        loading: PropTypes.bool.isRequired,
-        edit: PropTypes.bool.isRequired,
-        isAdmin: PropTypes.bool.isRequired,
-    }),
-    setEdit: PropTypes.func.isRequired,
+  stateData: PropTypes.shape({
+    role: PropTypes.string.isRequired,
+    loading: PropTypes.bool.isRequired,
+    edit: PropTypes.bool.isRequired,
+    isAdmin: PropTypes.bool.isRequired,
+  }),
+  setEdit: PropTypes.func.isRequired,
 };
 
 export default GroupRole;

src/components/GroupDetail/PermissionsUI.jsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import Paper from "@material-ui/core/Paper";
 import { makeStyles } from "@material-ui/core/styles";
+import "./default.css";
 import Grid from "@material-ui/core/Grid";
 
 import Typography from "@material-ui/core/Typography";

src/components/GroupDetail/default.css

@@ -0,0 +1,3 @@
+/* .MuiPaper-root {
+  background-color: #fff !important;
+} */