From 8dbfcf025e7d96dd2ade71eb1fb8d703e5c826b0 Mon Sep 17 00:00:00 2001
From: s-katte <shubhamkatte99@gmail.com>
Date: Fri, 9 Oct 2020 07:33:17 +0530
Subject: [PATCH 1/2] Added github profile view in React

---
 src/components/Profile.js    | 114 +++++++++++++++++++++++++++++++++++
 src/containers/App/index.tsx |   4 +-
 src/routes/index.tsx         |   6 ++
 3 files changed, 122 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Profile.js

diff --git a/src/components/Profile.js b/src/components/Profile.js
new file mode 100644
index 0000000..e61c66c
--- /dev/null
+++ b/src/components/Profile.js
@@ -0,0 +1,114 @@
+import React, { useState, useEffect } from "react";
+
+function Profile() {
+  const [person, setPerson] = useState({});
+  let profname = "mohammed786";
+  useEffect(() => {
+    fetch("https://api.github.com/users/" + profname)
+      .then((res) => res.json())
+      .then((temp) => {
+        setPerson(temp);
+      });
+  }, []);
+  return (
+    <div>
+      <div className="ui container">
+        <h2 className="ui header" style={{ paddingTop: 10 }}>
+          <img alt="avatar" src={person.avatar_url} />
+          <div className="content izzuhead">
+            <span id="profnam2">{profname}</span>
+            <div className="sub header izzuhead">
+              <span id="fullname">{person.name}</span>&nbsp;
+              <a
+                href={`https://github.com/${profname}`}
+                target="_blank"
+                id="proflink"
+                rel="noopener noreferrer"
+              >
+                <i className="share icon" />
+              </a>
+            </div>
+          </div>
+        </h2>
+        <hr />
+        <div className="ui relaxed divided list">
+          <div className="item">
+            <i className="large address card middle aligned icon" />
+            <div className="content">
+              <div className="header izzuhead" id="useriden">
+                {person.id}
+              </div>
+              <div className="description izzuhead">Identity</div>
+            </div>
+          </div>
+          <div className="item">
+            <i className="large building middle aligned icon" />
+            <div className="content">
+              <div className="header izzuhead" id="compname">
+                {person.company}
+              </div>
+              <div className="description izzuhead">Company</div>
+            </div>
+          </div>
+          <div className="item">
+            <i className="large compass middle aligned icon" />
+            <div className="content">
+              <div className="header izzuhead" id="bloglink">
+                {person.blog}
+              </div>
+              <div className="description izzuhead">Portfolio</div>
+            </div>
+          </div>
+          <div className="item">
+            <i className="large search middle aligned icon" />
+            <div className="content">
+              <div className="header izzuhead" id="location">
+                {person.location}
+              </div>
+              <div className="description izzuhead">Location</div>
+            </div>
+          </div>
+          <div className="item">
+            <i className="large clone outline middle aligned icon" />
+            <div className="content">
+              <div className="header izzuhead" id="publrepo">
+                {person.public_repos}
+              </div>
+              <div className="description izzuhead">Public repositories</div>
+            </div>
+          </div>
+          <div className="item">
+            <i className="large bell middle aligned icon" />
+            <div className="content">
+              <div className="header izzuhead" id="follhere">
+                {person.followers}
+              </div>
+              <div className="description izzuhead">Followers</div>
+            </div>
+          </div>
+          <div className="item">
+            <i className="large microphone middle aligned icon" />
+            <div className="content">
+              <div className="header izzuhead" id="follther">
+                {person.following}
+              </div>
+              <div className="description izzuhead">Following</div>
+            </div>
+          </div>
+
+          <div className="item">
+            <i className="large plus circle middle aligned icon"></i>
+            <div className="content">
+              <div className="header izzuhead" id="makedate">
+                {person.created_at}
+              </div>
+              <div className="description izzuhead">Account created on</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Profile;
diff --git a/src/containers/App/index.tsx b/src/containers/App/index.tsx
index 94809ca..12e9e1e 100644
--- a/src/containers/App/index.tsx
+++ b/src/containers/App/index.tsx
@@ -10,7 +10,6 @@ interface AppState {}
 
 class App extends React.Component<AppProps, AppState> {
   render() {
-
     return (
       <React.Fragment>
         <Navigation
@@ -20,7 +19,8 @@ class App extends React.Component<AppProps, AppState> {
             { name: "Event", link: "/event" },
             { name: "Talk", link: "/talk" },
             { name: "Hackathon", link: "/hackathon" },
-            { name: "Open Source", link: "/opensource" }
+            { name: "Open Source", link: "/opensource" },
+            { name: "Profile", link: "/profile" },
           ]}
         />
         <Routes />
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index ad83307..34ec5fb 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -3,6 +3,7 @@ import { Redirect, Route, Switch } from "react-router-dom";
 import PrivateRoute from "./PrivateRoute";
 import Login from "../containers/Login";
 import Logout from "../containers/Logout";
+import Profile from "../components/Profile";
 
 const Event = React.lazy(() => import("../containers/Event"));
 const Hackathon = React.lazy(() => import("../containers/Hackathon"));
@@ -56,6 +57,11 @@ class Routes extends React.Component<RoutesProps, RoutesState> {
             <OpenSource />
           </React.Suspense>
         </PrivateRoute>
+        <PrivateRoute exact path="/profile">
+          <React.Suspense fallback={fallback}>
+            <Profile />
+          </React.Suspense>
+        </PrivateRoute>
 
         <Route exact path="/login" component={Login} />
         <Route exact path="/logout" component={Logout} />

From 45fe24864759a10bba84e6e7793877ced41c5a6a Mon Sep 17 00:00:00 2001
From: s-katte <shubhamkatte99@gmail.com>
Date: Fri, 9 Oct 2020 09:00:41 +0530
Subject: [PATCH 2/2] added last-modified field

---
 src/components/Profile.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/Profile.js b/src/components/Profile.js
index e61c66c..02eee29 100644
--- a/src/components/Profile.js
+++ b/src/components/Profile.js
@@ -95,7 +95,15 @@ function Profile() {
               <div className="description izzuhead">Following</div>
             </div>
           </div>
-
+          <div className="item">
+            <i className="large calendar outline middle aligned icon" />
+            <div className="content">
+              <div className="header izzuhead" id="modedate">
+                {person.updated_at}
+              </div>
+              <div className="description izzuhead">Last modified on</div>
+            </div>
+          </div>
           <div className="item">
             <i className="large plus circle middle aligned icon"></i>
             <div className="content">