LRHP: Changing Github Component

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "hp-app",
+  "name": "luizrosalba-personal-page",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
@@ -10,20 +10,23 @@
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
     "@types/react": "^17.0.3",
+    "axios": "^0.21.2",
     "bootstrap": "^5.0.1",
     "bootstrap-icons": "^1.5.0",
     "jquery": "^3.6.0",
     "mathjs": "^7.2.0",
-    "netlify-cli": "^2.71.0",
+    "netlify-cli": "^2.37.0",
     "popper.js": "^1.16.1",
     "re-resizable": "^6.6.1",
     "react": "^16.13.1",
+    "react-bootstrap": "^1.6.1",
     "react-dom": "^16.13.1",
     "react-google-charts": "^3.0.15",
     "react-multi-carousel": "^2.5.5",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.3",
+    "react-scripts": "^4.0.3",
     "react-scroll": "^1.8.1",
+    "react-tabs": "^3.2.2",
     "styled-components": "^5.2.3"
   },
   "scripts": {

providers.js

@@ -0,0 +1,17 @@
+import React from "react";
+import App from "./App";
+import { ResetCSS } from "./global/resetCSS";
+import GithubProvider from "./providers/github-provider";
+
+const Providers = () => {
+  return (
+    <main>
+      <GithubProvider>
+        <ResetCSS />
+        <App />
+      </GithubProvider>
+    </main>
+  );
+};
+
+export default Providers;

src/App.css

@@ -17,12 +17,12 @@ body {
 
   font-size: var(--normalSize);
   font-weight: var(--normalWeight);
-  background-color:#0C243C; /*fundo*/
+  background-color:black; /*fundo*/
 }
 
 .App-body{
   font-family: 'Roboto Condensed', sans-serif;
-  background-color:#0C243C; /*fundo*/
+  background-color:black; /*fundo*/
   margin-right: 1px;
 }
 

src/common/template/footer.js

@@ -4,7 +4,7 @@ export default class Footer extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      date: "30/05/2021"
+      date: "04/09/2021"
     };
   }
 

src/common/template/header.js

@@ -42,9 +42,9 @@ const Header = () => {
       </Link>
 
       <Link
-        to="/portfolio"
+        to="/certificados"
       >
-      {RenderButtonSelected("Portfólio", 3)}  
+      {RenderButtonSelected("Certificados", 3)}  
       </Link>
       </S.wrapperHeaderBig>
     );
@@ -55,23 +55,23 @@ const Header = () => {
         <Link
           to="/"
         >
-        <i class="bi bi-file-person"></i>
+        <i className="bi bi-file-person"></i>
         </Link>
         <Link
           to="/fisica"
         >
-        <i class="bi bi-book"></i>
+        <i className="bi bi-book"></i>
         </Link>
         <Link
           to="/programacao"
         >
-          <i class="bi bi-code-slash"></i>
+          <i className="bi bi-code-slash"></i>
         </Link>
 
         <Link
           to="/portfolio"
         >
-         <i class="bi bi-briefcase"></i>
+         <i className="bi bi-briefcase"></i>
         </Link>
       </S.wrapperHeaderSmall>
     );

src/components/header/index.js

@@ -0,0 +1,16 @@
+import React, { useState, useEffect } from "react";
+import * as S from "./styled";
+import useGithub from "../../hooks/github-hooks";
+
+const Header = () => {
+  const { getUser } = useGithub();
+  useEffect (()=>{
+    return getUser("luizrosalba");
+  }, [])
+  return (
+    <header>
+    </header>
+  );
+};
+
+export default Header;

src/components/header/styled.js

@@ -0,0 +1,34 @@
+import styled from "styled-components";
+
+export const Wrapper = styled.div`
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  padding: 4px;
+
+  input {
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    width: 100%;
+    height: 44px;
+    padding: 8px;
+    font-weight: 500;
+  }
+
+  button {
+    background-color: #225ed8;
+    padding: 8px 16px;
+    margin: 0 16px;
+    border-radius: 8px;
+
+    &:hover {
+      background-color: #2c5282;
+      box-shadow: 3px 2px 10px rgba(0, 0, 0, 0.2);
+    }
+
+    span {
+      font-weight: bold;
+      color: #ffff;
+    }
+  }
+`;

src/components/layout/index.js

@@ -0,0 +1,14 @@
+import React from "react";
+import Header from "../header";
+import * as S from "./styled";
+
+const Layout = ({ children }) => {
+  return (
+    <S.WrapperLayout>
+      <Header />
+      {children}
+    </S.WrapperLayout>
+  );
+};
+
+export default Layout;

src/components/layout/styled.js

@@ -0,0 +1,5 @@
+import styled from "styled-components";
+
+export const WrapperLayout = styled.section`
+  margin: 16px;
+`;

src/components/no-search/index.js

@@ -0,0 +1,12 @@
+import React from "react";
+import * as S from "./styled";
+
+const NoSearch = () => {
+  return (
+    <S.Wrapper>
+      <h1>Preencha o nome do usuário (username) do Github</h1>
+    </S.Wrapper>
+  );
+};
+
+export default NoSearch;

src/components/no-search/styled.js

@@ -0,0 +1,12 @@
+import styled from "styled-components";
+
+export const Wrapper = styled.div`
+  margin: 16px;
+  display: flex;
+  justify-content: center;
+
+  h1 {
+    font-weight: bold;
+    font-size: 32px;
+  }
+`;

src/components/not-found/index.js

@@ -0,0 +1,20 @@
+import React from "react";
+import * as S from "./styled";
+
+const NotFound = () => {
+  return (
+    <>
+      <S.Wrapper>
+        <h1>Ops...</h1>
+      </S.Wrapper>
+      <S.Wrapper>
+        <h2>O usuário não foi encontrado !</h2>
+      </S.Wrapper>
+      <S.Wrapper>
+        <h3>Ou você excedeu o limite de consultas ao Github em 1 hora. Tente mais tarde</h3>
+      </S.Wrapper>
+    </>
+  );
+};
+
+export default NotFound;

src/components/not-found/styled.js

@@ -0,0 +1,12 @@
+import styled from "styled-components";
+
+export const Wrapper = styled.div`
+  margin: 16px;
+  display: flex;
+  justify-content: center;
+
+  h1 {
+    font-weight: bold;
+    font-size: 32px;
+  }
+`;

src/components/profile/index.js

@@ -0,0 +1,64 @@
+import React from "react";
+import useGithub from "../../hooks/github-hooks";
+import * as S from "./styled";
+
+const Profile = () => {
+  const { githubState } = useGithub();
+
+  return (
+    <S.Wrapper>
+      <S.WrapperImage src={githubState.user.avatar} alt="Avatar of user" />
+      <S.WrapperInfoUser>
+        <div>
+          <h1>{githubState.user.name}</h1>
+          <S.WrapperUserGeneric>
+            <h3>Username:</h3>
+            <a
+              href={githubState.user.html_url}
+              target="_blank"
+              rel="noreferrer"
+            >
+              {githubState.user.login}
+            </a>
+          </S.WrapperUserGeneric>
+          {/* <S.WrapperUserGeneric>
+            <h3>Company:</h3>
+            <span>{githubState.user.company}</span>
+          </S.WrapperUserGeneric> */}
+          <S.WrapperUserGeneric>
+            <h3>Link para o Repositório:</h3>
+            <a href={"https://github.com/luizrosalba?tab=repositories"} target="_blank" rel="noreferrer">
+              Repositório do Github
+            </a>
+          </S.WrapperUserGeneric>
+        </div>
+        <S.WrapperStatusCount>
+          <div>
+            <h4>Seguidores</h4>
+            <span> {githubState.user.followers}</span>
+          </div>
+          <div>
+            <h4>{githubState.user.name} segue: </h4>
+            {
+              githubState.user.following<=1?
+                <span> {githubState.user.following} perfil</span> 
+              :
+              <span> {githubState.user.following} perfis</span> 
+            }
+
+          </div>
+          <div>
+            <h4>Gists</h4>
+            <span> {githubState.user.public_gists}</span>
+          </div>
+          <div>
+            <h4>Repositórios Públicos</h4>
+            <span> {githubState.user.public_repos}</span>
+          </div>
+        </S.WrapperStatusCount>
+      </S.WrapperInfoUser>
+    </S.Wrapper>
+  );
+};
+
+export default Profile;

src/components/profile/styled.js

@@ -0,0 +1,61 @@
+import styled from "styled-components";
+
+export const Wrapper = styled.div`
+  display: flex;
+  align-items: flex-start;
+`;
+
+export const WrapperInfoUser = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-left: 8px;
+  height: 200px;
+
+  h1 {
+    font-size: 32px;
+    font-weight: bold;
+  }
+
+  h3 {
+    font-size: 18px;
+    font-weight: bold;
+  }
+
+  h4 {
+    font-size: 16px;
+    font-weight: bold;
+  }
+`;
+
+export const WrapperStatusCount = styled.div`
+  display: flex;
+  align-items: center;
+  div {
+    margin: 8px;
+    text-align: center;
+  }
+`;
+
+export const WrapperUserGeneric = styled.div`
+  display: flex;
+  align-items: center;
+  margin-top: 8px;
+
+  h3 {
+    margin-right: 8px;
+  }
+
+  a {
+    font-size: 20px;
+    color: white;
+    font-weight: bold;
+  }
+`;
+
+export const WrapperImage = styled.img`
+  border-radius: 50%;
+  width: 200px;
+  margin: 8px;
+`;