2020.06.17

  • Created a page where I can enter  event details and it populates the emails and messages that I send out. It saves me time from copy-ing/pasting and formatting each message when I'm pasting it. Hopefully, this speeds up time for each event, and it reduces the chance for errors and typos.
  • I used css-grids for the layout. There's more styling work to be done. Fixed position for the sidebar, additional styling for each template type. ie. Email, Event Page, Slack, Social Media icons.
  • Debugging grids in Firefox is very clear. One thing I learned. The direct parent element needs to have display: grid; otherwise, the children elements are trying to assign themselves to columns and rows that don't exist.
  • On the React side. I got to practice using components and passing properties direclty into each item. Learned to build the components then use it directly in the function that's capturing the input. Not sure that this is the right or most elegant way to structure the code, but it works now. I might refactor out the Input fields into a separate component.
  • Up next: I'll add more templates, and make sure that copy/pasting the text doesn't have unintented styles.
  • Could be cool to also generate social media images to use when sharing the posts.
import React, {useState} from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <Templates/>
    </div>
  )
}

function Templates(){
  const [date, setDate] = useState('<< DATE >>')
  const [dayOfWeek, setDayOfWeek] = useState('<< DAY OF WEEK >>')
  const [eventTime, setEventTime] = useState('<< EVENT TIME >>')
  const [company, setCompany] = useState('<< COMPANY >>')
  const [address, setAddress] = useState('<< ADDRESS >>')
  console.log(date);
  // const inputChange = (content) => {
  //   console.log(content);
  // }
  return(
    <div className="contentWrapper">

      <div className="sidebar">
        <h1>Event Templates</h1>
        <p><label>Date: <input type='text' onChange={event => setDate(event.target.value)} /></label></p>
        <p><label>Day of Week: <input type='text' onChange={event => setDayOfWeek(event.target.value)} /></label></p>
        <p><label>Event Time: <input type='text' onChange={event => setEventTime(event.target.value)} /></label></p>
        <p><label>Company: <input type="text"onChange={event => setCompany(event.target.value)} /></label></p>
        <p><label>Address: <input type='text' onChange={event => setAddress(event.target.value)} /></label></p>
      </div>
      <div className="templatesColumn">
        <EventPage
          date={date}
          dayOfWeek={dayOfWeek}
          company={company}
          address={address}
          eventTime={eventTime}
        / >
        <Email
          date={date}
          company={company}
          address={address}
          eventTime={eventTime}
        / >
      </div>
    </div>
  )
}

/*
on input change > capture the input
update variable

*/

function Email(props){
  return(
    <div className="singleTemplate">
      <div className="email">
        <h3>Email</h3>
        <p>RSVP to Design Dinner: {props.date}</p>
        <p>Hi design friends,</p>
        <p>This month's design dinner is going to be hosted by the design team at {props.company}. If you can join us, please RSVP so we have enough food and drinks for you.</p>
        <ul>
          <li>When: Wednesday, {props.date} @ {props.eventTime
}</li>
          <li>Where: {props.address}</li>
        </ul>
        <strong>Event Format:</strong>
        <ul>
          <li>6:30pm Hang out and eat
</li>
          <li>7:00pm {props.company} team presentation and Q&A</li>
          <li>7:30pm Small group discussions</li>
        </ul>
        <p>
          As always, we'll keep the dinner to around 20-25 people. Email me if:</p>
          <ul>
            <li>Your team is interested in hosting a design dinner in April, May or later this year
</li>
            <li>You have any dietary restrictions
</li>
            <li>You have a designer friend that would enjoy our company and I'll add them to this mailing list</li>
          </ul>
        <p>See you soon!</p>
      </div>
    </div>
  )
}

function EventPage(props){
  return(
    <div className="singleTemplate">
      <div className="eventPage">
        <h3>Event Page</h3>
        <p>Design Dinner: {props.date}, 2020</p>
        <p>HOSTED BY FRANCISCO & {props.company}</p>
        <p>Hi design friends! This month's design dinner is going to be hosted by the team at {props.company}. Please RSVP, so we have enough food and drinks for you. Email Francisco or the {props.company} team if you have dietary restrictions.</p>
        <ul>
          <li>{props.dayOfWeek}, {props.date}</li>
          <li>{props.eventTime} - 9:00PM</li>
          <li>{props.company}</li>
          <li>{props.address}</li>
        </ul>
        <p>Event Format:</p>
        <ul>
          <li>6:30pm Hang out and eat
</li>
          <li>7:00pm {props.company} team presentation and Q&A</li>
          <li>7:30pm Small group discussions</li>
        </ul>
      </div>
    </div>
  )
}

export default App;
body{
  font-family: sans-serif;
  background-color: #ccc;
  display: grid;
  line-height: 1.25em;
}
.contentWrapper{
  display: grid;
  grid-template-columns: 3rem 1fr 2fr 3rem;
  grid-column-gap: 1rem;
}
.sidebar{
  grid-column: 2;
  grid-row: 1;
  background-color: darkgray;
  padding: 2rem;
  border-radius: 8px;
}
.templatesColumn{
  grid-column: 3/4;
  grid-row: 1;
}
.singleTemplate{
  margin: 0 0 1rem 0;
  background-color: white;
  padding: 2rem 2rem;
  border-radius: 8px;
}