Codecademy export

App.js

import React, {useState} from "react";
import { Switch, Route, Redirect, NavLink } from "react-router-dom";

import { AppointmentsPage } from "./containers/appointmentsPage/AppointmentsPage";
import { ContactsPage } from "./containers/contactsPage/ContactsPage";

function App() {
//state variables
  const [appointments, setAppointments]=useState([]);
  const [contacts, setContacts]=useState([]);

  const ROUTES = {
    CONTACTS: "/contacts",
    APPOINTMENTS: "/appointments",
  };

//add data functions
  const addContact = (name, phone, email) => {
    setContacts( prev => (
      [...prev,
        {name, phone,email}
      ]))
  }

  const addAppointment = (title, contact, date, time ) => {
    setAppointments( prev => (
      [...prev,
      {title, contact, date, time}
    ]))
  }

  return (
    <>
      <nav>
        <NavLink to={ROUTES.CONTACTS} activeClassName="active">
          Contacts
        </NavLink>
        <NavLink to={ROUTES.APPOINTMENTS} activeClassName="active">
          Appointments
        </NavLink>
      </nav>
      <main>
        <Switch>
          <Route exact path="/">
            <Redirect to={ROUTES.CONTACTS} />
          </Route>
          <Route path={ROUTES.CONTACTS}>
            <ContactsPage contacts={contacts} addContact={addContact}/>
          </Route>
          <Route path={ROUTES.APPOINTMENTS}>
            <AppointmentsPage appointments={appointments} contacts={contacts} addAppointment={addAppointment}/>
          </Route>
        </Switch>
      </main>
    </>
  );
}

export default App;

AppointmentForm.js

import React from "react";

import { ContactPicker } from '../contactPicker/ContactPicker';

export const AppointmentForm = ({
  contacts,
  title,
  setTitle,
  contact,
  setContact,
  date,
  setDate,
  time,
  setTime,
  handleSubmit
}) => {
  const getTodayString = () => {
    const [month, day, year] = new Date()
      .toLocaleDateString("en-US")
      .split("/");
    return `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`;
  };
  
  //handle functions
  const handleTitleChange = (e) => {
    setTitle(e.target.value)
  }
  const handleDateChange = (e) => {
    setDate(e.target.value)
  }
  const handleTimeChange = (e) => {
    setTime(e.target.value)
  }
  const handleContactChange = (e) => {
    setContact(e.target.value)
  }

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="title">Title</label>
      <input
        type="text"
        id="title"
        aria-label="Title"
        placeholder="What is the appointment about?"
        value={title}
        onChange={handleTitleChange}
        required
      />

      <label htmlFor="date">Date</label>
      <input
        type="date"
        id="date"
        aria-label="Date"
        min={getTodayString()}
        value={date}
        onChange={handleDateChange}
        required
      />

      <label htmlFor="time">Time</label>
      <input
        type="time"
        id="time"
        aria-label="Time"
        value={time}
        onChange={handleTimeChange}
        required
      />

      <ContactPicker 
        contacts={contacts}
        value={contact}
        onChange={handleContactChange}
      />

      <input type="submit" value="Add"/>
    </form>
  );
};

AppointmentsPage.js

import React, {useState} from "react";

import { AppointmentForm  } from '../../components/appointmentForm/AppointmentForm';
import { TileList } from '../../components/tileList/TileList';

export const AppointmentsPage = ({appointments,addAppointment,contacts}) => {
  //local state variables
  const [title,setTitle] = useState('');
  const [contact,setContact] = useState('');
  const [date, setDate] = useState('');
  const [time, setTime] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    //callback function from prop to set contact
    addAppointment(title,contact,date,time);
    //set back to default
    setTitle('');
    setContact('');
    setDate('');
    setTime('');
  };

  return (
    <div>
      <section>
        <h2>Add Appointment</h2>
        <AppointmentForm  
          title={title}
          contact={contact}
          date={date}
          time={time}
          setTitle={setTitle}
          setContact={setContact}
          setDate={setDate}
          setTime={setTime}
          handleSubmit={handleSubmit}
          contacts={contacts}
        />
      </section>
      <hr />
      <section>
        <h2>Appointments</h2>
        <TileList 
          arrayList={appointments}
        />
      </section>
    </div>
  );
};

ContactForm.js

import React from "react";

export const ContactForm = ({
  name,
  setName,
  phone,
  setPhone,
  email,
  setEmail,
  handleSubmit
}) => {

  //handle functions
  const handleNameChange = (e) => {
    setName(e.target.value)
  }
  const handlePhoneChange = (e) => {
    setPhone(e.target.value)
  }
  const handleEmailChange = (e) => {
    setEmail(e.target.value)
  }

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="name">First Name</label>
      <input
        type="text"
        id="name"
        aria-label="Name"
        placeholder="John"
        value={name}
        onChange={handleNameChange}
        required
      />
      <label htmlFor="phone">Phone Number</label>
      <input
        type="tel"
        id="phone"
        aria-label="Phone Number"
        placeholder="(000) 000-0000"
        pattern="((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}"
        value={phone}
        onChange={handlePhoneChange}
        required
      />
      <label htmlFor="email">Email Address</label>
      <input
        type="email"
        id="email"
        aria-label="Email"
        placeholder="example@nowhere.com"
        value={email}
        onChange={handleEmailChange}
        required
      />
      <input type="submit" value="Add"/>
    </form>
  );
};

ContactPicker.js

import React from "react";

export const ContactPicker = ({contacts, onChange}) => {
  return (
    <select onChange = {onChange} >
      <option value="" key="default">Please select a Contact</option>
      {contacts.map( (contact,index) => (
        <option value={contact.name} key={index}>{contact.name}</option>
      ))}
    </select>
  );
};

ContactsPage.js

import React, {useState, useEffect} from "react";

import { ContactForm } from '../../components/contactForm/ContactForm';
import { TileList } from '../../components/tileList/TileList';

export const ContactsPage = ({contacts, addContact}) => {
  //local states
  const [name, setName] = useState('');
  const [phone,setPhone] = useState('');
  const [email, setEmail] = useState('');
  const [duplicate,setDuplicate] = useState(false);

  //check for duplicate contact name
  useEffect( ()=>{
    let checker = contacts.map( contact => contact.name ).indexOf(name);
    if(checker !== -1){
      setDuplicate(true);
      console.log('Duplicate name entry');
    } else {
      setDuplicate(false);
    }
  },[contacts, name]);

  const handleSubmit = (e) => {
    e.preventDefault();
    //Add contact info and clear data if the contact name is not a duplicate
    if(!duplicate){
      //callback function from prop to set contact
      addContact(name,phone,email);
      //set back to default
      setName('');
      setPhone('');
      setEmail('');
    }
  };

  /*
  Using hooks, check for contact name in the 
  contacts array variable in props
  */

  return (
    <div>
      <section>
        <h2>Add Contact</h2> 
        <ContactForm 
          name={name}
          phone={phone}
          email={email}
          setName={setName}
          setPhone={setPhone}
          setEmail={setEmail}
          handleSubmit={handleSubmit}
        />
      </section>
      <hr />
      <section>
        <h2>Contacts</h2>
        <TileList 
          arrayList={contacts}
        />
      </section>
    </div>
  );
};

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

import { BrowserRouter as Router } from 'react-router-dom';

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById('root')
);

Tile.js

import React from "react";

export const Tile = ({value}) => {
  const tempArray = Object.values(value)

  return (
    <div className="tile-container">
      {tempArray.map( (element,index)=> {
       return index ? 
        <p className="tile" key={index}>{element}</p> :
        <p className="tile-title" key={index}>{element}</p>;
      })}
    </div>
  );
};

TileList.js

import React from "react";

import {Tile} from '../tile/Tile';

export const TileList = ({arrayList}) => {
  return (
    <div>
      {arrayList.map( (value,index) => (
        <Tile 
          value={value}
          key={index}
        />
      ))}
    </div>
  );
};