Skip to content

Instantly share code, notes, and snippets.

@shayne-smith
shayne-smith / iconButton.tsx
Created April 14, 2021 14:26
A reusable icon button component
import React from 'react';
import styles from './iconButton.module.scss';
interface IconButtonProps {
color: string;
backgroundColor: string;
text: string;
img: string;
onPress: () => void;
};
@shayne-smith
shayne-smith / VizDrawer.js
Created March 22, 2021 19:42
A React data visualization drawer component
import React, { useState, useContext } from "react";
import { CityContext } from "../../contexts/CityContext";
import { Drawer, Alert } from "antd";
import { CloseOutlined } from "@ant-design/icons";
import styled from "styled-components";
import { MiniSearchBar } from "../common/MiniSearchBar";
const VizButton = styled.button`
display: flex;
@shayne-smith
shayne-smith / Header.js
Created March 22, 2021 19:40
A React header component with styled components
import React, { useEffect, useState } from "react";
import useWindowSize from "../../utils/useWindowSize";
import { Link } from "react-router-dom";
import styled from "styled-components";
import NavDrawer from "./NavDrawer";
const Wrapper = styled.header`
display: flex;
justify-content: flex-end;
@shayne-smith
shayne-smith / filterCities.js
Created March 22, 2021 19:37
A function that finds the common subset of cities that match all filters
const filterCities = () => {
let result = [];
let {
output0,
output1,
output2,
output3,
output4,
output5,
output6,
@shayne-smith
shayne-smith / covidFilter.js
Created March 22, 2021 19:27
One of many filter functions that were combined to create an advanced search
// filter cities based on number of citizens testing positive for COVID-19 in that city's state
const covidFilter = maximum => {
// convert COVID-19 and weather data objects to arrays
const covidArray = Object.entries(covid);
const weatherArray = Object.entries(weather);
// initialize array to store filtered cities
const filteredResults = [];
// // loop through all states in array
@shayne-smith
shayne-smith / RenderHomePage2.js
Created September 24, 2020 00:01
Code that renders city comparison cards
{isComparing && (
<div className="comparison-container">
<div className="comparison">
{comparisonList.map((city, index) => (
<CardComparison
key={index}
city={city[0]}
image={city[1]}
index={index}
removeCity={removeCity}
@shayne-smith
shayne-smith / renderHomePage.js
Last active September 23, 2020 23:51
Code to calculate data from the data science API
const calcHousingData = (cityStateName, stateCode) => {
try {
console.log("housing data: " + housing[stateCode][cityStateName]);
return housing[stateCode][cityStateName];
} catch {
console.log("State and city housing data was not found!");
}
};
const calcWeatherData = (cityStateName, stateCode) => {