A process for solving React take-home exercises

/**
 * How to solve React take-home exercise (from zero to hero)
 *
 * 1.) WHAT DO I HAVE TO DO?
 *  a) Skim through the instructions
 *  b) Set up the coding environment following the instructions
 *  c) Skim through existing files and folders
 *  d) Scroll through the existing code
 *  e) Create a TODO list comment somewhere central in the code
 *  f) - Read the instructions again
 *     - Break down instructions into atomic tasks
 *     - Add each task to the TODO list
 *  g) Sort the tasks by priority and dependencies.
 *     - Easy and setup tasks first
 *     - Advanced and follow-up tasks next
 *     - Complex tasks and final changes at the end
 *  h) Take a moment to understand the intention behind each task
 *     - Answer the questions:
 *       - Why am I doing this?
 *       - What skills can I show here?
 *     - Refine the tasks in the TODO list based on the findings
 *  i) Take a moment to understand the user stories
 *     - Answer the question:
 *       - Why would a user want these features/changes?
 *     - If applicable, refine the tasks based on your findings.
 *       - Potentially rephrase tasks into user stories
 *
 * -- TODO list template --
 *
 * What is required?
 * - [X] User should only be able to submit form if name and email inputs are filled out
 * - [X] User should see an error if email is not a valid email after submitting the form
 * - [X] User should not be able to use name and email with more than 120 characters
 * - [X] User should see a green "Subscribed!" message if submission was successful
 * - [X] Input fields should be emptied after successful submission so that user can start filling out form again
 * - [X] "Subscribed" message should disappear if user starts typing again
 * - [ ] …
 *
 * What are the next steps?
 * - [X] User should be able to use form on mobile (make responsive)
 * - [ ] User should see loading indication when form is submitting
 * - [ ] …
 *
 * -- TODO list template --
 *
 *   Feel free to submit your TODO list together with your code.
 *   Make sure to fix all typos and grammar errors if you do so.
 *   A well-maintained TODO list shows
 *   that you can break down complicated tasks.
 *
 *   Ignore the ‘What are the next steps?’ section.
 *   More to this later.
 *
 * 2.) HOW DO I DO IT?
 *    -> KEEP IT SIMPLE - DON’T OVER-COMPLICATE THINGS! <-
 *    -> DEBUGGING OVER-COMPLICATED CODE IS HARD! <-
 *
 *  For each TODO in the list, do the following:
 *  - Pick the next TODO from the TODO list
 *  - Follow the steps a to e
 *  - Test and debug the implementation after every step.
 *
 *  a) Start with the markup (HTML)
 *     - Build the static HTML necessary for the task
 *     - Do not add any dynamic logic with JavaScript just yet
 *  b) Define the application states the user can be in,
 *     e.g., create enum states and boolean flags
 *  c) Implement the application state with React
 *     Set each state to its default/initial state
 *  d) Implement event handlers to update the state
 *  e) Make markup conditional/dynamic based on the React state
 *
 * 3.) HOW DID I DO IT?
 *   - Think of this section as your PR description.
 *   - Add a comment above your code (after the TODO list comment).
 *   - This section is to document your implementation details.
 *   - Include explanations into **how** you solved the tasks.
 *   - Use this section to communicate your thoughts
 *     and decisions with the interviewers.
 *
 * -- PR description template --
 *
 * Implementation Details:
 * - Instead of using React state and callbacks
 *   to handle the value of each input field,
 *   I decided to use the HTML form element API
 *   to access the form values on submit.
 *   This way, we can reduce the amount of state
 *   and can avoid re-renders.
 * - Refactored existing submit button from div to button element
 *   to take advantage of semantic HTML and improve accessibility.
 *  - …
 *
 * Open Issues:
 * - One unit test is failing due to a weird scroll issue.
 *   I was not able to fix the unit test,
 *   but left a TODO comment in the line causing the issue.
 *
 * -- PR description template --
 *
 * 4.) HOW TO STAND OUT OF THE CROWD?
 *     - Once you are done and your code works,
 *       you can go ahead and improve your solution.
 *     - It is very important that you don’t do this initially.
 *     - Our priority is to solve the exercise.
 *     - Premature abstractions will make debugging
 *       and changing things harder;
 *       that’s why we think about this at last.
 *
 * a) Make things consistent
 *   a.1) Follow existing conventions:
 *    - Identify file, variable, and function naming conventions
 *    - Update your code to follow identified conventions,
 *    - e.g., existing files are in snake-case, so all new files
 *      should be snake-case as well.
 *   a.2) Create additional conventions:
 *    - Identify remaining inconsistencies in your code,
 *    - Create patterns to unify things
 *    - This may include variable, function,
 *      classes, and state naming conventions,
 *      e.g., every boolean state starts with `is`:
 *        - `isOpen`
 *        - `isPlayingInTheBackground`
 *
 *  b) Document things
 *     - Consider adding JSDoc comments to your functions
 *     - Add inline comments where they add value
 *       (e.g., answer the question: Why did you do this?)
 *     - Read through existing comments
 *       (including TODO list and PR description)
 *       and fix grammar mistakes and typos
 *
 *  c) Create better abstractions
 *     but be careful not to over-engineer!
 *     - Abstract duplicate code into functions or hooks
 *     - Break reusable markup out into reusable components
 *     - Create context and providers to manage global state
 *     - Avoid prop-drilling
 *
 *  d) Make accessibility improvements
 *   - Good starting point:
 *     Go through MDN Web Docs Semantic HTML 5 element list
 *     and apply them in your code wherever possible
 *   - Use browser extensions, Google Lighthouse,
 *     and ESLint plugins to find accessibility errors
 *   - Use keyboard-only navigation to test your app
 *     Are all focus outlines visible?
 *   - Use voice-over (built-in screenreader) to test your app
 *   - Add alt tags to all image elements
 *   - Use semantic HTML wherever possible:
 *     - Use button element for click actions
 *     - Use anchor tag for navigation
 *     - Instead of div use:
 *       section, main, footer, header, nav, aside, article, ...
 *   - Add aria attributes where it makes sense:
 *     - `aria-busy`
 *     - `aria-live`
 *     - `aria-hidden`
 *     - `aria-describedby`
 *     - `aria-label`
 *
 *   e) Go above and beyond (optional)
 *      - Do you still have time and motivation left?
 *      - Doing more than necessary is optional.
 *      - There is something to be said
 *        about investing too much time at one take-home exercise.
 *        Maybe the time would be better spent
 *        applying to more positions
 *        or working on your side project?
 *      - However, sometimes the instructions are open ended or
 *      - you just want to do 110%.
 *    e.1) Get creative and come up with more
 *         user stories and features
 *         - Add all new ideas to the TODO list under
 *           the section ‘What are the next steps?’
 *           Just adding these TODOs shows that you care!
 *           No need to implement them!
 *         - If you want to invest more time, pick the first
 *           TODO and go back to step 2.
 *    e.2) Add tests, linter, formatter, or other utils.
 *         If the exercise environment lacks tools
 *         or packages you are familiar with and you
 *         think they could add additional value, then
 *         add these tools and document the changes in the
 *         PR description section.
 *
 *    f) Take a break and come back with a fresh mind
 *       - Once you are done, take a break!
 *       - If you have time left,
 *         you cna come back tomorrow with a fresh mind
 *         and review your implementation again.
 *       - You would be surprised how many typos and logic slips
 *         you can identify on another day with a fresh mind.
 *       - Fix your code and be ready to submit!
 *
 *    g) Let a friend review your code (optional)
 *       - If you have time, let someone else review your code.
 *       - Do you have a friend, mentor, or senior colleague
 *         that could review your solution?
 *       - Maybe you could meet for an hour and explain your code?
 *       - This is also a great learning opportunity!
 *
 */

/*
 * What is required?
 * - [ ] …
 * - [ ] …
 * - [ ] …
 *
 * What are the next steps?
 * - [ ] …
 * - [ ] …
 * - [ ] …
 */

/*
 * What is required?
 * - [ ] User should see an error message when trying to submit without first inputting a email and name
 * - [ ] User should see an error if email is not a valid email after submitting the form
 * - [ ] User should not be able to input more than 120 characters for both email and name input values
 * - [ ] User should see a green "Subscribed!" message if submission was successful
 * - [ ] Input fields should be emptied after successful submission so that user can start filling out form again
 * - [ ] "Subscribed" message should disappear if user starts typing again
 *
 * What are the next steps?
 */

import './ContactForm.css';

export default function ContactForm() {
  function subscribe() {
    console.log('a new subscriber!');
  }
  return (
    <form class="contact-form">
      <h2>Newsletter</h2>
      <div className="contact-form__fieldset">
        <label>Name:</label>
        <input />
      </div>
      <div className="contact-form__fieldset">
        <label>Email:</label>
        <input />
      </div>
      <div className="contact-form__button" onClick={subscribe}>
        Subscribe
      </div>
    </form>
  );
}

<p>Please insert a name and email address. Both are required.</p>

import './ContactForm.css';
import { useState } from 'react';

export default function ContactForm() {
  // boolean flag to represent our two application states
  const [showError, setShowError] = useState(false);
  // states for each input field
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  console.log({ showError, name, email });

  function subscribe() {
    console.log('a new subscriber!');
  }
  return (
    <form class="contact-form">
      <h2>Newsletter</h2>
      <div className="contact-form__fieldset">
        <label>Name:</label>
        <input />
      </div>
      <div className="contact-form__fieldset">
        <label>Email:</label>
        <input />
      </div>
      <div className="contact-form__button" onClick={subscribe}>
        Subscribe
      </div>
      <p>Please insert a name and email address. Both are required.</p>
    </form>
  );
}

import './ContactForm.css';
import { useState } from 'react';

export default function ContactForm() {
  // boolean flag to represent our two application states
  const [showError, setShowError] = useState(false);
  // states for each input field
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  console.log({ showError, name, email });

  function subscribe() {
    if (!name || !email) {
      // transition application to error state
      setShowError(true);
      console.log('name or email not set', { name, email });
      return;
    }
    console.log('a new subscriber!');
  }
  return (
    <form class="contact-form">
      <h2>Newsletter</h2>
      <div className="contact-form__fieldset">
        <label>Name:</label>
        <input
          onChange={(e) => {
            setName(e.target.value);
          }}
        />
      </div>
      <div className="contact-form__fieldset">
        <label>Email:</label>
        <input
          onChange={(e) => {
            setEmail(e.target.value);
          }}
        />
      </div>
      <div className="contact-form__button" onClick={subscribe}>
        Subscribe
      </div>
      <p>Please insert a name and email address. Both are required.</p>
    </form>
  );
}

import './ContactForm.css';
import { useState } from 'react';

export default function ContactForm() {
  // boolean flag to represent our two application states
  const [showError, setShowError] = useState(false);
  // states for each input field
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  console.log({ showError, name, email });

  function subscribe() {
    if (!name || !email) {
      // transition application to error state
      setShowError(true);
      console.log('name or email not set', { name, email });
      return;
    }
    console.log('a new subscriber!');
  }
  return (
    <form class="contact-form">
      <h2>Newsletter</h2>
      <div className="contact-form__fieldset">
        <label>Name:</label>
        <input
          onChange={(e) => {
            setName(e.target.value);
          }}
        />
      </div>
      <div className="contact-form__fieldset">
        <label>Email:</label>
        <input
          onChange={(e) => {
            setEmail(e.target.value);
          }}
        />
      </div>
      <div className="contact-form__button" onClick={subscribe}>
        Subscribe
      </div>
      {showError && <p>Please insert a name and email address. Both are required.</p>}
    </form>
  );
}

email.includes('@'); // 😅❔

import './ContactForm.css';
import { useState } from 'react';

export default function ContactForm() {
  // boolean flag to represent our two application states
  const [showError, setShowError] = useState(false);
  // states for each input field
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  console.log({ showError, name, email });

  function subscribe() {
    if (!name || !email) {
      // transition application to error state
      setShowError(true);
      console.log('name or email not set', { name, email });
      return;
    }
    console.log('a new subscriber!');
  }
  return (
    <form class="contact-form">
      <h2>Newsletter</h2>
      <div className="contact-form__fieldset">
        <label>Name:</label>
        <input
          onChange={(e) => {
            setName(e.target.value);
          }}
        />
      </div>
      <div className="contact-form__fieldset">
        <label>Email:</label>
        <input
          type="email"
          onChange={(e) => {
            setEmail(e.target.value);
          }}
        />
      </div>
      <div className="contact-form__button" onClick={subscribe}>
        Subscribe
      </div>
      {showError && <p>Please insert a name and email address. Both are required.</p>}
    </form>
  );
}

import './ContactForm.css';
import { useState } from 'react';

export default function ContactForm() {
  // boolean flag to represent our two application states
  const [showError, setShowError] = useState(false);
  // states for each input field
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  console.log({ showError, name, email });

  function subscribe() {
    if (!name || !email) {
      // transition application to error state
      setShowError(true);
      console.log('name or email not set', { name, email });
      return;
    }
    console.log('a new subscriber!');
  }
  return (
    <form class="contact-form">
      <h2>Newsletter</h2>
      <div className="contact-form__fieldset">
        <label>Name:</label>
        <input
          onChange={(e) => {
            setName(e.target.value);
          }}
        />
      </div>
      <div className="contact-form__fieldset">
        <label>Email:</label>
        <input
          type="email"
          onChange={(e) => {
            setEmail(e.target.value);
          }}
        />
      </div>
      <button type="submit" className="contact-form__button" onClick={subscribe}>
        Subscribe
      </button>
      {showError && <p>Please insert a name and email address. Both are required.</p>}
    </form>
  );
}

import './ContactForm.css';
import { useState } from 'react';

export default function ContactForm() {
  // boolean flag to represent our two application states
  const [showError, setShowError] = useState(false);
  // states for each input field
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  console.log({ showError, name, email });

  function subscribe(e) {
    // avoid form submission
    e.preventDefault();
    if (!name || !email) {
      // transition application to error state
      setShowError(true);
      console.log('name or email not set', { name, email });
      return;
    }
    console.log('a new subscriber!');
  }
  return (
    <form class="contact-form" onSubmit={subscribe}>
      <h2>Newsletter</h2>
      <div className="contact-form__fieldset">
        <label>Name:</label>
        <input
          onChange={(e) => {
            setName(e.target.value);
          }}
        />
      </div>
      <div className="contact-form__fieldset">
        <label>Email:</label>
        <input
          type="email"
          onChange={(e) => {
            setEmail(e.target.value);
          }}
        />
      </div>
      <button type="submit" className="contact-form__button">
        Subscribe
      </button>
      {showError && <p>Please insert a name and email address. Both are required.</p>}
    </form>
  );
}

/*
 * Using `maxLength` input attribute to prevent users from
 * inserting too much text.
 * Currently no error message displayed, user just prevented
 * to insert more text.
 * Could potentially also add an error message to improve
 * user experience and communicate max length cap.
 */

<p>Subscribed!</p>

<p className="contact-form__success-message">Subscribed!</p>

const states = {
  not_submitted: 'not_submitted',
  submitted_has_errors: 'submitted_has_errors',
  submitted_has_succeeded: 'submitted_has_succeeded',
};

import './ContactForm.css';
import { useState } from 'react';

const states = {
  not_submitted: 'not_submitted',
  submitted_has_errors: 'submitted_has_errors',
  submitted_has_succeeded: 'submitted_has_succeeded',
};

export default function ContactForm() {
  // state to represent our form application state
  const [formState, setFormState] = useState(states.not_submitted);
  // states for each input field
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  console.log({ formState, name, email });

  function subscribe(e) {
    // avoid form submission
    e.preventDefault();
    if (!name || !email) {
      // transition application to error state
      setShowError(true);
      console.log('name or email not set', { name, email });
      return;
    }
    console.log('a new subscriber!');
  }
  return (
    <form class="contact-form" onSubmit={subscribe}>
      <h2>Newsletter</h2>
      <div className="contact-form__fieldset">
        <label>Name:</label>
        <input
          maxLength={120}
          onChange={(e) => {
            setName(e.target.value);
          }}
        />
      </div>
      <div className="contact-form__fieldset">
        <label>Email:</label>
        <input
          type="email"
          maxLength={120}
          onChange={(e) => {
            setEmail(e.target.value);
          }}
        />
      </div>
      <button type="submit" className="contact-form__button">
        Subscribe
      </button>
      {showError && <p>Please insert a name and email address. Both are required.</p>}
      <p className="contact-form__success-message">Subscribed!</p>
    </form>
  );
}

formState === states.submitted_has_errors && <p>Please insert a name and email address. Both are required.</p>;

import './ContactForm.css';
import { useState } from 'react';

const states = {
  not_submitted: 'not_submitted',
  submitted_has_errors: 'submitted_has_errors',
  submitted_has_succeeded: 'submitted_has_succeeded',
};

export default function ContactForm() {
  // state to represent our form application state
  const [formState, setFormState] = useState(states.not_submitted);
  // states for each input field
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  console.log({ formState, name, email });

  function subscribe(e) {
    // avoid form submission
    e.preventDefault();
    if (!name || !email) {
      // transition application to error state
      setFormState(states.submitted_has_errors);
      console.log('name or email not set', { name, email });
      return;
    }
    setFormState(states.submitted_has_succeeded);
    console.log('a new subscriber!');
  }
  return (
    <form class="contact-form" onSubmit={subscribe}>
      <h2>Newsletter</h2>
      <div className="contact-form__fieldset">
        <label>Name:</label>
        <input
          maxLength={120}
          onChange={(e) => {
            setName(e.target.value);
          }}
        />
      </div>
      <div className="contact-form__fieldset">
        <label>Email:</label>
        <input
          type="email"
          maxLength={120}
          onChange={(e) => {
            setEmail(e.target.value);
          }}
        />
      </div>
      <button type="submit" className="contact-form__button">
        Subscribe
      </button>
      {formState === states.submitted_has_errors && <p>Please insert a name and email address. Both are required.</p>}
      <p className="contact-form__success-message">Subscribed!</p>
    </form>
  );
}

import './ContactForm.css';
import { useState } from 'react';

const states = {
  not_submitted: 'not_submitted',
  submitted_has_errors: 'submitted_has_errors',
  submitted_has_succeeded: 'submitted_has_succeeded',
};

export default function ContactForm() {
  // state to represent our form application state
  const [formState, setFormState] = useState(states.not_submitted);
  // states for each input field
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  console.log({ formState, name, email });

  function subscribe(e) {
    // avoid form submission
    e.preventDefault();
    if (!name || !email) {
      // transition application to error state
      setFormState(states.submitted_has_errors);
      console.log('name or email not set', { name, email });
      return;
    }
    setFormState(states.submitted_has_succeeded);
    console.log('a new subscriber!');
  }
  return (
    <form class="contact-form" onSubmit={subscribe}>
      <h2>Newsletter</h2>
      <div className="contact-form__fieldset">
        <label>Name:</label>
        <input
          maxLength={120}
          onChange={(e) => {
            setName(e.target.value);
          }}
        />
      </div>
      <div className="contact-form__fieldset">
        <label>Email:</label>
        <input
          type="email"
          maxLength={120}
          onChange={(e) => {
            setEmail(e.target.value);
          }}
        />
      </div>
      <button type="submit" className="contact-form__button">
        Subscribe
      </button>
      {formState === states.submitted_has_errors && <p>Please insert a name and email address. Both are required.</p>}
      {formState === states.submitted_has_succeeded && <p className="contact-form__success-message">Subscribed!</p>}
    </form>
  );
}

/*
 * Implementation Details:
 * - ...
 * - ...
 * - ...
 *
 * Open Issues:
 * - ...
 * - ...
 * - ...
 */

/*
 * Implementation Details:
 * - Created form state enum instead of multiple boolean flags to
 *   reduce number of React states and to make sure
 *   either success or message is displayed and never both.
 * - Using input field attributes (web standards) for form
 *   validation to avoid unnecessary JavaScript code to reduce
 *   complexity.
 *
 * Open Issues:
 * - Using `maxLength` may not be enough to communicate to the user
 *   why they cannot input more text.
 *   Adding an additional error message may improve
 *   the user experience.
 */