Skip to content

Instantly share code, notes, and snippets.

@dhasvold
Last active February 9, 2019 04:32
Show Gist options
  • Save dhasvold/4bef70bf98eef90da2eeec4426b63186 to your computer and use it in GitHub Desktop.
Save dhasvold/4bef70bf98eef90da2eeec4426b63186 to your computer and use it in GitHub Desktop.
UCI React Workshop
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();
@darkhipo
Copy link

Would very much appreciate it if you could post the maps code!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment