"
- ]
+ "@testing-library/jest-dom": "^6.4.2",
+ "@testing-library/react": "^14.2.2",
+ "@testing-library/user-event": "^14.5.2",
+ "@types/react": "^18.2.67",
+ "@types/react-dom": "^18.2.22",
+ "@typescript-eslint/eslint-plugin": "^7.3.1",
+ "@typescript-eslint/parser": "^7.3.1",
+ "@vitejs/plugin-react": "^4.2.1",
+ "eslint": "^8.57.0",
+ "eslint-plugin-react-hooks": "^4.6.0",
+ "eslint-plugin-react-refresh": "^0.4.6",
+ "jsdom": "^24.0.0",
+ "typescript": "^5.4.3",
+ "vite": "^5.2.6",
+ "vitest": "^1.4.0"
+ }
}
diff --git a/website/protractor.conf.js b/website/protractor.conf.js
deleted file mode 100644
index 6ab6b94..0000000
--- a/website/protractor.conf.js
+++ /dev/null
@@ -1,45 +0,0 @@
-// Protractor configuration file, see link for more information
-// https://github.com/angular/protractor/blob/master/lib/config.ts
-
-const { SpecReporter } = require('jasmine-spec-reporter');
-
-exports.config = {
- allScriptsTimeout: 11000,
- specs: [
- 'e2e/**/*.e2e-spec.ts'
- ],
- capabilities: {
- browserName: 'chrome',
- chromeOptions: {
- args: (process.env.IS_CIRCLE ? ['--headless'] : [])
- }
- },
- directConnect: !process.env.IS_JENKINS,
- baseUrl: process.env.URL || 'http://localhost:4200/',
-
- // Jasmine
- framework: 'jasmine',
- jasmineNodeOpts: {
- showColors: true,
- defaultTimeoutInterval: 30000,
- print: function() {}
- },
- onPrepare: ()=> {
- if (process.env.IS_JENKINS) {
- let jasmineReporters = require('jasmine-reporters');
- let junitReporter = new jasmineReporters.JUnitXmlReporter({
- savePath: 'output/',
- consolidateAll: false
- });
- jasmine.getEnv().addReporter(junitReporter);
- } else {
- let specReporter = new SpecReporter({
- spec: { displayStacktrace: true }
- });
- jasmine.getEnv().addReporter(specReporter);
- }
- require('ts-node').register({
- project: 'e2e/tsconfig.e2e.json'
- });
- }
-};
diff --git a/website/src/App.tsx b/website/src/App.tsx
new file mode 100644
index 0000000..184ef33
--- /dev/null
+++ b/website/src/App.tsx
@@ -0,0 +1,36 @@
+import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
+import { AppBar, Toolbar, Typography } from '@mui/material';
+import { ContactList } from './components/ContactList';
+import { ContactDetail } from './components/ContactDetail';
+import { ContactEdit } from './components/ContactEdit';
+import { NewContact } from './components/NewContact';
+import { PageNotFound } from './components/PageNotFound';
+
+export default function App() {
+ return (
+
+
+
+
+ Contacts
+
+
+
+
+
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+
+
+
+ );
+}
diff --git a/website/src/__tests__/App.test.tsx b/website/src/__tests__/App.test.tsx
new file mode 100644
index 0000000..21096e1
--- /dev/null
+++ b/website/src/__tests__/App.test.tsx
@@ -0,0 +1,22 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import App from '../App';
+import { contactService } from '../services/contact.service';
+
+describe('App', () => {
+ beforeEach(() => {
+ contactService.reset();
+ });
+
+ it('should render the app bar with Contacts title', () => {
+ render();
+ expect(screen.getByText('Contacts')).toBeInTheDocument();
+ });
+
+ it('should show contact list on default route', async () => {
+ render();
+ await waitFor(() => {
+ expect(screen.getByText('Adrian Directive')).toBeInTheDocument();
+ });
+ });
+});
diff --git a/website/src/__tests__/ContactList.test.tsx b/website/src/__tests__/ContactList.test.tsx
new file mode 100644
index 0000000..50869c8
--- /dev/null
+++ b/website/src/__tests__/ContactList.test.tsx
@@ -0,0 +1,53 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { ContactList } from '../components/ContactList';
+import { contactService } from '../services/contact.service';
+
+describe('ContactList', () => {
+ beforeEach(() => {
+ contactService.reset();
+ });
+
+ it('should display loading message initially', () => {
+ render(
+
+
+
+ );
+ expect(screen.getByText('Loading contacts...')).toBeInTheDocument();
+ });
+
+ it('should display contacts after loading', async () => {
+ render(
+
+
+
+ );
+
+ await waitFor(() => {
+ expect(screen.getByText('Adrian Directive')).toBeInTheDocument();
+ });
+
+ expect(screen.getByText('Rusty Component')).toBeInTheDocument();
+ expect(screen.getByText('Jeff Pipe')).toBeInTheDocument();
+ expect(screen.getByText('Craig Service')).toBeInTheDocument();
+ });
+
+ it('should display no contacts message when list is empty', async () => {
+ const contacts = await contactService.getContacts();
+ for (const c of contacts) {
+ await contactService.delete(c);
+ }
+
+ render(
+
+
+
+ );
+
+ await waitFor(() => {
+ expect(screen.getByText('You do not have any contacts yet')).toBeInTheDocument();
+ });
+ });
+});
diff --git a/website/src/__tests__/contact-service.test.ts b/website/src/__tests__/contact-service.test.ts
new file mode 100644
index 0000000..249ee7f
--- /dev/null
+++ b/website/src/__tests__/contact-service.test.ts
@@ -0,0 +1,44 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { contactService } from '../services/contact.service';
+
+describe('contactService', () => {
+ beforeEach(() => {
+ contactService.reset();
+ });
+
+ it('should return all contacts', async () => {
+ const contacts = await contactService.getContacts();
+ expect(contacts).toHaveLength(4);
+ expect(contacts[0].name).toBe('Adrian Directive');
+ });
+
+ it('should get a contact by id', async () => {
+ const contact = await contactService.getContact(1);
+ expect(contact).toBeDefined();
+ expect(contact!.name).toBe('Adrian Directive');
+ });
+
+ it('should return undefined for non-existent id', async () => {
+ const contact = await contactService.getContact(999);
+ expect(contact).toBeUndefined();
+ });
+
+ it('should save (update) a contact', async () => {
+ await contactService.save({ id: 1, name: 'Updated Name' });
+ const contact = await contactService.getContact(1);
+ expect(contact!.name).toBe('Updated Name');
+ });
+
+ it('should save (create) a new contact', async () => {
+ await contactService.save({ id: 5, name: 'New Contact' });
+ const contacts = await contactService.getContacts();
+ expect(contacts).toHaveLength(5);
+ });
+
+ it('should delete a contact', async () => {
+ await contactService.delete({ id: 1, name: 'Adrian Directive' });
+ const contacts = await contactService.getContacts();
+ expect(contacts).toHaveLength(3);
+ expect(contacts.find((c) => c.id === 1)).toBeUndefined();
+ });
+});
diff --git a/website/src/__tests__/phone-number.test.ts b/website/src/__tests__/phone-number.test.ts
new file mode 100644
index 0000000..0b4367a
--- /dev/null
+++ b/website/src/__tests__/phone-number.test.ts
@@ -0,0 +1,32 @@
+import { describe, it, expect } from 'vitest';
+import { formatPhoneNumber } from '../utils/phone-number';
+
+describe('formatPhoneNumber', () => {
+ it('should format with default format', () => {
+ expect(formatPhoneNumber('7035551234')).toBe('(703) 555-1234');
+ });
+
+ it('should format with dots', () => {
+ expect(formatPhoneNumber('7035551234', 'dots')).toBe('703.555.1234');
+ });
+
+ it('should format with hyphens', () => {
+ expect(formatPhoneNumber('7035551234', 'hyphens')).toBe('703-555-1234');
+ });
+
+ it('should prepend country code when provided', () => {
+ expect(formatPhoneNumber('7035551234', 'dots', 'US')).toBe('+1 703.555.1234');
+ });
+
+ it('should return empty string for invalid phone number', () => {
+ expect(formatPhoneNumber('123')).toBe('');
+ });
+
+ it('should return empty string when allowEmptyString is true and value is empty', () => {
+ expect(formatPhoneNumber('', 'default', '', true)).toBe('');
+ });
+
+ it('should return empty string for non-numeric input', () => {
+ expect(formatPhoneNumber('abcdefghij')).toBe('');
+ });
+});
diff --git a/website/src/__tests__/setup.ts b/website/src/__tests__/setup.ts
new file mode 100644
index 0000000..7b0828b
--- /dev/null
+++ b/website/src/__tests__/setup.ts
@@ -0,0 +1 @@
+import '@testing-library/jest-dom';
diff --git a/website/src/__tests__/validation.test.ts b/website/src/__tests__/validation.test.ts
new file mode 100644
index 0000000..94c3ce7
--- /dev/null
+++ b/website/src/__tests__/validation.test.ts
@@ -0,0 +1,38 @@
+import { describe, it, expect } from 'vitest';
+import { isEmailValid, isPhoneNumberValid } from '../utils/validation';
+
+describe('isEmailValid', () => {
+ it('should return true for empty string', () => {
+ expect(isEmailValid('')).toBe(true);
+ });
+
+ it('should return true for valid email', () => {
+ expect(isEmailValid('test@example.com')).toBe(true);
+ });
+
+ it('should return false for email without @', () => {
+ expect(isEmailValid('testexample.com')).toBe(false);
+ });
+
+ it('should return false for email without dot', () => {
+ expect(isEmailValid('test@examplecom')).toBe(false);
+ });
+});
+
+describe('isPhoneNumberValid', () => {
+ it('should return true for empty string', () => {
+ expect(isPhoneNumberValid('')).toBe(true);
+ });
+
+ it('should return true for valid 10-digit number', () => {
+ expect(isPhoneNumberValid('7035551234')).toBe(true);
+ });
+
+ it('should return false for number with wrong length', () => {
+ expect(isPhoneNumberValid('703555')).toBe(false);
+ });
+
+ it('should return false for non-numeric input', () => {
+ expect(isPhoneNumberValid('703555abcd')).toBe(false);
+ });
+});
diff --git a/website/src/app/app-routing.module.ts b/website/src/app/app-routing.module.ts
deleted file mode 100644
index 9a29245..0000000
--- a/website/src/app/app-routing.module.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-
-import { ContactsComponent } from './contacts/contacts.component';
-import { ContactDetailComponent } from './contacts/contact-detail/contact-detail.component';
-import { ContactEditComponent } from './contacts/contact-edit/contact-edit.component';
-import { NewContactComponent } from './contacts/new-contact/new-contact.component';
-import { PageNotFoundComponent } from './page-not-found-component';
-
-const routes: Routes = [
- { path: '', component: ContactsComponent },
- { path: 'add', component: NewContactComponent },
- { path: 'contacts', component: ContactsComponent },
- { path: 'contact/:id', component: ContactDetailComponent },
- { path: 'edit/:id', component: ContactEditComponent },
- { path: '**', component: PageNotFoundComponent }
-];
-
-@NgModule({
- imports: [RouterModule.forRoot(routes)],
- exports: [RouterModule],
- providers: []
-})
-export class RoutingModule { }
diff --git a/website/src/app/app.component.css b/website/src/app/app.component.css
deleted file mode 100644
index d78f408..0000000
--- a/website/src/app/app.component.css
+++ /dev/null
@@ -1,14 +0,0 @@
-div {
- margin: 10px 100px;
- text-align: left;
-}
-
-main {
- padding: 20px;
-}
-
-a.titleBar {
- color: white;
- text-decoration: none;
- padding-left: 10px;
-}
\ No newline at end of file
diff --git a/website/src/app/app.component.html b/website/src/app/app.component.html
deleted file mode 100644
index 4fd9703..0000000
--- a/website/src/app/app.component.html
+++ /dev/null
@@ -1,8 +0,0 @@
-
- {{ title }}
-
-
-
-
-
-
\ No newline at end of file
diff --git a/website/src/app/app.component.ts b/website/src/app/app.component.ts
deleted file mode 100644
index d732328..0000000
--- a/website/src/app/app.component.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-root',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.css']
-})
-export class AppComponent {
- title = 'Contacts';
-}
diff --git a/website/src/app/app.material.module.ts b/website/src/app/app.material.module.ts
deleted file mode 100644
index 746c8f1..0000000
--- a/website/src/app/app.material.module.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { NgModule } from '@angular/core';
-import { MatButtonModule, MatCardModule, MatDialogModule, MatFormFieldModule, MatIconModule, MatInputModule, MatListModule, MatOptionModule,
- MatProgressBarModule, MatSelectModule, MatSnackBarModule, MatToolbarModule, MatTooltipModule } from '@angular/material';
-
-@NgModule({
- imports: [
- MatButtonModule,
- MatCardModule,
- MatDialogModule,
- MatFormFieldModule,
- MatIconModule,
- MatInputModule,
- MatListModule,
- MatOptionModule,
- MatProgressBarModule,
- MatSelectModule,
- MatSnackBarModule,
- MatToolbarModule,
- MatTooltipModule
- ],
- exports: [
- MatButtonModule,
- MatCardModule,
- MatDialogModule,
- MatFormFieldModule,
- MatIconModule,
- MatInputModule,
- MatListModule,
- MatOptionModule,
- MatProgressBarModule,
- MatSelectModule,
- MatSnackBarModule,
- MatToolbarModule,
- MatTooltipModule
- ]
-})
-export class AppMaterialModule { }
diff --git a/website/src/app/app.module.ts b/website/src/app/app.module.ts
deleted file mode 100644
index 8286ac8..0000000
--- a/website/src/app/app.module.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { HttpModule } from '@angular/http';
-import { BrowserModule } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-
-import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
-import { InMemoryDataService } from './in-memory-data.service';
-
-import './rxjs-extensions';
-
-import { AppMaterialModule } from './app.material.module';
-import { ContactDetailComponent } from './contacts/contact-detail';
-import { ContactEditComponent } from './contacts/contact-edit';
-import { ContactListComponent } from './contacts/contact-list';
-import { ContactsComponent } from './contacts/contacts.component';
-import { ContactFeedDialogComponent } from './contacts/contact-feed';
-import { ContactFeedService } from './contacts/shared/services';
-import { ContactService } from './contacts/shared/services';
-import { FavoriteIconDirective } from './contacts/shared/favorite-icon';
-import { PageNotFoundComponent } from './page-not-found-component';
-import { PhoneNumberPipe } from './contacts/shared/phone-number';
-import { NewContactComponent } from './contacts/new-contact/new-contact.component';
-import { ShowContactsDirective } from './contacts/shared/show-contacts';
-
-import { AppComponent } from './app.component';
-import { RoutingModule } from './app-routing.module';
-import { InvalidEmailModalComponent } from './contacts/shared';
-import { InvalidPhoneNumberModalComponent } from './contacts/shared';
-
-@NgModule({
- declarations: [
- AppComponent,
- ContactEditComponent,
- ContactDetailComponent,
- ContactFeedDialogComponent,
- ContactListComponent,
- ContactsComponent,
- FavoriteIconDirective,
- InvalidEmailModalComponent,
- InvalidPhoneNumberModalComponent,
- PageNotFoundComponent,
- PhoneNumberPipe,
- NewContactComponent,
- ShowContactsDirective
- ],
- entryComponents: [
- ContactFeedDialogComponent,
- InvalidEmailModalComponent,
- InvalidPhoneNumberModalComponent
- ],
- imports: [
- AppMaterialModule,
- BrowserModule,
- BrowserAnimationsModule,
- FormsModule,
- HttpModule,
- InMemoryWebApiModule.forRoot(InMemoryDataService, { dataEncapsulation: true }),
- RoutingModule
- ],
- providers: [
- ContactService,
- ContactFeedService,
- ],
- bootstrap: [AppComponent]
-})
-export class AppModule { }
diff --git a/website/src/app/contacts/contact-detail/contact-detail.component.css b/website/src/app/contacts/contact-detail/contact-detail.component.css
deleted file mode 100644
index 88d78e1..0000000
--- a/website/src/app/contacts/contact-detail/contact-detail.component.css
+++ /dev/null
@@ -1,35 +0,0 @@
-.messages {
- text-align: center;
-}
-
-.back-button {
- cursor: pointer;
- margin-top: 10px;
- transform: rotate(180deg);
-}
-
-.back-button-icon {
- color: white;
-}
-
-.feed-button {
- cursor: pointer;
- margin-top: 10px;
-}
-
-.feed-button-icon {
- color: white;
-}
-
-.buttons {
- display: flex;
- justify-content: space-between;
-}
-
-.buttons div {
- display: flex;
-}
-
-.avatar {
- margin-top: 15px;
-}
diff --git a/website/src/app/contacts/contact-detail/contact-detail.component.html b/website/src/app/contacts/contact-detail/contact-detail.component.html
deleted file mode 100644
index ac9855c..0000000
--- a/website/src/app/contacts/contact-detail/contact-detail.component.html
+++ /dev/null
@@ -1,40 +0,0 @@
-
-
{{ loadingContactMessage }}
-
-
-
-
-
-
- mood
-
- {{ contact.name }}
-
- {{ contact.email }}
-
- {{ contact.number | phoneNumber : "default" : contact.country }}
-
-
-
-
-
-
-
{{ noContactFoundMessage }}
-
-
-
diff --git a/website/src/app/contacts/contact-detail/contact-detail.component.ts b/website/src/app/contacts/contact-detail/contact-detail.component.ts
deleted file mode 100644
index 8b8d90a..0000000
--- a/website/src/app/contacts/contact-detail/contact-detail.component.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { ContactFeedDialogComponent } from '../contact-feed';
-
-import {
- Contact,
- ContactService,
-} from '../shared';
-import { constants } from './contact-detail.constants';
-import { MatDialog } from '@angular/material';
-
-@Component({
- selector: 'app-contact-detail',
- templateUrl: './contact-detail.component.html',
- styleUrls: ['./contact-detail.component.css']
-})
-export class ContactDetailComponent implements OnInit {
- public loadingContactMessage: string = constants.LOADING_CONTACT_MESSAGE;
- public noContactFoundMessage: string = constants.NO_CONTACT_FOUND_MESSAGE;
- public isLoading = true;
- public contact: Contact = null;
-
- constructor(private contactService: ContactService, private route: ActivatedRoute, private dialog: MatDialog) { }
-
- ngOnInit() {
- this.loadContact();
- }
-
- private loadContact(): void {
- this.route.params.subscribe(params => {
- const id = +params['id'];
- this.contactService.getContact(id)
- .then(contact => {
- this.isLoading = false;
- this.contact = contact;
- });
- });
- }
-
- openDialog(): void {
- // For instructional purposes, insert a slight delay before opening the dialog
- setTimeout(() => {
- const dialogRef = this.dialog.open(ContactFeedDialogComponent, {disableClose: true, data: {name: this.contact.name}});
- dialogRef.afterClosed().subscribe(result => {
- // TODO do something here if Follow is clicked
- });
- }, 500);
- }
-}
diff --git a/website/src/app/contacts/contact-detail/contact-detail.constants.ts b/website/src/app/contacts/contact-detail/contact-detail.constants.ts
deleted file mode 100644
index ac89948..0000000
--- a/website/src/app/contacts/contact-detail/contact-detail.constants.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export const constants = {
- NO_CONTACT_FOUND_MESSAGE: 'Contact not found',
- LOADING_CONTACT_MESSAGE: 'Loading contact...'
-};
diff --git a/website/src/app/contacts/contact-detail/index.ts b/website/src/app/contacts/contact-detail/index.ts
deleted file mode 100644
index 3b3addc..0000000
--- a/website/src/app/contacts/contact-detail/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './contact-detail.component';
diff --git a/website/src/app/contacts/contact-edit/contact-edit.component.css b/website/src/app/contacts/contact-edit/contact-edit.component.css
deleted file mode 100644
index 37ca964..0000000
--- a/website/src/app/contacts/contact-edit/contact-edit.component.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.messages {
- text-align: center;
-}
-
-.back-button {
- cursor: pointer;
- margin-top: 10px;
- transform: rotate(180deg);
-}
-
-.back-button-icon {
- color: white;
-}
-
-.avatar {
- margin-top: 15px;
-}
-
-input {
- width: 300px;
-}
-
-i {
- cursor: pointer;
-}
-
-.left-padding {
- padding-left: 35px;
-}
-
-.update-contact-button {
- padding-left: 25px;
-}
\ No newline at end of file
diff --git a/website/src/app/contacts/contact-edit/contact-edit.component.html b/website/src/app/contacts/contact-edit/contact-edit.component.html
deleted file mode 100644
index aeded2a..0000000
--- a/website/src/app/contacts/contact-edit/contact-edit.component.html
+++ /dev/null
@@ -1,55 +0,0 @@
-
-
-
{{ loadingContactMessage }}
-
-
-
-
-
-
-
{{ noContactFoundMessage }}
-
-
-
-
-
-
Latest posts from {{name}}
-
-
-
- {{update}}
- at Wed 12:00
-
-
-
-
-
-
-
-
-
-
-
diff --git a/website/src/app/contacts/contact-feed/contact-feed.component.ts b/website/src/app/contacts/contact-feed/contact-feed.component.ts
deleted file mode 100644
index feefc56..0000000
--- a/website/src/app/contacts/contact-feed/contact-feed.component.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import {Component, OnInit, OnDestroy, NgZone, Optional, Inject} from '@angular/core';
-import {MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';
-import {ContactFeedService} from '../shared/services/contact-feed.service';
-import {Subscription} from 'rxjs/Subscription';
-
-@Component({
- selector: 'app-contact-feed',
- templateUrl: './contact-feed.component.html',
- styleUrls: ['./contact-feed.component.css']
-})
-export class ContactFeedDialogComponent implements OnInit, OnDestroy {
- sub: Subscription;
- updates: string[] = [];
- name: string;
- closeDisabled = true;
-
- constructor(public dialogRef: MatDialogRef, private feed: ContactFeedService, private zone: NgZone,
- @Optional() @Inject(MAT_DIALOG_DATA) data: any) {
- this.name = data.name;
- }
-
- ngOnInit() {
- /*
- This version runs inside the Angular zone, and will block Protractor testing indefinitely.
- this.sub = this.feed.getFeed().subscribe((x) => {
- this.updates.push(x);
- if (this.updates.length > 5) {
- this.updates.shift();
- }
- });
- */
- this.closeDisabled = false;
-
- this.zone.runOutsideAngular(() => {
- this.sub = this.feed.getFeed().subscribe((x) => {
- this.zone.run(() => {
- this.updates.push(x);
- if (this.updates.length > 4) {
- this.updates.shift();
- }
- });
- });
- });
- }
-
- ngOnDestroy() {
- this.sub.unsubscribe();
- }
-}
diff --git a/website/src/app/contacts/contact-feed/index.ts b/website/src/app/contacts/contact-feed/index.ts
deleted file mode 100644
index 14dd7ef..0000000
--- a/website/src/app/contacts/contact-feed/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './contact-feed.component';
diff --git a/website/src/app/contacts/contact-list/contact-list.component.css b/website/src/app/contacts/contact-list/contact-list.component.css
deleted file mode 100644
index 22c43d3..0000000
--- a/website/src/app/contacts/contact-list/contact-list.component.css
+++ /dev/null
@@ -1,38 +0,0 @@
-table {
- margin-left: auto;
- margin-right: auto;
- width: 50%;
-}
-
-tr {
- cursor: pointer;
-}
-
-.messages {
- text-align: center;
-}
-
-.add-fab {
- float: right;
- cursor: pointer;
-}
-
-.add-fab-icon {
- color: white;
-}
-
-.edit-icon {
- color: white;
-}
-
-.edit-icon:hover {
- color: black;
-}
-
-.delete-icon {
- color: white;
-}
-
-.delete-icon:hover {
- color: black;
-}
\ No newline at end of file
diff --git a/website/src/app/contacts/contact-list/contact-list.component.html b/website/src/app/contacts/contact-list/contact-list.component.html
deleted file mode 100644
index 132cbf3..0000000
--- a/website/src/app/contacts/contact-list/contact-list.component.html
+++ /dev/null
@@ -1,72 +0,0 @@
-
-
-
-
- |
- Name |
- Email |
- Number |
- |
- |
- |
-
-
-
-
- |
- mood
- |
- {{ contact.name }} |
- {{ contact.email }} |
-
- {{ contact.number | phoneNumber : "default" : contact.country : true }}
- |
-
-
- edit
-
- |
-
-
- delete
-
- |
-
-
- |
-
-
-
-
-
-
-
-
-
-
{{ noContactsFoundMessage }}
-
-
-
-
-
{{ loadingContactsMessage }}
-
-
-
-
-
{{ deletingContactMessage }}
-
-
-
-
-
{{ deletingContactsMessage }}
-
-
\ No newline at end of file
diff --git a/website/src/app/contacts/contact-list/contact-list.component.ts b/website/src/app/contacts/contact-list/contact-list.component.ts
deleted file mode 100644
index 644ab8f..0000000
--- a/website/src/app/contacts/contact-list/contact-list.component.ts
+++ /dev/null
@@ -1,111 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
-import { MatSnackBar, MatSnackBarConfig } from '@angular/material';
-
-import {
- Contact,
- ContactService
-} from '../shared';
-import { constants } from './contact-list.constants';
-import { CONTACTS } from '../shared/data/mock-contacts';
-
-@Component({
- selector: 'app-contact-list',
- templateUrl: './contact-list.component.html',
- styleUrls: ['./contact-list.component.css'],
- providers: [MatSnackBar]
-})
-export class ContactListComponent implements OnInit {
- public noContactsFoundMessage: string = constants.NO_CONTACTS_FOUND_MESSAGE;
- public loadingContactsMessage: string = constants.LOADING_CONTACTS_MESSAGE;
- public deletingContactsMessage: string = constants.DELETING_CONTACTS_MESSAGE;
- public deletingContactMessage: string = constants.DELETING_CONTACT_MESSAGE;
- public isLoading = true;
- public deletingContacts = false;
- public deletingContact = false;
- public readonly backupContacts: Array = CONTACTS.slice();
- public selectedContact: Contact;
-
- @Input('contacts') contacts: Contact[];
-
- constructor(private contactService: ContactService, private router: Router, private snackBar: MatSnackBar) {}
-
- ngOnInit() {
- this.getContacts();
- }
-
- public onClick(contact: Contact): void {
- this.router.navigate(['/contact', contact.id]);
- }
-
- public editContact(contact: Contact): void {
- this.router.navigate(['/edit', contact.id]);
- }
-
- public displayDeleteSnackBar(contact: Contact): void {
- const message = `${contact.name} deleted.`;
- const snackConfig: MatSnackBarConfig = {duration: 2000};
- const actionLabel = '';
-
- this.snackBar.open(message, actionLabel, snackConfig);
- }
-
- public deleteContact(contact: Contact): void {
- this.deletingContact = true;
- this.displayDeleteSnackBar(contact);
-
- this.contactService
- .delete(contact)
- .then(() => {
- this.contacts = this.contacts.filter(c => c !== contact);
-
- if (this.selectedContact === contact) {
- this.selectedContact = null;
- }
-
- this.deletingContact = false;
- });
- }
-
- public deleteContacts(): void {
- this.deletingContacts = true;
-
- this.contacts.forEach((contact, index) => {
- this.contactService.delete(contact);
-
- if (index === this.contacts.length - 1) {
- this.getContacts();
- }
- });
- }
-
- public getContacts(): void {
- this.isLoading = true;
-
- this.contactService.getContacts()
- .then(contacts => {
- this.isLoading = false;
- this.deletingContacts = false;
- this.contacts = contacts;
- });
- }
-
- public refreshContacts() {
- this.backupContacts.forEach((contact, index) => {
- this.contactService.post(contact);
-
- if (index === this.backupContacts.length - 1) {
- this.getContacts();
- }
- });
- }
-
- public saveContact(contact: Contact) {
- contact.favorite = !contact.favorite;
- this.contactService.save(contact);
- }
-
- public onSelect(contact: Contact): void {
- this.selectedContact = contact;
- }
-}
diff --git a/website/src/app/contacts/contact-list/contact-list.constants.ts b/website/src/app/contacts/contact-list/contact-list.constants.ts
deleted file mode 100644
index 79a9aea..0000000
--- a/website/src/app/contacts/contact-list/contact-list.constants.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export const constants = {
- NO_CONTACTS_FOUND_MESSAGE: 'You do not have any contacts yet',
- LOADING_CONTACTS_MESSAGE: 'Loading contacts...',
- DELETING_CONTACTS_MESSAGE: 'Deleting contacts...',
- DELETING_CONTACT_MESSAGE: 'Deleting contact...',
-};
diff --git a/website/src/app/contacts/contact-list/index.ts b/website/src/app/contacts/contact-list/index.ts
deleted file mode 100644
index d0193dc..0000000
--- a/website/src/app/contacts/contact-list/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './contact-list.component';
diff --git a/website/src/app/contacts/contacts.component.css b/website/src/app/contacts/contacts.component.css
deleted file mode 100644
index e69de29..0000000
diff --git a/website/src/app/contacts/contacts.component.html b/website/src/app/contacts/contacts.component.html
deleted file mode 100644
index 90dbb60..0000000
--- a/website/src/app/contacts/contacts.component.html
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/website/src/app/contacts/contacts.component.ts b/website/src/app/contacts/contacts.component.ts
deleted file mode 100644
index a649220..0000000
--- a/website/src/app/contacts/contacts.component.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Component } from '@angular/core';
-
-import { Contact } from './shared/';
-
-@Component({
- selector: 'app-contacts',
- templateUrl: './contacts.component.html',
- styleUrls: ['./contacts.component.css']
-})
-export class ContactsComponent {
- contacts: Contact[] = [];
-
- constructor() {}
-}
diff --git a/website/src/app/contacts/index.ts b/website/src/app/contacts/index.ts
deleted file mode 100644
index 70d5415..0000000
--- a/website/src/app/contacts/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './contacts.component';
diff --git a/website/src/app/contacts/new-contact/index.ts b/website/src/app/contacts/new-contact/index.ts
deleted file mode 100644
index e69de29..0000000
diff --git a/website/src/app/contacts/new-contact/new-contact.component.css b/website/src/app/contacts/new-contact/new-contact.component.css
deleted file mode 100644
index 5bbd233..0000000
--- a/website/src/app/contacts/new-contact/new-contact.component.css
+++ /dev/null
@@ -1,14 +0,0 @@
-.back-button {
- color: white;
- cursor: pointer;
- margin-top: 10px;
- transform: rotate(180deg);
-}
-
-.messages {
- text-align: center;
-}
-
-md-input {
- width: 300px;
-}
\ No newline at end of file
diff --git a/website/src/app/contacts/new-contact/new-contact.component.html b/website/src/app/contacts/new-contact/new-contact.component.html
deleted file mode 100644
index 4d65614..0000000
--- a/website/src/app/contacts/new-contact/new-contact.component.html
+++ /dev/null
@@ -1,33 +0,0 @@
-
-
-
Saving Contact...
-
-
\ No newline at end of file
diff --git a/website/src/app/contacts/new-contact/new-contact.component.ts b/website/src/app/contacts/new-contact/new-contact.component.ts
deleted file mode 100644
index 3794f8d..0000000
--- a/website/src/app/contacts/new-contact/new-contact.component.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { MatDialog } from '@angular/material';
-import { Router } from '@angular/router';
-
-import { ContactService } from '../shared/services/contact.service';
-import { Contact } from '../shared/models/contact.model';
-import { InvalidEmailModalComponent } from '../shared';
-import { InvalidPhoneNumberModalComponent } from '../shared';
-
-@Component({
- selector: 'app-new-contact',
- templateUrl: './new-contact.component.html',
- styleUrls: ['./new-contact.component.css']
-})
-export class NewContactComponent implements OnInit {
- public contact: Contact;
- public id: number;
- public savingContact = false;
-
- constructor(private contactService: ContactService, private router: Router, private dialog: MatDialog) { }
-
- ngOnInit() {
- this.contactService.getContacts()
- .then(contacts => { this.createNewContact(contacts.length); });
- }
-
- createNewContact(numContacts: number) {
- const contactId = numContacts + 1;
-
- this.contact = {
- id: contactId,
- email: '',
- number: '',
- country: 'us',
- favorite: false
- };
- }
-
- public addNewContact(contact: Contact): void {
- if (!this.isFormValid()) {
- return;
- }
-
- this.savingContact = true;
-
- this.contactService.save(contact)
- .then(() => {
- this.savingContact = false;
- this.router.navigate(['/']);
- });
- }
-
- private isEmailValid(): boolean {
- return this.contact.email === '' ||
- (this.contact.email !== '' && this.contact.email.includes('@') && this.contact.email.includes('.'));
- }
-
- private isPhoneNumberValid(): boolean {
- return this.contact.number === '' ||
- this.contact.number !== '' && this.contact.number.length === 10 && /^\d+$/.test(this.contact.number);
- }
-
- private isFormValid(): boolean {
- if (!this.isEmailValid()) {
- this.dialog.open(InvalidEmailModalComponent);
- return false;
- }
-
- if (!this.isPhoneNumberValid()) {
- this.dialog.open(InvalidPhoneNumberModalComponent);
- return false;
- }
-
- return true;
- }
-}
diff --git a/website/src/app/contacts/shared/data/index.ts b/website/src/app/contacts/shared/data/index.ts
deleted file mode 100644
index 24f6f9c..0000000
--- a/website/src/app/contacts/shared/data/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './mock-contacts';
diff --git a/website/src/app/contacts/shared/favorite-icon/favorite-icon.constants.ts b/website/src/app/contacts/shared/favorite-icon/favorite-icon.constants.ts
deleted file mode 100644
index 6986436..0000000
--- a/website/src/app/contacts/shared/favorite-icon/favorite-icon.constants.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export const constants = {
- classes: {
- SOLID_STAR: 'fa fa-star fa-lg',
- OUTLINE_STAR: 'fa fa-star-o fa-lg',
- SOLID_STAR_STYLE_LIST: ['fa', 'fa-star', 'fa-lg'],
- OUTLINE_STAR_STYLE_LIST: ['fa', 'fa-star-o', 'fa-lg']
- }
-};
diff --git a/website/src/app/contacts/shared/favorite-icon/favorite-icon.directive.ts b/website/src/app/contacts/shared/favorite-icon/favorite-icon.directive.ts
deleted file mode 100644
index b9233b6..0000000
--- a/website/src/app/contacts/shared/favorite-icon/favorite-icon.directive.ts
+++ /dev/null
@@ -1,129 +0,0 @@
-import { Directive, ElementRef, Input, HostListener, OnInit, Renderer } from '@angular/core';
-
-import { constants } from './favorite-icon.constants';
-
-/**
- * FavoriteIconDirective
- * =====================
- * The FavoriteIconDirective takes in a boolean and applies a star depending
- * to the element depending on whether the boolean is true or false. If the
- * boolean is false, when the element is rolled over a outlined star appears,
- * otherwise a star with the primary color will show up. The default primary
- * color is gold. You can set the primary star color by specifying the second
- * optional color parameter.
- *
- * Usage:
- *
- *
- * Example:
- *
- *
- *
- * Color (optional)
- * ---------------------------------
- * The second parameter is the color of the star.
- *
- * Usage:
- *
- *
- * Example:
- * | phoneNumber : }}
- *
- * Examples:
- * {{ 7035551234 | phoneNumber : "default" }}
- * (703) 555-1234
- *
- * {{ 7035551234 | phoneNumber : "DOTS" }}
- * 703.555.1234
- *
- * {{ 7035551234 | phoneNumber : "hyphens" }}
- * 703-555-1234
- *
- * Country Code Parameter (optional)
- * ---------------------------------
- * The second parameter is the country code. Any valid two character country
- * code that uses the North American Numbering Plan is acceptable. To see a list
- * of countries that use the North American Numbering Plan see
- * https://en.wikipedia.org/wiki/North_American_Numbering_Plan. To find their
- * respective two character country code please see:
- * http://www.worldatlas.com/aatlas/ctycodes.htm. The country code parameter is
- * case insensitive.
- *
- * Usage:
- * {{ | phoneNumber : : }}
- *
- * Example:
- * {{ 7035551234 | phoneNumber : "DOTS" : "US" }}
- * +1 703.555.1234
- *
- * Allow Empty String (optional)
- * ---------------------------------
- * Using this third parameter you can allow empty strings without throwing an
- * exception.
- *
- * Usage:
- * {{ | phoneNumber : : : }}
- *
- * Example:
- * {{ 7035551234 | phoneNumber : "DOTS" : "US" : true }}
-*/
-@Pipe({
- name: 'phoneNumber'
-})
-export class PhoneNumberPipe implements PipeTransform {
-
- transform(value: string = '', format?: string, countryCode: string = '', allowEmptyString?: boolean): string {
- let phoneNumber: PhoneNumber = null;
- let formattedPhoneNumber = '';
-
- if (allowEmptyString && value === '') {
- return '';
- }
-
- if (this.isPhoneNumberValid(value)) {
- phoneNumber = new PhoneNumber(value);
- formattedPhoneNumber = phoneNumber.getFormattedPhoneNumber(format, countryCode);
- }
-
- return formattedPhoneNumber;
- }
-
- private isPhoneNumberValid(phoneNumber: any): boolean {
- const VALID_PHONE_LENGTH = 10;
- let isPhoneNumberValid = false;
-
- if (isNaN(phoneNumber)) {
- console.error(phoneNumberErrorMessages.INVALID_PHONE_NUMBER_TYPE_ERR);
- } else if (phoneNumber.toString().length !== VALID_PHONE_LENGTH) {
- console.error(phoneNumberErrorMessages.INVALID_PHONE_NUMBER_LENGTH_ERR);
- } else {
- isPhoneNumberValid = true;
- }
-
- return isPhoneNumberValid;
- }
-}
diff --git a/website/src/app/contacts/shared/services/contact-feed.service.ts b/website/src/app/contacts/shared/services/contact-feed.service.ts
deleted file mode 100644
index f964d08..0000000
--- a/website/src/app/contacts/shared/services/contact-feed.service.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs/Rx';
-
-const FEED_UPDATES = [
- `Time my favorite, for burritos and beers #BurritoLyfe`,
- `Had my first Soylent today. I\'ve reached peak SF.`,
- `Is it raining for anyone else, or is it just me?`,
- `lmao cats are so funny!`,
- `When I say mizzenmast, what I really mean is larders`,
- `A rolling stone is your oyster`,
- `Taco Bell? More like Taco Cartel, amirite?`,
- `"Um" - 1st horse that got ridden`,
- `The guy at Chipotle couldn\'t close my burrito. He looked up at me. I looked at him. I whispered, "It\'s not your fault." He wept in my
- arms.`
-];
-
-/**
- * A fake service that returns an observable of a contact's social media updates.
- */
-@Injectable()
-export class ContactFeedService {
- constructor() { }
-
- public getFeed() {
- return Observable.interval(500)
- .map((x) => Math.random() * 2 + 2)
- .concatMap((x) => Observable.of(x).delay(x * 1000))
- .map((x) => FEED_UPDATES[Math.floor(Math.random() * FEED_UPDATES.length)]);
- }
-}
diff --git a/website/src/app/contacts/shared/services/contact.service.ts b/website/src/app/contacts/shared/services/contact.service.ts
deleted file mode 100644
index 5a93a51..0000000
--- a/website/src/app/contacts/shared/services/contact.service.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import { Injectable } from '@angular/core';
-import { Headers, Http } from '@angular/http';
-
-import 'rxjs/add/operator/toPromise';
-
-import { Contact } from '../';
-
-@Injectable()
-export class ContactService {
- private contactsUrl = 'app/contacts';
- private headers: Headers = new Headers({'Content-Type': 'application/json'});
-
- constructor(private http: Http) { }
-
- public getContacts(): any {
- return this.http.get(this.contactsUrl)
- .toPromise()
- .then(response => response.json().data as Contact)
- .catch(this.handleError);
- }
-
- public getContact(id: number): Promise {
- return this.getContacts()
- .then(contacts => contacts.find(contact => contact.id === id));
- }
-
- public save(contact: Contact): Promise {
- if (contact.id) {
- return this.put(contact);
- }
-
- return this.post(contact);
- }
-
- public new(contact: Contact): Promise {
- return this.post(contact);
- }
-
- public delete(contact: Contact): Promise {
- const url = `${this.contactsUrl}/${contact.id}`;
-
- return this.http
- .delete(url, {headers: this.headers})
- .toPromise()
- .then(() => null)
- .catch(this.handleError);
- }
-
- public post(contact: Contact): Promise {
- return this.http
- .post(this.contactsUrl, JSON.stringify(contact), {headers: this.headers})
- .toPromise()
- .then(res => res.json())
- .catch(this.handleError);
- }
-
- public put(contact: Contact): Promise {
- const url = `${this.contactsUrl}/${contact.id}`;
-
- return this.http
- .put(url, JSON.stringify(contact), {headers: this.headers})
- .toPromise()
- .then(() => contact)
- .catch(this.handleError);
- }
-
- private handleError(error: any): Promise {
- console.error('An error occurred', error);
- return Promise.reject(error.message || error);
- }
-}
diff --git a/website/src/app/contacts/shared/services/index.ts b/website/src/app/contacts/shared/services/index.ts
deleted file mode 100644
index a406d99..0000000
--- a/website/src/app/contacts/shared/services/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './contact.service';
-export * from './contact-feed.service';
diff --git a/website/src/app/contacts/shared/show-contacts/index.ts b/website/src/app/contacts/shared/show-contacts/index.ts
deleted file mode 100644
index 9cae32f..0000000
--- a/website/src/app/contacts/shared/show-contacts/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './show-contacts.directive';
diff --git a/website/src/app/contacts/shared/show-contacts/show-contacts.directive.ts b/website/src/app/contacts/shared/show-contacts/show-contacts.directive.ts
deleted file mode 100644
index 9de0174..0000000
--- a/website/src/app/contacts/shared/show-contacts/show-contacts.directive.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
-
-/**
- * ShowContactsDirective
- * =====================
- * The ShowContactsDirective takes in a boolean and will remove or add
- * an element to the DOM whether the boolean is true or false. The
- * implementation of the ShowContactsDirective is almost exactly what ngIf
- * does. This directive is only to demonstrate how a structural directive
- * works. It should not be used in production.
- *
- * Usage:
- *
- *
- * Example:
- *
- */
-
-@Directive({
- selector: '[appShowContacts]'
-})
-export class ShowContactsDirective {
- private templateRef: TemplateRef;
- private viewContainer: ViewContainerRef;
-
- constructor(templateRef: TemplateRef, viewContainer: ViewContainerRef) {
- this.templateRef = templateRef;
- this.viewContainer = viewContainer;
- }
-
- @Input() set appShowContacts(shouldShow: boolean) {
- if (shouldShow) {
- this.viewContainer.createEmbeddedView(this.templateRef);
- } else {
- this.viewContainer.clear();
- }
- }
-}
diff --git a/website/src/app/contacts/testing/do-classes-match.ts b/website/src/app/contacts/testing/do-classes-match.ts
deleted file mode 100644
index 197e54b..0000000
--- a/website/src/app/contacts/testing/do-classes-match.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { ComponentRef, DebugElement } from '@angular/core';
-import { ComponentFixture } from '@angular/core/testing';
-
-export function doClassesMatch(resultClasses: DOMTokenList, expectedClasses: string[]): boolean {
- let classesMatch = true;
- let currentClass: string = null;
-
- for (let i = 0; i < expectedClasses.length; i++) {
- currentClass = expectedClasses[i];
- classesMatch = resultClasses.contains(currentClass);
-
- if (!classesMatch) {
- break;
- }
- }
-
- return classesMatch;
-}
diff --git a/website/src/app/contacts/testing/get-element.ts b/website/src/app/contacts/testing/get-element.ts
deleted file mode 100644
index f593702..0000000
--- a/website/src/app/contacts/testing/get-element.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { ComponentRef } from '@angular/core';
-import { ComponentFixture } from '@angular/core/testing';
-
-export function getElement(fixture: ComponentFixture>): HTMLElement {
- const el: HTMLElement = fixture.nativeElement as HTMLElement;
- return el;
-}
diff --git a/website/src/app/contacts/testing/get-star-element.ts b/website/src/app/contacts/testing/get-star-element.ts
deleted file mode 100644
index 57fc912..0000000
--- a/website/src/app/contacts/testing/get-star-element.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { ComponentRef, DebugElement } from '@angular/core';
-import { ComponentFixture } from '@angular/core/testing';
-
-export function getStarElement(fixture: ComponentFixture>, defaultElementIndex: number): DebugElement {
- const el: DebugElement = fixture.nativeElement as DebugElement;
- return el.children[defaultElementIndex];
-}
diff --git a/website/src/app/contacts/testing/index.ts b/website/src/app/contacts/testing/index.ts
deleted file mode 100644
index d17e9f3..0000000
--- a/website/src/app/contacts/testing/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './get-star-element';
-export * from './do-classes-match';
-export * from './get-element';
diff --git a/website/src/app/in-memory-data.service.ts b/website/src/app/in-memory-data.service.ts
deleted file mode 100644
index d570083..0000000
--- a/website/src/app/in-memory-data.service.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { InMemoryDbService } from 'angular-in-memory-web-api';
-
-import { Contact } from './contacts/shared/models/';
-import { CONTACTS } from './contacts/shared/data/mock-contacts';
-
-export class InMemoryDataService implements InMemoryDbService {
- createDb() {
- const contacts: Contact[] = CONTACTS;
-
- return {contacts};
- }
-}
diff --git a/website/src/app/index.ts b/website/src/app/index.ts
deleted file mode 100644
index 875bdb2..0000000
--- a/website/src/app/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './app.component';
-export * from './app.module';
diff --git a/website/src/app/page-not-found-component/index.ts b/website/src/app/page-not-found-component/index.ts
deleted file mode 100644
index 98af254..0000000
--- a/website/src/app/page-not-found-component/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './page-not-found-component.component';
diff --git a/website/src/app/page-not-found-component/page-not-found-component.component.css b/website/src/app/page-not-found-component/page-not-found-component.component.css
deleted file mode 100644
index e69de29..0000000
diff --git a/website/src/app/page-not-found-component/page-not-found-component.component.html b/website/src/app/page-not-found-component/page-not-found-component.component.html
deleted file mode 100644
index 70aa5ad..0000000
--- a/website/src/app/page-not-found-component/page-not-found-component.component.html
+++ /dev/null
@@ -1,3 +0,0 @@
-
- 404 - Sorry page not found.
-
diff --git a/website/src/app/page-not-found-component/page-not-found-component.component.ts b/website/src/app/page-not-found-component/page-not-found-component.component.ts
deleted file mode 100644
index e090724..0000000
--- a/website/src/app/page-not-found-component/page-not-found-component.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
- selector: 'app-page-not-found-component',
- templateUrl: './page-not-found-component.component.html',
- styleUrls: ['./page-not-found-component.component.css']
-})
-export class PageNotFoundComponent implements OnInit {
-
- constructor() {}
-
- ngOnInit() {
- }
-
-}
diff --git a/website/src/app/rxjs-extensions.ts b/website/src/app/rxjs-extensions.ts
deleted file mode 100644
index ca710e4..0000000
--- a/website/src/app/rxjs-extensions.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// Observable class extensions
-import 'rxjs/add/observable/of';
-import 'rxjs/add/observable/throw';
-
-// Observable operators
-import 'rxjs/add/operator/catch';
-import 'rxjs/add/operator/debounceTime';
-import 'rxjs/add/operator/distinctUntilChanged';
-import 'rxjs/add/operator/do';
-import 'rxjs/add/operator/filter';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/switchMap';
diff --git a/website/src/app/shared/index.ts b/website/src/app/shared/index.ts
deleted file mode 100644
index e69de29..0000000
diff --git a/website/src/assets/.gitkeep b/website/src/assets/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/website/src/assets/login.html b/website/src/assets/login.html
deleted file mode 100644
index 87d358e..0000000
--- a/website/src/assets/login.html
+++ /dev/null
@@ -1,15 +0,0 @@
-
-
-
-
- Login Page
-
-
-Fake Login Page!
-
-
-
diff --git a/website/src/components/ContactDetail.tsx b/website/src/components/ContactDetail.tsx
new file mode 100644
index 0000000..173c95e
--- /dev/null
+++ b/website/src/components/ContactDetail.tsx
@@ -0,0 +1,84 @@
+import { useEffect, useState } from 'react';
+import { useParams, Link } from 'react-router-dom';
+import {
+ Card, CardContent, Typography, Fab, LinearProgress, Dialog,
+} from '@mui/material';
+import { Mood, ArrowForward, RssFeed } from '@mui/icons-material';
+import { Contact } from '../models/contact';
+import { contactService } from '../services/contact.service';
+import { formatPhoneNumber } from '../utils/phone-number';
+import { ContactFeedDialog } from './ContactFeedDialog';
+
+const LOADING_CONTACT_MESSAGE = 'Loading contact...';
+const NO_CONTACT_FOUND_MESSAGE = 'Contact not found';
+
+export function ContactDetail() {
+ const { id } = useParams<{ id: string }>();
+ const [contact, setContact] = useState(null);
+ const [isLoading, setIsLoading] = useState(true);
+ const [feedOpen, setFeedOpen] = useState(false);
+
+ useEffect(() => {
+ const loadContact = async () => {
+ const result = await contactService.getContact(Number(id));
+ setContact(result || null);
+ setIsLoading(false);
+ };
+ loadContact();
+ }, [id]);
+
+ const openDialog = () => {
+ setTimeout(() => setFeedOpen(true), 500);
+ };
+
+ if (isLoading) {
+ return (
+
+
{LOADING_CONTACT_MESSAGE}
+
+
+ );
+ }
+
+ if (!contact) {
+ return (
+
+
{NO_CONTACT_FOUND_MESSAGE}
+
+ );
+ }
+
+ return (
+
+
+
+
+ {contact.name}
+
+ {contact.email}
+
+
+ {formatPhoneNumber(contact.number || '', 'default', contact.country || '')}
+
+
+
+
+
+
+
+
+
{LOADING_CONTACT_MESSAGE}
+
+
+ );
+ }
+
+ if (!contact) {
+ return (
+
+
{NO_CONTACT_FOUND_MESSAGE}
+
+ );
+ }
+
+ return (
+
+
+
+
+
+ setContact({ ...contact, name: e.target.value })}
+ fullWidth
+ margin="normal"
+ />
+ setContact({ ...contact, email: e.target.value })}
+ fullWidth
+ margin="normal"
+ />
+ setContact({ ...contact, number: e.target.value })}
+ fullWidth
+ margin="normal"
+ />
+
+ Country code
+
+
+
+
+
+
+
+
+
+
+
+
+
setSnackbarOpen(false)}
+ message="Contact updated"
+ />
+
+
+
+
+
+ {updates.map((update, i) => (
+
+
+
+ ))}
+
+ ) : (
+
+ )}
+
+
+
+
+
+
+ );
+}
diff --git a/website/src/components/ContactList.tsx b/website/src/components/ContactList.tsx
new file mode 100644
index 0000000..337cd9d
--- /dev/null
+++ b/website/src/components/ContactList.tsx
@@ -0,0 +1,198 @@
+import { useEffect, useState, useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import {
+ Table, TableBody, TableCell, TableHead, TableRow,
+ Button, Fab, Snackbar, LinearProgress, Tooltip,
+} from '@mui/material';
+import { Add, Edit, Delete, Mood } from '@mui/icons-material';
+import { Contact } from '../models/contact';
+import { contactService } from '../services/contact.service';
+import { CONTACTS } from '../services/mock-contacts';
+import { formatPhoneNumber } from '../utils/phone-number';
+import { FavoriteIcon } from './FavoriteIcon';
+
+const NO_CONTACTS_FOUND_MESSAGE = 'You do not have any contacts yet';
+const LOADING_CONTACTS_MESSAGE = 'Loading contacts...';
+const DELETING_CONTACTS_MESSAGE = 'Deleting contacts...';
+const DELETING_CONTACT_MESSAGE = 'Deleting contact...';
+
+export function ContactList() {
+ const navigate = useNavigate();
+ const [contacts, setContacts] = useState([]);
+ const [isLoading, setIsLoading] = useState(true);
+ const [deletingContacts, setDeletingContacts] = useState(false);
+ const [deletingContact, setDeletingContact] = useState(false);
+ const [snackbarOpen, setSnackbarOpen] = useState(false);
+ const [snackbarMessage, setSnackbarMessage] = useState('');
+
+ const getContacts = useCallback(async () => {
+ setIsLoading(true);
+ const data = await contactService.getContacts();
+ setContacts(data);
+ setIsLoading(false);
+ setDeletingContacts(false);
+ }, []);
+
+ useEffect(() => {
+ getContacts();
+ }, [getContacts]);
+
+ const handleClick = (contact: Contact) => {
+ navigate(`/contact/${contact.id}`);
+ };
+
+ const handleEdit = (contact: Contact) => {
+ navigate(`/edit/${contact.id}`);
+ };
+
+ const handleDelete = async (contact: Contact) => {
+ setDeletingContact(true);
+ setSnackbarMessage(`${contact.name} deleted.`);
+ setSnackbarOpen(true);
+ await contactService.delete(contact);
+ setContacts((prev) => prev.filter((c) => c.id !== contact.id));
+ setDeletingContact(false);
+ };
+
+ const handleDeleteAll = async () => {
+ setDeletingContacts(true);
+ for (const contact of contacts) {
+ await contactService.delete(contact);
+ }
+ await getContacts();
+ };
+
+ const handleRefresh = async () => {
+ for (const contact of CONTACTS) {
+ await contactService.save({ ...contact });
+ }
+ await getContacts();
+ };
+
+ const handleSaveContact = async (contact: Contact) => {
+ const updated = { ...contact, favorite: !contact.favorite };
+ await contactService.save(updated);
+ setContacts((prev) => prev.map((c) => (c.id === updated.id ? updated : c)));
+ };
+
+ if (deletingContact) {
+ return (
+
+
{DELETING_CONTACT_MESSAGE}
+
+
+ );
+ }
+
+ if (deletingContacts) {
+ return (
+
+
{DELETING_CONTACTS_MESSAGE}
+
+
+ );
+ }
+
+ if (isLoading) {
+ return (
+
+
{LOADING_CONTACTS_MESSAGE}
+
+
+ );
+ }
+
+ if (contacts.length === 0) {
+ return (
+
+
{NO_CONTACTS_FOUND_MESSAGE}
+
+
+ );
+ }
+
+ return (
+
+
+
+
+
+ Name
+ Email
+ Number
+
+
+
+
+
+
+ {contacts.map((contact) => (
+
+ handleClick(contact)}>
+
+
+ handleClick(contact)}>
+ {contact.name}
+
+ handleClick(contact)}>
+ {contact.email}
+
+ handleClick(contact)}>
+ {formatPhoneNumber(contact.number || '', 'default', contact.country || '', true)}
+
+
+
+ handleEdit(contact)}
+ />
+
+
+
+
+ handleDelete(contact)}
+ />
+
+
+
+
+
+ handleSaveContact(contact)}
+ />
+
+
+
+
+ ))}
+
+
+
+
+
navigate('/add')}
+ >
+
+
+
+
+
setSnackbarOpen(false)}
+ message={snackbarMessage}
+ />
+
+
Saving Contact...
+
+
+ );
+ }
+
+ if (!contact) {
+ return ;
+ }
+
+ return (
+
+
+
+ Add New Contact
+ setContact({ ...contact, name: e.target.value })}
+ fullWidth
+ margin="normal"
+ required
+ />
+ {contact.name && (
+ <>
+ setContact({ ...contact, email: e.target.value })}
+ fullWidth
+ margin="normal"
+ />
+ setContact({ ...contact, number: e.target.value })}
+ fullWidth
+ margin="normal"
+ />
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Page Not Found
+
The page you are looking for does not exist.
+