-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2 from Le-Cache/eileen-cuevas
adds new components; adds data for users
- Loading branch information
Showing
7 changed files
with
124 additions
and
6 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,47 @@ | ||
| import React from 'react'; | ||
| import axios from 'axios'; | ||
| import CardsContainer from './components/main/cardsContainer'; | ||
| import './App.css'; | ||
|
|
||
| function App() { | ||
| return ( | ||
| <div className="App"> | ||
| <p>Hello</p> | ||
| </div> | ||
| ); | ||
| /* | ||
| App | ||
| -Sidebar | ||
| --Logo (not a component) | ||
| --Tract Selection Filter...thing | ||
| --Navigation (About, Airtable, Slack) | ||
| -Main Card Thing | ||
| --Cards Component (house all the cards/introduce pagination) | ||
| ---Individual card component | ||
| */ | ||
|
|
||
| class App extends React.Component { | ||
| constructor() { | ||
| super(); | ||
| this.state = { | ||
| users: '' | ||
| }; | ||
| } | ||
|
|
||
| componentDidMount() { | ||
| axios | ||
| .get( | ||
| 'https://api.airtable.com/v0/appaTBcrHMzJR6ZnS/lecache?api_key=keyXAJzv0BQkXWbI8' | ||
| ) | ||
| .then(res => { | ||
| console.log(res.data.records); | ||
| this.setState({ users: res.data.records }); | ||
| // console.log(res.data.records[0].fields['First Name']); | ||
| }) | ||
| .catch(error => console.log(error)); | ||
| } | ||
|
|
||
| render() { | ||
| return ( | ||
| <div className="App"> | ||
| <CardsContainer users={this.state.users} /> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default App; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| import React from 'react'; | ||
| import UserCard from './userCard'; | ||
|
|
||
| const CardsContainer = props => { | ||
| if (props.users.length) { | ||
| return ( | ||
| <div> | ||
| {props.users.map((user, index) => ( | ||
| <UserCard key={index} data={user.fields} /> | ||
| ))} | ||
| </div> | ||
| ); | ||
| } else { | ||
| return <div>Loading...</div>; | ||
| } | ||
| }; | ||
|
|
||
| export default CardsContainer; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import React from 'react'; | ||
|
|
||
| const UserCard = props => { | ||
| /*Field Names*/ | ||
| const firstName = 'First Name'; | ||
| const lastName = 'Last Name'; | ||
| const program = 'Which program are you in?'; | ||
| const bio = 'Bio'; | ||
| const linkedIn = 'LinkedIn URL'; | ||
| const twitter = 'Twitter URL'; | ||
| const github = 'GitHub URL'; | ||
| const portfolio = 'Portfolio URL'; | ||
| const location = 'Where are you located?'; | ||
| const profilePic = 'Profile Picture'; | ||
|
|
||
| return ( | ||
| <div> | ||
| {props.data[profilePic] ? ( | ||
| <img src={props.data[profilePic][0].url} /> | ||
| ) : ( | ||
| <></> | ||
| )} | ||
| <p> | ||
| {props.data[firstName]} {props.data[lastName]} | ||
| </p> | ||
| <p>{props.data[program]}</p> | ||
| <p>{props.data[location]}</p> | ||
| <p>{props.data[bio]}</p> | ||
| <p>{props.data[linkedIn]}</p> | ||
| {props.data[twitter] ? <p>{props.data[twitter]}</p> : <></>} | ||
| {props.data[github] ? <p>{props.data[github]}</p> : <></>} | ||
| {props.data[portfolio] ? <p>{props.data[portfolio]}</p> : <></>} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default UserCard; |
Empty file.
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters