bloominstituteoftechnology · kwnie · Feb 12, 2021 · Feb 12, 2021 · Feb 12, 2021 · Feb 12, 2021
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/github-user-card/.gitignore b/github-user-card/.gitignore
@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/github-user-card/package-lock.json b/github-user-card/package-lock.json
diff --git a/github-user-card/package.json b/github-user-card/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "github-user-card",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.11.9",
+    "@testing-library/react": "^11.2.5",
+    "@testing-library/user-event": "^12.7.0",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-scripts": "4.0.2",
+    "web-vitals": "^1.1.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/github-user-card/public/index.html b/github-user-card/public/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Github User Cards</title>
+</head>
+<body>
+    <div id="root"></div>
+</body>
+</html>
diff --git a/github-user-card/src/App.js b/github-user-card/src/App.js
@@ -0,0 +1,72 @@
+import React from 'react';
+import axios from 'axios';
+import User from './components/user';
+import Followers from './components/followers';
+import Search from './components/search';
+import { CssBaseline } from '@material-ui/core';
+import { StyledContainer, Heading, FollowersContainer } from './components/styles';
+
+class App extends React.Component {
+  constructor(){
+    super();
+    this.state = {
+      username: 'kwnie',
+      userData: [],
+      followers: []
+    }
+  };
+
+  componentDidMount = () => {
+    this.search(this.state.username)
+  };
+
+  componentDidUpdate = (prevProps, prevState) => {
+    if(prevState.userData !== this.state.userData){
+      console.log('userdata has changed')
+    }
+  };
+
+  search = username => {
+
+    axios.get(`https://api.github.com/users/${username}`)
+    .then(res => this.setState({
+      ...this.state,
+      userData: [res.data]
+    }))
+
+    axios.get(`https://api.github.com/users/${username}/followers`)
+      .then(res => this.setState({
+          ...this.state,
+          followers: res.data
+        })
+      )
+      .catch(err => console.log(err))
+  };
+
+  render(){
+    return (
+      <StyledContainer>
+        <CssBaseline />
+
+        <Heading>Github User Cards</Heading>
+
+        <Search search={this.search} />
+
+        {this.state.userData && this.state.userData.map((user, index) => {
+          return <User key={index} user={user}/>
+        })}
+
+        <Heading>Followers</Heading>
+
+        <FollowersContainer>
+          {this.state.followers && this.state.followers.map((follower, index) => {
+            return <Followers key={index} follower={follower} />
+          })}
+        </FollowersContainer>
+
+      </StyledContainer>
+    );
+  }
+}
+
+export default App;
diff --git a/github-user-card/src/components/followers.js b/github-user-card/src/components/followers.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import { StyledCard, FollowerAvatar, StyledCardContent, StyledTypography } from './styles';
+
+class Followers extends React.Component {
+  render(){
+
+    const { follower } = this.props;
+
+    return (
+        <StyledCard>
+          <StyledCardContent>
+
+            <FollowerAvatar src={follower.avatar_url} alt='avatar' />
+
+            <StyledTypography>{follower.login}</StyledTypography>
+
+          </StyledCardContent>
+        </StyledCard>
+    )
+  }
+}
+
+export default Followers;
diff --git a/github-user-card/src/components/search.js b/github-user-card/src/components/search.js
@@ -0,0 +1,45 @@
+import React from 'react';
+// import { SearchContainer } from './styles';
+// import { Input } from '@material-ui/core';
+// import SearchIcon from '@material-ui/icons/Search';
+
+class Search extends React.Component {
+
+  constructor() {
+    super();
+    this.state = {
+      username: ""
+    }
+  }
+
+  handleChange = (e) => {
+    this.setState({
+      ...this.state,
+      username: e.target.value
+    })
+  }
+
+  handleSubmit = (e) => {
+    e.preventDefault();
+    this.props.search(this.state.username);
+    this.setState({
+      ...this.state,
+      username: ""
+    })
+  }
+
+  render(){
+    return (
+      <form onSubmit={this.handleSubmit}>
+        {/* <SearchIcon /> */}
+        <input 
+          placeholder="Search…" 
+          onChange={this.handleChange} 
+          value={this.state.username} 
+          type="text" />
+      </form>
+    )
+  }
+};
+
+export default Search;
diff --git a/github-user-card/src/components/styles.js b/github-user-card/src/components/styles.js
@@ -0,0 +1,70 @@
+import { styled } from '@material-ui/core/styles';
+import { Container, Typography, Card, Avatar, FormControl } from '@material-ui/core';
+
+export const StyledContainer = styled(Container) ({
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    background: "url('https://cdn.pixabay.com/photo/2020/06/12/09/30/code-5289831_1280.jpg') no-repeat center center fixed", 
+    '-webkit-background-size': 'cover',
+    '-moz-background-size': 'cover',
+    '-o-background-size': 'cover',
+    backgroundSize: 'cover',
+    padding: 0,
+});
+
+export const FollowersContainer = styled(Container) ({
+    display: 'flex',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+});
+
+export const Heading = styled(Container) ({
+    backgroundColor: 'white',
+    width: '100%',
+    padding: '2%',
+    fontSize: '40px',
+    display: 'flex',
+    justifyContent: 'center',
+});
+
+export const StyledCard = styled(Card)({
+    width: '25%',
+    padding: '1%',
+    margin: '2%',
+});
+
+export const StyledCardContent = styled(Typography) ({
+    padding: '1%',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+})
+
+export const UserAvatar = styled(Avatar) ({
+    width: '60%',
+    height: '60%',
+})
+
+export const FollowerAvatar = styled(Avatar) ({
+    width: '30%',
+    height: '30%',
+})
+
+export const StyledTypography = styled(Typography) ({
+    fontSize: '18px',
+    padding: '5%',
+})
+
+export const SearchContainer = styled(FormControl) ({
+    backgroundColor: 'white',
+    width: '40%',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    padding: '1%',
+    margin: '3%',
+    outline: '1px solid'
+})
+
diff --git a/github-user-card/src/components/user.js b/github-user-card/src/components/user.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import { StyledCard, StyledCardContent, UserAvatar, StyledTypography } from './styles';
+import { Container } from '@material-ui/core';
+
+class User extends React.Component {
+  render(){
+
+    const { user } = this.props;
+
+    return (
+      <StyledCard>
+        <StyledCardContent>
+
+          <UserAvatar src={user.avatar_url} alt='avatar' />
+
+          <Container>
+            <StyledTypography>{user.name}</StyledTypography>
+            <StyledTypography>{user.login}</StyledTypography>
+            <StyledTypography>{user.bio}</StyledTypography>
+            <StyledTypography>{user.location}</StyledTypography>
+            <StyledTypography>Followers: {user.followers}</StyledTypography>
+            <StyledTypography>Following: {user.following}</StyledTypography>
+          </Container>
+
+
+        </StyledCardContent>
+      </StyledCard>
+    );
+  }
+}
+
+export default User;
diff --git a/github-user-card/src/index.js b/github-user-card/src/index.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+ReactDOM.render(
+    <App />,
+    document.getElementById('root')
+);
diff --git a/node_modules/.bin/loose-envify b/node_modules/.bin/loose-envify
diff --git a/node_modules/@babel/runtime/LICENSE b/node_modules/@babel/runtime/LICENSE
diff --git a/node_modules/@babel/runtime/README.md b/node_modules/@babel/runtime/README.md