Skip to content

Instantly share code, notes, and snippets.

@trevsm
Last active October 15, 2020 05:55
Show Gist options
  • Save trevsm/e670318caf352ed95a7c922d2b79b4d8 to your computer and use it in GitHub Desktop.
Save trevsm/e670318caf352ed95a7c922d2b79b4d8 to your computer and use it in GitHub Desktop.
import React, { useState, useEffect } from 'react'
import Wrapper from './components/Wrapper'
import Form from './components/Form'
import MemberList from './components/MemberList'
import 'minireset.css'
import './styles/App.css'
function App() {
const [json, setJson] = useState({})
const [currMem, setCurrMem] = useState({})
const [color, setColor] = useState("blue");
const queryApi = async () => {
const raw = await fetch('http://localhost:3000/staff.json')
const json = await raw.json()
setJson(json)
}
const setCurrentMember = (obj) => {
setCurrMem(obj)
}
useEffect(()=>{
queryApi()
},[])
return (
<section className="app">
<Wrapper>
<MemberList json={json} setMem={setCurrentMember}/>
<Form color={color} setColor={setColor}/>
</Wrapper>
</section>
)
}
export default App
import React from 'react'
import './Card.css'
function Item(props) {
let value
if (Array.isArray(props.value)) {
value = props.value.map(n => <span key={n}>{n}</span>)
} else {
value = <span>{props.value}</span>
}
return (
<div className={`${props.id} item`}>
<p className="key">{`${props.id}:`}</p>
<p className="val">{value}</p>
</div>
)
}
function Image(props) {
return (
<div className="picture item">
<p className="key">picture:</p>
<p className="val" style={{ display: 'flex' }}>
<img
className="image"
src={props.src}
width="90px"
samesite="Lax/"
alt="404"
/>
<span>{props.src}</span>
</p>
</div>
)
}
function Link(props) {
return (
<div className={`${props.title} item`}>
<p className="key">{`${props.title}:`}</p>
<p className="val" style={{ display: 'flex' }}>
<a href={props.href} target="new">
<span className="valid">{props.value}</span>
</a>
</p>
</div>
)
}
function Card(props) {
const member = props.member
const setCurrentMember = () => {
props.setMem(member)
}
return (
<div
className={`card ${member.category}`}
id={member.id}
onClick={setCurrentMember}
>
<Item id="category" value={member.category} />
<Item id="fullName" value={member.fullName} />
<Item id="title" value={member.title} />
<Item id="phone" value={member.phone} />
<Item id="fax" value={member.fax} />
<Item id="email" value={member.email} />
<Image src={member.picture} />
<Link
title="flyer"
value={member.flyer}
href={`https://egi.utah.edu/downloads/active_core/EGI_Staff_&_Affiliate_Scientists/${member.flyer}`}
/>
<Link
title="slug"
value={member.slug}
href={`https://egi.utah.edu/about/${member.category}/${member.slug}/`}
/>
</div>
)
}
export default Card
import React from 'react'
import './Form.css'
function Form(props) {
const member = props.currMem
const setMember = e => {
e.persist()
props.setCurrMem(prevState => ({
...prevState,
[e.target.name]: e.target.value,
}))
}
return (
<div className="form">
<div className="top">
<button className="fetchLive" style={{ marginBottom: '50px' }}>
Fetch Live
</button>
<button className="postBtn">
Post
<img
src="/icons/send-icon.svg"
width="18px"
style={{ transform: 'translate(5px, 2px)' }}
alt=""
/>
</button>
<h3 className="title">Current List</h3>
<select id="category" name="currList">
<option value="all">All Members</option>
<option value="staff">Staff Members</option>
<option value="affiliate-scientists">Affiliate Scientists</option>
<option value="none">No Category</option>
</select>
<label className="key">
<span>Key: </span>
<input
type="text"
placeholder="last_first"
id="key"
required=""
title="Every key must be unique"
/>
</label>
</div>
<br />
<hr />
<br />
<form name="mainForm">
<label className="category">
<span>Category:</span>
<select
className="category"
name="category"
value={member['category']}
onChange={setMember}
>
<option value="none">None</option>
<option value="staff">Staff Member</option>
<option value="affiliate-scientists">Affiliate Scientist</option>
</select>
</label>
<label className="fullName">
<span>Full Name: </span>
<input
type="text"
name="fullName"
className="fullName"
placeholder="Full Name"
/>
</label>
<label className="title">
<span>Title: </span>
<input
type="text"
name="title"
className="title"
placeholder="title"
value={member['title']}
onChange={setMember}
/>
</label>
<label className="phone">
<span>Phone: </span>
<input
type="tel"
name="phone"
className="phone"
placeholder="Phone"
value={member['phone']}
onChange={setMember}
/>
</label>
<label className="fax">
<span>Fax: </span>
<input
type="tel"
name="fax"
className="fax"
placeholder="Fax"
value={member['fax']}
onChange={setMember}
/>
</label>
<label className="email">
<span>Email: </span>
<input
type="email"
name="email"
className="email"
placeholder="example@email.com"
value={member['email']}
onChange={setMember}
/>
</label>
<label className="picture">
<span>Picture: </span>
<input
type="url"
name="picture"
className="picture"
placeholder="https://egi.utah.edu/wp-content/uploads"
value={member['picture']}
onChange={setMember}
/>
</label>
<label className="flyer">
<span>flyer:</span>
<input
type="text"
name="flyer"
className="flyer"
placeholder="Doe_J.pdf"
title="This is for staff/scientist pdf flyer"
value={member['flyer']}
onChange={setMember}
/>
</label>
<label className="slug">
<span>Page Slug:</span>
<input
type="text"
name="slug"
className="slug"
placeholder="first-last"
title="The slug corresponds to their individual page on the website (egi.utah.edu)"
value={member['slug']}
onChange={setMember}
/>
</label>
<p style={{ width: '60%' }}>
<button className="saveBtn">Save Locally</button>
</p>
<p style={{ width: '40%' }}>
<button className="clearBtn">Clear All</button>
<button className="deleteBtn">Delete</button>
</p>
<div className="change-log"></div>
</form>
</div>
)
}
export default Form
import React from 'react'
import Card from './Card'
import './MemberList.css'
function MemberList(props) {
const json = props.json
const Cards = () =>
Object.keys(json).map(key => (
<Card member={json[key]} setMem={props.setMem} key={key}/>
))
return (
<div className="member-list">
<Cards/>
</div>
)
}
export default MemberList
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment