Changelog

Questions & Notes

  • Is there a way to develop in CodeSandbox while keeping my API key private?
  • How do I keep an API private if I'm pushing changes to a public Github repo?
  • Build a few projects with the concepts that I know: I can prioritize the Weather App the Timer, and potentially pulling data from Google Sheets or Airtable
  • How do I create a backend of a React App? Consider Firebase or MongoDB; maybe Node?

2020.06.22: Pulling Data via Airtable API

  • The Airtable API doc seems straight forward enough. It's cool that each table has a unique API documentation page to give users examples on how to query the elements in the table.
  • Had to create a new repo to push the new changes. Given that it was a new respository, I didn't know how to merge the code with the other set of files.
  • I spent most of the time figuring out how to iterate through .map() properly.
  • I need to figure out how to keep the API key private.
import React, {useState} from "react";

function AirTable(){
  const [projects, setProjects] = useState([
      {
        id: '1',
        fields: {
          title: "title",
          summary: "summary"
        }
      },
      {
        id: '2',
        fields: {
          title: "title 2",
          summary: "summary 2"
        }
      },
    ]);

  const airtableURL = "API_URL"

  const onDisplayProjects = () => {
    fetch(airtableURL, {
      method: "GET",
      headers: {
        Accept: "application/json"
      }
    })
    .then(responseFromAPI => responseFromAPI.json())
    .then(dataFromResponse => {
      setProjects(dataFromResponse.records);
      console.log(dataFromResponse.records);
      ProjectList();
    })
  }
// Simple mapping

  // function People() {
  //   const people = ['John', 'Bob', 'Fred'];
  //   return (
  //     <div>
  //       {people.map(person =>  <Person name={person} />)}
  //     </div>
  //   );
  // }
  // function Person({ name }) {
  //   return <p>this person's name is: {name}</p>;
  // }

  function ProjectList (){
    return(
      <div>
        {projects.map(project =>
          <SingleProject
            title={project.fields.title}
            summary={project.fields.summary}
          />
        )}
      </div>
    )
  }
/* Iterating through project list with .map()
  function ProjectList(){
    const rows = projects.map((project, i) => {
      return (
        <div>
          <SingleProject key={i}
            title={project.fields.title}
            summary={project.fields.summary} />
        </div>
      )
    });
  }
  */

  function SingleProject({ title, summary }) {
    return (
        <div>
          <div>{title}</div>
          <div>{summary}</div>
        </div>
    )
  }

  return(
    <div>
      <ProjectList />
      <button onClick={onDisplayProjects}>Show Projects</button>
    </div>
  )
}
export default AirTable;


// pull airtable data into console
// assign API output into a variable;
// call a component
// map results into list

2020.06.16: Pulling Data via external JSON file

  • Attempting to use Google Sheets to be the source of truth for the data, but it's way more complicated than expected.
  • I'm able to publish and pull the JSON object from the Google Sheets file. But the JSON isn't structured cleanly.
  • Then I also need to figure out how to connect the updated JSON object to display onto the list again. Running into issues where I'm getting multiple functions to pass information together. I should explore using the return values from functions to assign the values to a variable.
  • I'm also getting stuck on where components start and end. Within a component I'm including functions and display logic, then I have to export it, I think I'm mixing too many things together. It's a mess.
  • Two small wins: I added a status property to each project, which maps to the className. Also realizing that I already worked on 3 of the projects on the list already. Project List, Timer, and Setting up my local dev environment.

Question:

  • What's the process for transforming and cleaning up data that isn't in a useful structure? The Google Sheet JSON file returns a list of objects for each cell. What I'd like is a set of objects that includes all the properties vs. having the properties across multiple objects.
import React, {useState} from "react";

let projectListData = [
  {
    title: "Project List 1.0",
    summary:
      "A static list of projects with titles, summaries, and a done state.",
    detail: "Commit to Github. Deploy site via Netlify. Populate via JSON",
    status: "Done"
  },
  {
    title: "Project List 1.1",
    summary: "Make it dynamic and interactive",
    detail:
      "Populate projects via Google Sheets or AirTable. Mark items as done. Add sorting and filtering.",
    status: "Open"
  },
  {
    title: "Timer",
    summary: "Start, stop; pause, resume, and set time",
    detail: "",
    status: "Done"
  },
  {
    title: "Color Picker",
    summary:
      "Set primary color, toggle complementaries, add secondary, add saturation variations",
    detail: "",
    status: "Open"
  },
  {
    title: "Weather via API",
    summary: "Pull and display data from a weather API",
    detail: "Bonus: allow users to enter a new zip code to change the city",
    url: "https://csb-gngqm.netlify.app",
    status: "Open"
  },
  {
    title: "Set up local dev environment",
    summary: "Build React apps locally",
    detail: "",
    status: "Done"
  },
  {
    title: "Framer code components",
    summary:
      "Prototype with code components. See how design and code components complement each other",
    detail: "",
    status: "Open"
  }
];

function updateData(){
  console.log("updateData triggered");
  projectListData = [
    {
      title: "Project List 1.0",
      summary:
        "A static list of projects with titles, summaries, and a done state.",
      detail: "Commit to Github. Deploy site via Netlify. Populate via JSON",
      status: "Done"
    },
    {
      title: "Project List 1.1",
      summary: "Make it dynamic and interactive",
      detail:
        "Populate projects via Google Sheets or AirTable. Mark items as done. Add sorting and filtering.",
      status: "Open"
    },
  ]
  console.log(projectListData);
}

export default function Projects() {
  return <ProjectList projectData={projectListData} />;
}

// function ProjectListData(){
//   const [projectListData, setProjectListData] = useState();
//
//   const projectsAPI = 'https://spreadsheets.google.com/feeds/cells/19TRWzsLaQdfwcU6sdORBcnkEfdRVh7kWFYCfugXAlZE/1/public/full?alt=json'
//
//   const jokeAPI = 'https://icanhazdadjoke.com'
//
//   const onDisplayProjects = () => {
//     fetch(projectsAPI, {
//       method: "GET",
//       headers: {
//         Accept: "application/json"
//       }
//     })
//     .then(responseFromAPI => responseFromAPI.json())
//     .then(dataFromResponse => {
//       setProjectListData = dataFromResponse.feed.entry;
//       console.log(projectListData);
//       // setProjectList(dataFromResponse.feed.);
//     });
//   };
//
//   return(
//     <div>
//       <button onClick={onDisplayProjects}>Pull Data</button>
//     </div>
//   )
// }

const ProjectList = myProps => {
  const rows = myProps.projectData.map((row, index) => {
    return (
      <div className={`SingleProject ${row.status}`} key={index}>
        <div className="ProjectTitle">{row.title}</div>
        <div className="ProjectSummary">{row.summary}</div>
        <div className="ProjectDetail">{row.detail}</div>
        <div>
          <a href={row.url}>{row.url}</a>
        </div>
      </div>
    );
  });

  return (
    <div>
      {rows}
      <button onClick={updateData}>Pull Data</button>
    </div>

  )
};

2020.05.21: Progress Reflection

It's been about 13 hours over the past 5 days to get to this point. Spending between 2.0–4.5 hours each day. A combination of watching tutorial videos, reading documentation, implementing the concepts, troubleshooting, and I'd say most importantly, documenting what I'm learning.

The documentation happens at two different moments:

  • Once when I'm learning a new concept, I'll screenshot, and annotate the screen to highlight the concepts and see how different functions and methods are related.
  • The second part happens after I've implemented something. I have a notepad that's open where I jot down bullet points, questions, resources that I'm using to answer my questions.

I'm at a point where I can create a page, use components, pull data from an API and display it on the page.

The barrier from previous coding experiences was not knowing how to persist data so that the apps could have more utility. We'll see how it goes this time! I'm more optimistic because of how easy it is to manage states in a React app vs. plain Javascript.

2020.05.21: Updating the page with state changes

  • Renders only happen when props or state changes
  • props are read only, so we can't use them to update the data.
  • Functional components can now access state with React Hooks useState
  • I don't know what constructors and super() methods do.
  • I undersrtand componentDidMount(), but haven't used it yet.
  • Implemented React states 3 times. Once with classes; twice with React Hooks via useState. UseState is much easier. Not sure what the limits are of useState within functional components.
  • The React Hook documentation does a great job of comparing the implementation of states with class components vs. functional components
  • More data API: NYC Data APIs

2020.05.21: Pulling data via simple API

Notes

  • Create new file- import React
  • Create simple component via const- export default component
  • Import in app file
  • Use component as HTML element
  • I'm mixing up my syntax for function components with and without arrow syntax:
  • I added brackets and return in my function compoment.
    const Jsonapi = () => {   <p>placeholder for JSON api</p>;};
    vs.
    const Jsonapi = () => <p>placeholder for JSON api</p>;
  • Class components require: class, extends React.Component, and render;
  • Looked up the difference between functional and class components. Seems like with React Hooks useState and useEffect, there isn't an advantage to Class Components...?
  • Also, I feel like I can now read the React Main Concepts official documentation and follow along. 🎉
  • API fetching via Skillshare
  • Learning about the coolest API endpoint, the Fetch API. fetch(). Also read up on json() and then()
  • Looked for a new APIs to experiment with. Found Postman's collection; and a list of 10 APIs for side projects and a few more APIs here. Specifically the OMDb API
import React from "react";

function JsonAPI() {
  const onTellJoke = () => {
    fetch("https://icanhazdadjoke.com", {
      method: "GET",
      headers: {
        Accept: "application/json"
      }
    })
      .then(responseFromAPI => responseFromAPI.json()) //take response, format into JSON
      .then(dataFromResponse => console.log(dataFromResponse.joke)); //take JSON data, console log the joke
  };
  return <button onClick={onTellJoke}>Tell me a joke</button>;
}
export default JsonAPI;

2020.05.20: Pulling data via local JSON

const projectListData = [
  {
    title: "Project List",
    summary: "A list of projects with titles, summaries, and a done state.",
    detail:
      "Bonus: Populate projects via Google Sheets or AirTable. Commit to Github. Deploy site via Netlify. Populate via JSON"
  },
  {
    title: "Timer",
    summary: "Start, stop; pause, resume, and set time",
    detail: ""
  },
  {
    title: "Color Picker",
    summary:
      "Set primary color, toggle complementaries, add secondary, add saturation variations",
    detail: ""
  }
  // {
  //   title: "",
  //   summary: "",
  //   detail: ""
  // }
];

export default function Projects() {
  return <ProjectList projectData={projectListData} />;
}

const ProjectList = myProps => {
  const rows = myProps.projectData.map((row, index) => {
    return (
      <div className="SingleProject" key={index}>
        <div className="ProjectTitle">{row.title}</div>
        <div className="ProjectSummary">{row.summary}</div>
        <div className="ProjectDetail">{row.detail}</div>
      </div>
    );
  });

  return <div>{rows}</div>;
};
  • Worked through the implementation with dummy data.
  • Refactored the first version to refernece the local JSON data.
  • It's also live on its own URL via Netlify. New deploys happen automatically when I push commits to Github. 🤓
  • I tried to see if Google Sheets could export to a JSON file. It did, but I still need to figure out how to parse through the exported JSON.
  • Learned to use the map() function.
  • I also appended z1 and z2 to variables so that I can visually identify the path each variable takes to have an effect.

2020.05.20: First commit

  • Created static components to list projects.
  • Data is currently entered manually on each component.
  • Pushed changes to Github to track the changes over time. Figuring out how to keep CodeSandbox and Github in sync took 50 minutes. Creating a repo from CodeSandbox didn't seem to keep it in sync. I'd have to fork it to make changes. The other path was import a repo from Github, fork the clone, then push edits back to Github via CodeSandbox. 😭
import React from "react";
import "./styles.css";

const SingleProject = myProps => (
  <div className="SingleProject">
    <div className="ProjectTitle">{myProps.title}</div>
    <div className="ProjectSummary">{myProps.summary}</div>
    <div className="ProjectDetail">{myProps.detail}</div>
  </div>
);

export default function Projects() {
  return (
    <div className="ProjectList">
      <SingleProject
        title="Project List"
        summary="A list of projects with titles, summaries, and a done state."
        detail="Bonus: Populate projects via Google Sheets or AirTable. Commit to Github"
      />
      <SingleProject
        title="Timer"
        summary="Start, stop; pause, resume, and set time"
      />
      <SingleProject
        title="Color Picker"
        summary="Set primary color, toggle complementaries, add secondary, add saturation variations"
      />
    </div>
  );
}