Last active
February 9, 2019 04:32
-
-
Save dhasvold/4bef70bf98eef90da2eeec4426b63186 to your computer and use it in GitHub Desktop.
UCI React Workshop
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
Git remote add upstream https://github.com/dhasvold/health-inspector.git | |
Git fetch upstream | |
Git rebase upstream/day3-prep | |
Npm install | |
Npm start | |
#############ResultsList.css############### | |
.results-list-container { | |
width: 100%; | |
padding-top: 10px; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
} | |
.results-list-container > h2 { | |
padding: 10px; | |
text-align: center; | |
} | |
.loading-gif { | |
width: 300px; | |
} | |
.results-list { | |
display: flex; | |
flex-direction: column; | |
width: 80%; | |
justify-content: center; | |
align-items: center; | |
} | |
.no-results-found { | |
display: flex; | |
flex-direction: row; | |
flex-wrap: wrap; | |
align-items: center; | |
justify-content: center; | |
padding: 10px; | |
} | |
.no-results-found img { | |
flex: 1 0 50%; | |
max-width: 500px; | |
} | |
.no-results-found h2 { | |
flex: 1 0 50%; | |
} | |
img.arrow { | |
margin: 5px; | |
} | |
##############ListItem.css############################ | |
.result-list-item-container { | |
display: flex; | |
height: 100px; | |
width: 100%; | |
max-width: 900px; | |
padding-left: 15px; | |
padding-right: 15px; | |
flex-direction: column; | |
background-color: #FBFBFB; | |
box-shadow: 0px 5px 10px -3px rgba(0,0,0,0.75); | |
margin: 2px; | |
cursor: pointer; | |
transition: height .5s; | |
} | |
.result-list-item-container-large { | |
height: 300px; | |
} | |
.result-list-item { | |
display: flex; | |
flex-direction: row; | |
flex: 0 0 100px; | |
} | |
.result-list-item-description { | |
display: flex; | |
flex: 0 1 80%; | |
flex-direction: column; | |
} | |
.result-list-item-description h2 { | |
text-overflow: ellipsis; | |
overflow-x:hidden; | |
max-width: 450px; | |
white-space: nowrap; | |
} | |
@media(max-width: 450px) { | |
.result-list-item-description h2 { | |
max-width: 235px; | |
} | |
} | |
.result-list-item-description p { | |
font-size: .85em; | |
margin-top: 0; | |
margin-bottom: 0; | |
} | |
.result-list-item-badge { | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
flex: 0 1 20%; | |
} | |
.result-list-item-more-icon { | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
font-size: 40px; | |
transition: transform .6s; | |
} | |
@media(max-width: 450px) { | |
.result-list-item-more-icon { | |
font-size: 25px; | |
} | |
} | |
.rotated { | |
transform: rotate(180deg) | |
} | |
.result-list-item-more { | |
opacity: 0; | |
overflow-y: scroll; | |
animation: fadeIn .5s .3s forwards; | |
} | |
@keyframes fadeIn { | |
from { | |
opacity: 0; | |
} | |
to { | |
opacity: 1; | |
} | |
} | |
.result-list-item-more h3 { | |
margin-bottom: 0; | |
font-weight: 300; | |
text-decoration: underline; | |
} | |
.result-list-item-more-violation-container h4 { | |
margin-top: 0; | |
margin-bottom: 0; | |
font-weight: 400; | |
font-style: italic; | |
} | |
.result-list-item-more-violation-container p { | |
padding-left: 10px; | |
} | |
#####################More List Item Stuff ########################## | |
let name = this.props.restaurant.aka_name | |
? this.props.restaurant.aka_name | |
: this.props.restaurant.db_name | |
name = name.toLowerCase() | |
name = `${name.substring(0, 1).toUpperCase()}${name.substring(1)}` | |
const date = moment(this.props.restaurant.inspection_date) | |
const containerClasses = this.state.showMore | |
? 'result-list-item-container result-list-item-container-large' | |
: 'result-list-item-container' | |
const iconClass = this.state.showMore | |
? 'result-list-item-more-icon rotated' | |
: 'result-list-item-more-icon' | |
###################index.js##################################### | |
import React from 'react'; | |
import ReactDOM from 'react-dom'; | |
import './index.css'; | |
import registerServiceWorker from './registerServiceWorker'; | |
import Search from './components/Search/Search' | |
import Nav from './components/Nav/Nav' | |
import {BrowserRouter as Router, Route} from 'react-router-dom' | |
import ResultsList from './components/ResultsList/ResultsList' | |
class App extends React.Component { | |
constructor() { | |
super() | |
this.state = { | |
searched: false, | |
results: [], | |
loading: false, | |
} | |
} | |
updateSearchTerm = (searchTerm) => { | |
if (searchTerm.length === 0) { | |
return null | |
} else { | |
this.setState({loading: true}) | |
this.getSearchData(searchTerm).then((data) => { | |
this.setState({ | |
searched: true, | |
loading: false, | |
results: data | |
}) | |
}) | |
} | |
} | |
resetSearch = () => { | |
this.setState({ | |
results: [], | |
loading: false, | |
searched: false | |
}) | |
} | |
getSearchData = async (searchTerm) => { | |
let response | |
try { | |
response = await fetch(`https://data.cityofchicago.org/resource/cwig-ma7x.json?$query=SELECT * where Contains(upper(dba_name), upper("${searchTerm}")) or Contains(upper(aka_name), upper("${searchTerm}"))`) | |
} catch (e) { | |
console.log(e) | |
} | |
let data | |
try { | |
data = await response.json() | |
} catch (e) { | |
console.log(e) | |
} | |
return data | |
} | |
render () { | |
return ( | |
<Router> | |
<div> | |
<Nav | |
userHasSearched={this.state.searched} /> | |
<Search | |
logoSizeIsSmall={this.state.searched} | |
updateSearchTerm={this.updateSearchTerm} | |
resetSearch={this.resetSearch} | |
changeFilter={this.changeFilter} | |
filter={this.state.filter} /> | |
<Route exact path="/" render={() => ( | |
<ResultsList | |
loading={this.state.loading} | |
results={this.state.results} | |
searched={this.state.searched} | |
/> | |
)} /> | |
<Route path="/map/" render={() => ( | |
<h1>Map</h1> | |
)} /> | |
</div> | |
</Router> | |
) | |
} | |
} | |
ReactDOM.render(<App />, document.getElementById('root')); | |
registerServiceWorker(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Would very much appreciate it if you could post the maps code!