Merge pull request #11 from TechOUs/dev

Updated the UI and done some fixes

Author: GauravWalia19

README.md

@@ -6,7 +6,6 @@ Website for the users to search whether they have qualified for the hacktober fe
 ![GitHub package.json version](https://img.shields.io/github/package-json/v/TechOUs/HacktoberFest20)
 ![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/TechOUs/HacktoberFest20)
 ![Lines of code](https://img.shields.io/tokei/lines/github/TechOUs/HacktoberFest20)
-![Website](https://img.shields.io/website?down_color=red&down_message=offline&up_color=blue&up_message=online&url=https%3A%2F%2Fhacktoberfest20.tech)
 
 ![GitHub pull requests](https://img.shields.io/github/issues-pr-raw/TechOUs/HacktoberFest20)
 ![GitHub closed pull requests](https://img.shields.io/github/issues-pr-closed-raw/TechOUs/HacktoberFest20)
@@ -17,6 +16,14 @@ Website for the users to search whether they have qualified for the hacktober fe
 ![GitHub Repo stars](https://img.shields.io/github/stars/TechOUs/HacktoberFest20?style=social)
 ![GitHub watchers](https://img.shields.io/github/watchers/TechOUs/HacktoberFest20?style=social)
 
+Check this out at
+
+[![Website](https://img.shields.io/website?down_color=red&down_message=offline&up_color=blue&up_message=www.hacktoberfest20.tech&url=http%3A%2F%2Fwww.hacktoberfest20.tech)](http://www.hacktoberfest20.tech)
+
+or
+
+[![Website](https://img.shields.io/website?down_color=red&down_message=offline&up_color=blue&up_message=https://hacktoberfest20.herokuapp.com&url=https%3A%2F%2Fhacktoberfest20.herokuapp.com)](https://hacktoberfest20.herokuapp.com)
+
 ## Code Of Conduct
 
 We are following [**Contributor Covenant Code of Conduct**](.github/CODE_OF_CONDUCT.md).

client/src/components/common/PrStatusIcon.js

@@ -0,0 +1,27 @@
+import React from 'react'
+
+const PrStatusIcon = (props) => {
+    
+    switch(props.prStatus){
+        case 'right':
+            return (
+                <span style={{color: 'green',fontSize: '20px'}} title="Approved Pull Request">
+                    <i className="fas fa-check-circle"></i>
+                </span>
+            );
+        case 'wrong':
+            return (
+                <span style={{color: 'red', fontSize: '20px'}} title="Rejected Pull Request">
+                    <i className="fas fa-times-circle"></i>
+                </span>
+            );
+        default:
+            return (
+                <span style={{color: '#5b6987', fontSize: '20px'}} title="Pending Pull Request">
+                    <i className="fas fa-exclamation-circle"></i>
+                </span>
+            );
+    }
+}
+
+export default PrStatusIcon;

client/src/components/common/ProgressProfile.js

@@ -4,7 +4,7 @@ const ProgressProfile = (props) => {
     const [statement, setStatement] = useState('No Data Found !');
 
     useEffect(() => {
-        switch (props.apiData.total_count) {
+        switch (props.apiData.valid_count) {
             case 0:
                 setStatement('Too far Away !');
                 break;
@@ -21,29 +21,25 @@ const ProgressProfile = (props) => {
                 setStatement('Goal Achieved !');
                 break;
             default:
-                if (props.apiData.total_count > 4) {
+                if (props.apiData.valid_count > 4) {
                     setStatement('Now You are Showing Off !');
                 }
                 break;
         }
-    }, [props.apiData.total_count]);
+    }, [props.apiData.valid_count]);
 
     return (
         <div className="progressProfile">
             <div className="inlineProfile">
                 <img
-                    src={
-                        props.apiData.total_count > 0
-                            ? props.apiData.items[0].user.avatar_url
-                            : ''
-                    }
+                    src={props.apiData.items[0].user.avatar_url}
                     alt="profile"
                 />
                 <p>{props.apiData.items[0].user.login}</p>
             </div>
             <div className="inlineProfile">
                 <p>
-                    <span>{props.apiData.total_count}</span> / 4
+                    <span>{props.apiData.valid_count}</span> / 4
                 </p>
                 <p>{statement}</p>
             </div>

client/src/components/common/RepoList.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import NoData from './NoData';
 import PrIcon from './PrIcon';
+import PrStatusIcon from '../common/PrStatusIcon';
 
 const RepoList = ({ apiData }) => {
     const getRepoDate = (date) => {
@@ -10,27 +11,25 @@ const RepoList = ({ apiData }) => {
             .replace('GMT+0530 (India Standard Time)', '');
     };
 
-    if (apiData.total_count > 0) {
-        return apiData.items.map((repo) => (
-            <div key={repo.id} className="repoDiv">
-                <h4>
-                    <PrIcon state={repo.state} />
-                    {repo.repository_url.replace(
-                        'https://api.github.com/repos/',
-                        ''
-                    )}
-                </h4>
-                <p>{repo.title}</p>
-                <p>
-                    <i className="far fa-clock"></i>
-                    {' '}
-                    {getRepoDate(repo.created_at)}
-                </p>
-            </div>
-        ));
-    } else {
-        return <NoData apiData={apiData} message="No Data Found !" />;
-    }
+    return apiData.items.map((repo) => (
+        <div key={repo.id} className="repoDiv">
+            <h4>
+                <PrIcon state={repo.state} />
+                {repo.repository_url.replace(
+                    'https://api.github.com/repos/',
+                    ''
+                )}
+            </h4>
+            <p>
+                <PrStatusIcon prStatus={repo.prStatus} />
+                {'  '}
+                {repo.title}
+            </p>
+            <p>
+                <i className="far fa-clock"></i> {getRepoDate(repo.created_at)}
+            </p>
+        </div>
+    ));
 };
 
 export default RepoList;

client/src/components/pages/Progress.js

@@ -33,10 +33,10 @@ const Progress = () => {
     }
 
     const handleUserData = () => {
-        if(apiData.status===200){
+        if(apiData.status===200 && apiData.total_count>0){
             return (<ProgressData apiData={apiData}/>);
         }else{
-            return (<NoData apiData={apiData}/>);
+            return (<NoData apiData={apiData} message="No Data Found !"/>);
         }
     }
 

client/src/components/styles/Footer.css

@@ -32,6 +32,18 @@
     margin-bottom: 20px;
 }
 
+/* for mi phone browsers */
+@media screen and (max-width: 377px){
+    .techousFooter > div,
+    .techousFooter > h2{
+        width: 40%;
+    }
+    .techousLinks{
+        margin-left: 30px;
+        margin-right: 30px;
+        margin-bottom: 50px;
+    }
+}
 
 @media screen and (min-width: 605px){
     .techousFooter{

client/src/components/styles/MainPage.css

@@ -44,6 +44,13 @@
     margin-top: 40%;
 }
 
+/* for mi phone browsers */
+@media screen and (max-width: 360px) and (max-height: 562px){
+    #mainPage{
+        padding-top: 15%;
+    }
+}
+
 @media screen and (max-width: 964px){
     #hacktoberFestLeft,
     #hacktoberFestRight{

client/src/components/styles/Progress.css

@@ -36,6 +36,13 @@
     cursor: pointer;
 }
 
+/* for mi phone browsers */
+@media screen and (max-width: 404px){
+    .progressInputDiv > input{
+        width: 65%;
+    }
+}
+
 @media screen and (min-width: 605px){
     #checkProgress > h1{
         margin-left: 9%;