shawfire / address-book

address-book

Requirements

You have been asked to develop an address book that allows a user to store (between successive runs of the program) the name and phone numbers of their friends, with the following functionality:

• To be able to display the list of friends and their corresponding phone numbers sorted by their name.
• Given another address book that may or may not contain the same friends, display the list of friends that are unique to each address book (the union of all the relative complements). For example given:

Book1 = { "Bob", "Mary", "Jane" }
Book2 = { "Mary", "John", "Jane" }

The friends that are unique to each address book are:

Book1 \ Book2 = { "Bob", "John" }

Instructions

• Develop the system in Java or Node.js
• High quality solution, well annotated and include tests.
• Persist information and you don't have to use a database.
• The simplest solution is often the best.
• The application must run and be easily built from source.

Scope

• React frontend
  • Create an address book
    • Address Books (+)
      • address book1 (\/) (-)
      • address book2 (/\) (+)
        • Mary 0423 122 123 (edit) (-)
        • John 0432 123 132
        • Jane 0432 442 842
      • Unique Entries from book1 and book2 (/)
  • Add an entry to the address book (name, phone number)
  • List address book entries sorted by name
  • Display unique names for any two Address books
• Java backend
  • Create and Address book
  • Add an entry to the address book
  • Get a list of address books
  • Get a list of entries an address book

Extensions

• cypress - JavaScript end to end testing framework
• storybooks - playground for UI components

Acceptance Criteria

Out of scope

• React frontend
  • Login / Logout User
• Java backend
  • User authentication

Create React App

create-react-app --version
npm uninstall -g create-react-app
npx create-react-app --version
npx create-react-app react-ts-app --typescript
cd react-ts-app
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
npm run start

• Reference: Create React App - Adding TypeScript

Emotion - css styles in javascript

npm i @emotion/styled @emotion/core

• Reference: React Emotion - Introduction

React Icons

npm i -D react-icons

Reference: React Icons

cypress - JavaScript end to end testing framework

• installation

npm i -D cypress

• Running the functional tests

npm run start
npm run cypress:open

Jest - Unit tests

npm run test -- --coverage

Jest / Enzyme - Unit tests

npm install --save enzyme enzyme-adapter-react-16 react-test-renderer

• src/setupTests.js

import { configure } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
configure({ adapter: new Adapter() });

• If you eject make sure package.json has the following rule.

"jest": {
  "setupTestFrameworkScriptFile": "<rootDir>/src/setupTests.js"
 }

References:

• Running Tests
• Configuring Jest and Enzyme in Create React App on Typescript

Storybook

• Installing storybook

npx -p @storybook/cli sb init

• Run storybook

npm run storybook

• .storybook/config.js

import { configure } from "@storybook/react";

// automatically import all files ending in *.stories.js
configure(require.context("../src", true, /\.stories\.tsx$/), module);

• src/components/Button/Button.stories.tsx

import React from "react";
import { action } from "@storybook/addon-actions";
import { Button } from "./Button";
import { MdSave, MdCancel } from "react-icons/md";
import { theme } from "../../theme/theme";

export default {
  title: "Button"
};

export const saveButton = () => (
  <Button alt="Save this address" onClick={action("clicked")}>
    <MdSave />
  </Button>
);

saveButton.story = {
  name: "Save Button"
};

export const cancelButton = () => (
  <Button
    alt="Cancel edit"
    button={theme.deleteButton}
    onClick={action("clicked")}
  >
    <MdCancel />
  </Button>
);

cancelButton.story = {
  name: "Cancel Button"
};

References:

• Storybook Quick Start Guide
• Storybook TypeScript configuration

Build and Run instructions

• After cloning the reposition.
• Assume you have nvm installed

cd react-ts-app
nvm install 12.13.0
nvm use
npm i
npm run start

TODO

• Add Java backend
• Add new address book entries
• Ensure names is unique within an Address Book.