app.js

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

Card.js

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

Form.js

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

MemberList.js

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