Fullstack React mini-code programs written for the sake of flexing my learning and understanding.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Luiserebii 698e07577d
Adding some questions
5 months ago
..
public Adding initial setup of time_tracking_app 5 months ago
tests/e2e Adding initial setup of time_tracking_app 5 months ago
.gitignore Adding initial setup of time_tracking_app 5 months ago
.test.bats Adding initial setup of time_tracking_app 5 months ago
README.md Adding some questions 5 months ago
data.json Adding initial setup of time_tracking_app 5 months ago
nightwatch.conf.js Adding initial setup of time_tracking_app 5 months ago
package-lock.json Adding initial setup of time_tracking_app 5 months ago
package.json Adding initial setup of time_tracking_app 5 months ago
server.js Adding initial setup of time_tracking_app 5 months ago

README.md

Timer App

Architecture

This is an app which holds multiple timers which the user can create, edit, and delete. Each timer contains contains a task, along with a timer counter showing how long the task has elapsed. The user has the ability to stop and start the timers freely. Editing a timer will bring up a completely different UI with fields to edit, and to save/cancel.

How might this built? What would the data look like to describe this app?

Hmmm…

Each timer has a title, description, time, edit button, delete button, and start/stop button. So, each one might look something like:


class Timer extends React.Component {

  state = {
    title: '',
    description: '',
    time: '',
    isButtonStarted: false
  };

  getButtonValue() {
    return !this.state.isButtonStarted ? 'Start' | 'Stop';
  }

  return (
    <div>
      <h1>{this.state.title}</h1>
      <h3>{this.state.description}</h3>
      <span style="font-size: 50px">{this.state.time}</span>
      <input type="button" value="Edit">
      <input type="button" value="Delete">
      <input type="button" value={this.getButtonValue()}/>
    </div>
  );


}

Questions:

  • How would deletion work? Perhaps we would call a function to delete the data in the JSON holding this info, and then refresh the app somehow? Does React do that onClick() or something? Do we call a refresh function?
  • What about editing; I’m thinking we hide this and then render the EditingTimer Component, something like that.
  • Wait, darn, props should be everything but the isButtonStarted, right…? Exactly how does this interact again? Should state be set to the info passed down by default?

Running the app

  1. Ensure you have npm installed.

Follow the instructions for your platform here.

  1. Install all dependencies:
npm install
  1. Boot the HTTP server
npm run server

The server is now running at localhost:3000