Skip to content

Commit e40c199

Browse files
akashraj9828akashraj9828
committed
// To-Do
 // #1\ when search bar looses focus hide the search results // #2\ search bar present in left most side in desktop version // move to right // #3\ the weird sliding of search results when seach input goes out of focus // will be fixed by #1 // #4\ on initial load it show "no user found" until the api call completes // instead show loading // #5\ make a landing page with search feature // #6\ proper linking of listed repos and emails and git usernames // #7\ add few more detailed graphs (active on x week day) (contribution to projects other then own) // 8#\ simplify cacluation code. (I'll fix it.) // 9#\ handle the case if our api server is down 404,500 errors�:q#
1 parent e816814 commit e40c199

File tree

4 files changed

+98
-92
lines changed

4 files changed

+98
-92
lines changed

‎src/App.scss‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -243,8 +243,9 @@ button {
243243
background: #1a1a1b;
244244
max-height: 230px;
245245
width: 300px;
246-
border: solid 1px #24292f;
247-
overflow: hidden;
246+
border: solid 1px #24292f;
247+
// we want to enable scroll
248+
overflow: auto;
248249
border-bottom-left-radius: 4px;
249250
border-bottom-right-radius: 4px;
250251
top: 50px;

‎src/Components/Extras/Loader.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,6 @@ import React from "react"
22
export default{
33
text_loading: <i className="fa fa-spinner fa-pulse"></i>,
44
section_loading: <div className="p-5"> <i className="fa fa-spinner fa-pulse"></i> Loading...</div>,
5-
search_icon:<i class="fa fa-search" aria-hidden="true"></i>,
5+
search_icon:<i className="fa fa-search" aria-hidden="true"></i>,
66
user_not_found : <p className="text-center mt-4 text-muted">User not found on Github !</p>
77
}

‎src/Components/Header.js‎

Lines changed: 80 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
import React, { useState } from "react";
2-
import {ReactComponent as GitStatsLogo} from '../Images/logo.svg';
2+
import { ReactComponent as GitStatsLogo } from '../Images/logo.svg';
33
import DataProvider from "../Data-provider/index"
44
import ScrollToBottom from 'react-scroll-to-bottom';
55
import Loader from '../Components/Extras/Loader'
6-
import {DebounceInput} from 'react-debounce-input';
6+
import { DebounceInput } from 'react-debounce-input';
77

88
function Header() {
99
let [dayStatus, setTheme] = useState(true);
1010
let [imageUrl, setImageUrl] = useState("img/sun.png");
1111
let [searchUsers, setSearchUsers] = useState();
12-
const [searchString, setSearchString] = useState()
1312
let body = document.querySelector("body");
1413

1514
function changeTheme() {
@@ -23,87 +22,91 @@ function Header() {
2322
setTheme(!dayStatus);
2423
};
2524

26-
function openSearch(){
27-
let search = document.querySelector('.search-wrapper');
28-
if(search.classList.contains('open')){
29-
search.classList.remove('open')
30-
}
31-
else{
32-
search.classList.add('open')
33-
}
34-
25+
function openSearch() {
26+
let search = document.querySelector('.search-wrapper');
27+
if (search.classList.contains('open')) {
28+
search.classList.remove('open')
29+
}
30+
else {
31+
search.classList.add('open')
32+
// focus search bar when clicked too
33+
document.getElementById("search_bar").focus()
34+
}
3535
}
3636

37-
async function search(event){
38-
setSearchString(event.target.value)
39-
let result = await DataProvider.getSearchUsers(event.target.value);
40-
let users = result && result.map(user =>
41-
<li><a href={`/${user.login}`}><img src={user.avatar_url}/> {user.login}</a></li>
42-
);
43-
setSearchUsers(users);
37+
// To-Do
38+
// #1\ when search bar looses focus hide the search results
39+
// #2\ search bar present in left most side in desktop version // move to right
40+
// #3\ the weird sliding of search results when seach input goes out of focus // will be fixed by #1
41+
// #4\ on initial load it show "no user found" until the api call completes // instead show loading
42+
// #5\ make a landing page with search feature
43+
// #6\ proper linking of listed repos and emails and git usernames
44+
// #7\ add few more detailed graphs (active on x week day) (contribution to projects other then own)
45+
// 8#\ simplify cacluation code. (I'll fix it.)
46+
// 9#\ handle the case if our api server is down 404,500 errors
47+
48+
49+
async function search(event) {
50+
let result = await DataProvider.getSearchUsers(event.target.value);
51+
let users = result && result.map(user =>
52+
<li key={user.login}><a href={`/${user.login}`}><img src={user.avatar_url} alt={user.login}/> {user.login}</a></li>
53+
);
54+
setSearchUsers(users);
4455
}
4556

4657
return (
47-
<header>
48-
<div className="container">
49-
<nav className="navbar navbar-expand-lg">
50-
<a className="navbar-brand text-white logo" href="#">
51-
<GitStatsLogo height={30} />
52-
{/* <img src={process.env.PUBLIC_URL + "/cat-logo.png"} alt="" /> */}
53-
</a>
54-
<button
55-
className="navbar-toggler"
56-
type="button"
57-
data-toggle="collapse"
58-
data-target="#navbarNavDropdown"
59-
aria-controls="navbarNavDropdown"
60-
aria-expanded="false"
61-
aria-label="Toggle navigation"
62-
>
63-
<span className="navbar-toggler-icon"></span>
64-
</button>
65-
<div className=" navbar-collapse" id="navbarNavDropdown">
66-
<button onClick={openSearch} className="search_icon">{Loader.search_icon}</button>
67-
<ul className="navbar-nav ml-auto">
68-
<li className="nav-item active active nav-item position-relative search-wrapper">
69-
<a className="nav-link text-light-gray">
70-
<DebounceInput
71-
minLength={2}
72-
debounceTimeout={500}
73-
className="search"
74-
placeholder="Search..."
75-
onChange={search}
76-
/>
77-
</a>
78-
{searchUsers && (
79-
<div className="Search-result">
80-
<ul className="search-result">
81-
<ScrollToBottom>
82-
{searchUsers.length > 0
83-
? searchUsers
84-
: Loader.user_not_found}
85-
</ScrollToBottom>
86-
</ul>
58+
<header>
59+
<div className="container">
60+
<nav className="navbar navbar-expand-lg">
61+
<a className="navbar-brand text-white logo">
62+
<GitStatsLogo height={30} />
63+
{/* <img src={process.env.PUBLIC_URL + "/cat-logo.png"} alt="" /> */}
64+
</a>
65+
<div className="" id="navbarNavDropdown">
66+
<button onClick={openSearch} className="search_icon">{Loader.search_icon}</button>
67+
<ul className="navbar-nav ml-auto">
68+
<li className="nav-item active active nav-item position-relative search-wrapper">
69+
<a className="nav-link text-light-gray">
70+
<DebounceInput
71+
minLength={2}
72+
debounceTimeout={500}
73+
className="search"
74+
placeholder="Search..."
75+
onChange={search}
76+
id="search_bar"
77+
/>
78+
</a>
79+
{searchUsers && (
80+
<div className="Search-result">
81+
<ul className="search-result">
82+
{/*No Need to scroll to bottom */}
83+
{/* best match is always at top */}
84+
{/* <ScrollToBottom> */}
85+
{searchUsers.length > 0
86+
? searchUsers
87+
: Loader.user_not_found}
88+
{/* </ScrollToBottom> */}
89+
</ul>
90+
</div>
91+
)}
92+
</li>
93+
<li className="mobile-theme">
94+
<div className="change-theme mt-2 font-size-13">
95+
<button onClick={changeTheme}>
96+
<img
97+
className="mr-1"
98+
src={process.env.PUBLIC_URL + imageUrl}
99+
alt=""
100+
/>
101+
<span className="d-none d-lg-inline-block d-sm-inline-block">{dayStatus ? "Night Mode" : "Day Mode"}</span>
102+
</button>
103+
</div>
104+
</li>
105+
</ul>
87106
</div>
88-
)}
89-
</li>
90-
<li className="mobile-theme">
91-
<div className="change-theme mt-2 font-size-13">
92-
<button onClick={changeTheme}>
93-
<img
94-
className="mr-1"
95-
src={process.env.PUBLIC_URL + imageUrl}
96-
alt=""
97-
/>
98-
<span className="d-none d-lg-inline-block d-sm-inline-block">{dayStatus ? "Night Mode" : "Day Mode"}</span>
99-
</button>
100-
</div>
101-
</li>
102-
</ul>
107+
</nav>
103108
</div>
104-
</nav>
105-
</div>
106-
</header>
109+
</header>
107110
);
108111
};
109112

‎src/Components/Views/BasicInfo.js‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,14 @@ function BasicInformation(props) {
1313
<section className="pt-5 text-center">
1414
<div className="card p-4 rounded">
1515
<div className="row">
16-
<div className="left-image-avtar">
17-
<div className="member-image">
18-
<img src={userInfo.avatarUrl} alt={userInfo.login} />
19-
</div>
16+
<div className="col-md-2">
17+
{/* <div className="left-image-avtar"> */}
18+
{/* <div className="member-image"> */}
19+
<img className="img-fluid img" style={{minWidth:130,maxWidth:150,height:"auto"}} src={userInfo.avatarUrl} alt={userInfo.login} />
20+
{/* </div> */}
21+
{/* </div> */}
2022
</div>
21-
<div className="col-sm-5 text-left">
23+
<div className="col-md-5 text-left">
2224
<div className="user-details pl-2">
2325
<h2 className="font-size-21 mb-0 mt-3 mt-lg-0 mt-sm-0">{userInfo.name} </h2>
2426
{userInfo.isDeveloperProgramMember ? <img className="mr-2" style={{ width: 20 }} alt="DeveloperProgramMember" src={process.env.PUBLIC_URL + "/img/dev.png"} /> : ""}
@@ -40,23 +42,23 @@ function BasicInformation(props) {
4042
</p>
4143
</div>
4244
</div>
43-
<div className="col-sm-5 mt-4 mt-lg-0 mt-sm-0 following-area">
45+
<div className="col-md-5 mt-4 mt-lg-0 mt-sm-0 following-area">
4446

4547
<div className="row">
46-
<div className="col">
48+
<div className="col-4">
4749
<p className="text-center m-0">
4850
{userInfo.followers.totalCount}
4951
</p>
5052
<span>Followers</span>
5153
</div>
52-
<div className="col">
54+
<div className="col-4">
5355
<p className="text-center m-0">
5456
{userInfo.following.totalCount}
5557
</p>
5658
<span>Following</span>
5759
</div>
5860

59-
<div className="col">
61+
<div className="col-4">
6062
<p className="text-center m-0">
6163
{userInfo.repositories.totalCount}
6264
</p>
@@ -65,20 +67,20 @@ function BasicInformation(props) {
6567
</div>
6668

6769
<div className="row pt-3">
68-
<div className="col">
70+
<div className="col-4">
6971
<p className="text-center m-0">
7072
{calculateData.totalCommit!==undefined ? calculateData.totalCommit : Loader.text_loading}
7173
</p>
7274
<span>Commits</span>
7375
</div>
74-
<div className="col">
76+
<div className="col-4">
7577
<p className="text-center m-0">
7678
{calculateData.totalStar!==undefined ? calculateData.totalStar : Loader.text_loading}
7779
</p>
7880
<span>Stars</span>
7981
</div>
8082

81-
<div className="col">
83+
<div className="col-4">
8284
<p className="text-center m-0">
8385
{calculateData.totalFork!==undefined ? calculateData.totalFork : Loader.text_loading}
8486
</p>

0 commit comments

Comments
 (0)