completed basic user dashboard

src/App.js

@@ -12,7 +12,7 @@ import './App.css';
 class App extends Component {
   state = {
     isRegistering: false,
-    isLoggedIn: false
+    isLoggedIn: localStorage.getItem('jwt') ? true : false
     }
 
     headBtnSubmitted = (e) => {
@@ -82,6 +82,8 @@ class App extends Component {
     }
 }
   render() {
+    console.log(this.state)
+
     return (
       <>
       <Header headBtnSubmitted={this.headBtnSubmitted} logoutBtnClicked={this.logoutBtnClicked} formBtnClicked={this.formBtnClicked} isLoggedIn={this.state.isLoggedIn} isRegistering={this.state.isRegistering}/>

src/routes/Dashboards/Dashboard.css

@@ -16,4 +16,17 @@
 }
 .userData {
     width: 50%;
+}
+#lineChart {
+    width: 500px;
+}
+#Sunday {
+    width: 50px
+}
+
+.langInfo {
+    display: flex;
+}
+#langInfo--lang {
+    margin-right: 10px;
 }

src/routes/Dashboards/DashboardView.js

@@ -33,7 +33,8 @@ class DashboardView extends Component {
                     ...this.state,
                     isLoading: false,
                     data: res.data.data,
-                    userInfo: res.data.userInfo
+                    userInfo: res.data.userInfo,
+                    langs: [res.data.langs]
                 })
                 console.log(this.state)
             })
@@ -55,7 +56,7 @@ class DashboardView extends Component {
             <SearchComponent isLoading={this.state.isLoading}search={this.state.search} handleChanges={this.handleChanges} handleSubmit={this.handleSubmit}/>
             <div className='userContent'>
                 <UserInfoComponent handleGHSubmitted={this.handleGHSubmitted} userInfo={this.state.userInfo}/>
-                <UserDataComponent data={this.state.data} userInfo={this.state.userInfo} />
+                <UserDataComponent langs={this.state.langs} data={this.state.data} userInfo={this.state.userInfo} />
             </div>
             </>
         )

src/routes/Dashboards/UserDataChartComponent.js

@@ -0,0 +1,98 @@
+import React from "react";
+import { LineChart } from "react-easy-chart";
+import Tabs from '@material-ui/core/Tabs';
+import Tab from '@material-ui/core/Tab';
+
+class UserDataChartComponent extends React.Component {
+  state = {
+    Sunday: [],
+    Monday: [],
+    Tuesday: [],
+    Wednesday: [],
+    Thursday: [],
+    Friday: [],
+    Saturday: []
+  };
+  componentDidMount() {
+    const Sunday = [];
+    const Monday = [];
+    const Tuesday = [];
+    const Wednesday = [];
+    const Thursday = [];
+    const Friday = [];
+    const Saturday = [];
+
+    Object.entries(this.props.data).forEach(([el, key]) => {
+      const { Day, Hour, Commits } = key;
+      const chart = { x: parseInt(Hour) + 1, y: parseInt(Commits) };
+
+      if (Day === "0") {
+        Sunday.push(chart);
+      } else if (Day === "1") {
+        Monday.push(chart);
+      } else if (Day === "2") {
+        Tuesday.push(chart);
+      } else if (Day === "3") {
+        Wednesday.push(chart);
+      } else if (Day === "4") {
+        Thursday.push(chart);
+      } else if (Day === "5") {
+        Friday.push(chart);
+      } else if (Day === "6") {
+        Saturday.push(chart);
+      }
+      return Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday;
+    });
+    this.setState({
+      ...this.state,
+      Sunday: Sunday,
+      Monday: Monday,
+      Tuesday: Tuesday,
+      Wednesday: Wednesday,
+      Thursday: Thursday,
+      Friday: Friday,
+      Saturday: Saturday,
+      selected: Wednesday
+    });
+  }
+  tabSelected = (e) => {
+      e.preventDefault();
+          this.setState({
+          ...this.state,
+          selected: this.state[e.target.textContent]
+      })
+  }
+  render() {
+    console.log(this.state);
+    if (this.state.selected) {
+      return (
+        <>
+          <div>
+            <Tabs    
+>
+              <Tab onClick={(e) => this.tabSelected(e)} style={{ minWidth: 50 }} label="Sunday" />
+              <Tab onClick={(e) => this.tabSelected(e)} style={{ minWidth: 50 }}  label="Monday" />
+              <Tab onClick={(e) => this.tabSelected(e)} style={{ minWidth: 50 }}  label="Tuesday" />
+              <Tab onClick={(e) => this.tabSelected(e)} style={{ minWidth: 50 }}  label="Wednesday" />
+              <Tab onClick={(e) => this.tabSelected(e)} style={{ minWidth: 50 }}  label="Thursday" />
+              <Tab onClick={(e) => this.tabSelected(e)} style={{ minWidth: 50 }}  label="Friday" />
+              <Tab onClick={(e) => this.tabSelected(e)} style={{ minWidth: 50 }} label="Saturday" />
+            </Tabs>
+          </div>
+          <LineChart
+            axes
+            axisLabels={{ x: "Time", y: "Num of Commits" }}
+            width={550}
+            height={300}
+            interpolate={"cardinal"}
+            data={[this.state.selected]}
+          />
+        </>
+      );
+    } else {
+      return <h3>Please select a date</h3>;
+    }
+  }
+}
+
+export default UserDataChartComponent;

src/routes/Dashboards/UserDataComponent.js

@@ -1,33 +1,29 @@
 import React from "react";
-
+import './UserDataChartComponent';
 import Card from "@material-ui/core/Card";
 import CardActions from "@material-ui/core/CardActions";
 import CardContent from "@material-ui/core/CardContent";
-
+import UserDataLangComponent from './UserDataLangComponent';
 import Typography from "@material-ui/core/Typography";
+import UserDataChartComponent from "./UserDataChartComponent";
 
 function UserDataComponent(props) {
+    console.log(props)
   if (props.data) {
     return (
       <Card className="userData">
         <CardContent>
-          <Typography color="textSecondary" gutterBottom>
-            Word of the Day
-          </Typography>
+          <UserDataChartComponent data={props.data} />
           <Typography variant="h5" component="h2">
-            be nev lent
-          </Typography>
-          <Typography color="textSecondary">adjective</Typography>
-          <Typography component="p">
-            well meaning and kindly.
-            <br />
-            {'"a benevolent smile"'}
+            Languages
           </Typography>
+
+          <Typography color="textSecondary">most commonly used</Typography>
+          <hr/>
+          {props.langs.length > 0 && <UserDataLangComponent langs={[props.langs]}/>}
         </CardContent>
         <CardActions>
-          <Typography variant="h5" component="h2">
-            languages
-          </Typography>{" "}
+
         </CardActions>
       </Card>
     );

src/routes/Dashboards/UserDataLangComponent.js

@@ -0,0 +1,34 @@
+import React from "react";
+import Typography from "@material-ui/core/Typography";
+
+function UserDataLangComponent(props) {
+  console.log();
+  if (props.langs.length > 0) {
+    const lang = [];
+    Object.entries(props.langs[0][0]).forEach((el, key) => {
+      const obj = { language: el[0], repositories: el[1] };
+      return lang.push(obj);
+    });
+    console.log(lang);
+    return (
+      <>
+        {lang.map(el => {
+          return (
+            <div className='langInfo'>
+              <Typography  id='langInfo--lang' variant="subtitle2"  gutterBottom>
+                {el.language}
+              </Typography>
+
+
+              <Typography color="textSecondary">Repositories: {el.repositories}</Typography>
+            </div>
+          );
+        })}
+      </>
+    );
+  } else {
+    return <h1>Cibbe</h1>;
+  }
+}
+
+export default UserDataLangComponent;