UCI React Workshop

gistfile1.txt

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();

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