Skip to content

Commit

Permalink
fixes tags, adds loading state
Browse files Browse the repository at this point in the history 
Co-authored-by: robpedersendev 40696979+robpedersendev@users.noreply.github.com
Co-authored-by: informagician 6990987+informagician@users.noreply.github.com
Co-authored-by: JameaKidrick 50430635+JameaKidrick@users.noreply.github.com
Co-authored-by: daisymesa 42687274+daisymesa@users.noreply.github.com
  • Loading branch information
@eileencuevas
eileencuevas committed Jan 3, 2020
1 parent 35fd6d0 commit 87c41b7
Show file tree
Hide file tree
Showing 6 changed files with 268 additions and 150 deletions.
90 changes: 38 additions & 52 deletions client/src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,16 +12,17 @@ class App extends React.Component {
super();
this.state = {
users: '',
filters: []
filters: [],
loading: true
};
}

componentDidMount() {
axios
.get(process.env.REACT_APP_APIKEY)
.then(res => {
console.log(res.data.records);
this.setState({
loading: false,
users: res.data.records.filter(
record => record.fields['Approved']
)
Expand Down Expand Up @@ -53,56 +54,41 @@ class App extends React.Component {
render() {
return (
<>
{this.state.users !== '' ? (
<div className="app">
<Sidebar
filters={this.state.filters}
handlesChanges={this.handlesChanges}
/>
<Route
exact
path="/"
render={props => (
<CardsContainer
{...props}
filters={this.state.filters}
users={this.state.users.filter(user => {
const program =
'Which program are you in?';
return this.state.filters.length > 0
? this.state.filters.includes(
user.fields[program]
)
: user;
})}
handlesChanges={this.handlesChanges}
removeFromFilter={this.removeFromFilter}
/>
)}
/>
<Route exact path="/about" component={About} />
</div>
) : (
<div className="app">
<Sidebar
filters={this.state.filters}
handlesChanges={this.handlesChanges}
/>
<Route
exact
path="/"
render={props => (
<CardsContainer
{...props}
filters={this.state.filters}
users={{}}
handlesChanges={this.handlesChanges}
removeFromFilter={this.removeFromFilter}
/>
)}
/>
</div>
)}
<div className="app">
<Sidebar
filters={this.state.filters}
handlesChanges={this.handlesChanges}
/>
<Route
exact
path="/"
render={props => (
<CardsContainer
{...props}
filters={this.state.filters}
users={
this.state.loading // are users being fetched?
? // pass down a string for conditional in component
'Loading'
: // else, pass down a filterable object array
this.state.users.filter(user => {
const program =
'Which program are you in?';
return this.state.filters.length >
0
? this.state.filters.includes(
user.fields[program]
)
: user;
})
}
handlesChanges={this.handlesChanges}
removeFromFilter={this.removeFromFilter}
/>
)}
/>
<Route exact path="/about" component={About} />
</div>
</>
);
}
Expand Down
80 changes: 68 additions & 12 deletions client/src/components/main/about.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React from 'react';
import { NavLink } from 'react-router-dom';

const About = () => {
return (
Expand Down Expand Up @@ -45,8 +46,15 @@ const About = () => {
time while enrolled within their program.{' '}
</p>
<p>
Inspired by <a href="">Latinx Who Design</a> by Pablo
Stanley{' '}
Inspired by{' '}
<a
href="https://www.latinxswhodesign.com"
rel="noopener noreferrer"
target="_blank"
>
Latinxs Who Design
</a>{' '}
by Pablo Stanley{' '}
</p>
</div>
<div className="about-info about-second-div">
Expand All @@ -61,45 +69,93 @@ const About = () => {
<ul>
<div>
<li>
<a href="">Eileen Cuevas</a> - Web Developer
<a
href="https://www.linkedin.com/in/eileen-cuevas/"
rel="noopener noreferrer"
target="_blank"
>
Eileen Cuevas
</a>{' '}
- Web Developer
</li>
<li>
<a href="">Daisy Mesa</a> - Web Developer
<a
href="https://www.linkedin.com/in/webdevdaisy/"
rel="noopener noreferrer"
target="_blank"
>
Daisy Mesa
</a>{' '}
- Web Developer
</li>
<li>
<a href="">Marc Dandoy</a> - UX/UI Designer
<a
href="https://www.linkedin.com/in/marcdandoy/"
rel="noopener noreferrer"
target="_blank"
>
Marc Dandoy
</a>{' '}
- UX/UI Designer
</li>
</div>
<div>
<li>
<a href="">Milo Rastgoo</a> - Web Developer
<a
href="https://www.linkedin.com/in/rastgoo/"
rel="noopener noreferrer"
target="_blank"
>
Milo Rastgoo
</a>{' '}
- Web Developer
</li>
<li>
<a href="">Jamea Kidrick</a> - Web Developer
<a
href="https://www.linkedin.com/in/jameakidrick/"
rel="noopener noreferrer"
target="_blank"
>
Jamea Kidrick
</a>{' '}
- Web Developer
</li>

<li>
<a href="">Laura Giron</a> - UX Designer /
Project Manager
<a
href=" https://www.linkedin.com/in/laurakgiron/"
rel="noopener noreferrer"
target="_blank"
>
Laura Giron
</a>{' '}
- UX Designer / Project Manager
</li>
</div>

<div>
<li>
<a href="">Robert Pedersen</a> - Web Developer
<a
href="https://www.linkedin.com/in/robpedersendev/"
rel="noopener noreferrer"
target="_blank"
>
Robert Pedersen
</a>{' '}
- Web Developer
</li>
</div>
</ul>
</div>
<hr className="divider" />
<div className="footer">
<a href="">
<NavLink exact to="/">
<h3>
<strong>
<span>&larr;</span> Back to Directory
</strong>
</h3>
</a>
</NavLink>
</div>
</div>
</main>
Expand Down
143 changes: 72 additions & 71 deletions client/src/components/main/cardsContainer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,81 +2,82 @@ import React from 'react';
import UserCard from './userCard';

const CardsContainer = props => {
if (props.users.length) {
return (
<main>
<div className="top">
{props.filters.includes('Android Development') ? (
<span>&#x2717; Android Developer</span>
) : (
<></>
)}
{props.filters.includes('Data Science') ? (
<span>&#x2717; Data Science</span>
) : (
<></>
)}
{props.filters.includes('iOS Development') ? (
<span>&#x2717; iOS Developer</span>
) : (
<></>
)}
{props.filters.includes('Web Development') ? (
<span>&#x2717; Web Developer</span>
) : (
<></>
)}
<div
className={
props.filters.includes('UX Design')
? ''
: 'inactive'
return (
<main>
<div className="top">
{props.filters.includes('Android Development') ? (
<span
className="tag"
onClick={() =>
props.removeFromFilter('Android Development')
}
>
&#x2717; Android Developer
</span>
) : (
<></>
)}
{props.filters.includes('Data Science') ? (
<span
className="tag"
onClick={() => props.removeFromFilter('Data Science')}
>
&#x2717; Data Science
</span>
) : (
<></>
)}
{props.filters.includes('iOS Development') ? (
<span
className="tag"
onClick={() =>
props.removeFromFilter('iOS Development')
}
>
&#x2717; iOS Developer
</span>
) : (
<></>
)}
{props.filters.includes('Web Development') ? (
<span
className="tag"
onClick={() =>
props.removeFromFilter('Web Development')
}
>
&#x2717; Web Developer
</span>
) : (
<></>
)}
{props.filters.includes('UX Design') ? (
<span
className="tag"
onClick={() => props.removeFromFilter('UX Design')}
>
&#x2717; UX Design
</div>
</div>
<div className="cards">
{props.users.map((user, index) => (
</span>
) : (
<></>
)}
</div>
<div className="cards">
{props.users === 'Loading' ? (
<h2 className="full-area">Loading...</h2> // have a loading screen while axios completes
) : props.users.length > 0 ? ( // if there are users, show them
props.users.map((user, index) => (
<UserCard key={index} data={user.fields} />
))}
</div>
</main>
);
} else {
return (
<main>
<div className="top">
{props.filters.includes('Android Development') ? (
<span>&#x2717; Android Developer</span>
) : (
<></>
)}
{props.filters.includes('Data Science') ? (
<span>&#x2717; Data Science</span>
) : (
<></>
)}
{props.filters.includes('iOS Development') ? (
<span>&#x2717; iOS Developer</span>
) : (
<></>
)}
{props.filters.includes('Web Development') ? (
<span>&#x2717; Web Developer</span>
) : (
<></>
)}
{props.filters.includes('UX Design') ? (
<span>&#x2717; UX Design</span>
) : (
<></>
)}
</div>
<div className="cards"></div>
</main>
);
}
))
) : (
// else, show that there are no users
<h2 className="full-area">
No users found for this criteria
</h2>
)}
</div>
</main>
);
};

export default CardsContainer;
Loading

0 comments on commit 87c41b7

Please sign in to comment.