Ticket date formatter

README.md

@@ -46,7 +46,17 @@ c. Our ticket's data *might* also contain labels (tags), but we're not making us
 ![labels](https://d2x3xhvgiqkx42.cloudfront.net/3d412e82-d97e-487e-b1a3-41a6bd24a05b/b9bd9ddb-c0bf-4b55-888e-747f0d6524c8/2019/09/27/6d307660-953a-4e00-a28d-ffbc48e68fb8/5d422571-d37c-4890-9837-4f786f1e5e10.png)  
 Friendly reminder to commit and push after completing this step.
 
-#### 1D - Bonus Task
+
+d. We want to display the date of tickets that were created in the past week in a "time ago" format. Change creation date for those tickets to be displayed as the following:
+1. if it's less than 60 minutes show the minutes ago
+2. if it's less than 24 hours show the hours age
+3. otherwise show days ago
+Make sure the new date is displayed under "time-ago" className.
+Feel free to change ticket's data in order to see your change.
+BONUS: Add a tooltip with full date on hover the time ago text.
+Friendly reminder to commit and push after completing this step.
+
+#### 1E - Bonus Task
 d. **Bonus** Step *a* wasn't enough - some tickets have long content. Add a show more / show less functionality when the content exceeds 3 lines, as following:  
 ![show more/less](https://d2x3xhvgiqkx42.cloudfront.net/3d412e82-d97e-487e-b1a3-41a6bd24a05b/b9bd9ddb-c0bf-4b55-888e-747f0d6524c8/2019/09/27/fd41c164-d566-471e-9723-e785b313845a/738cbaa0-93e8-4f02-861d-6fab92c608bd.gif)  
  Friendly reminder to commit and push after completing this step.

client/src/App.tsx

@@ -23,6 +23,22 @@ export class App extends React.PureComponent<{}, AppState> {
 		});
 	}
 
+	calculateTimeAgo = (time: number) => {
+		const passedTime = Date.now() - time;
+		const minutes = Math.floor(passedTime / 60000);
+		const hours = Math.floor(minutes / 60);
+		const days = Math.floor(hours / 24);
+		if (minutes < 60) {
+			return `${minutes}m ago`;
+		}
+		if (hours < 24) {
+			return `${hours}h ago`;
+		}
+		else {
+			return `${days}d ago`
+		}
+	}
+
 	renderTickets = (tickets: Ticket[]) => {
 
 		const filteredTickets = tickets
@@ -33,7 +49,7 @@ export class App extends React.PureComponent<{}, AppState> {
 			{filteredTickets.map((ticket) => (<li key={ticket.id} className='ticket'>
 				<h5 className='title'>{ticket.title}</h5>
 				<footer>
-					<div className='meta-data'>By {ticket.userEmail} | { new Date(ticket.creationTime).toLocaleString()}</div>
+					<div className='meta-data'>By {ticket.userEmail} | <div className='time-ago'>{this.calculateTimeAgo(ticket.creationTime)}</div></div>
 				</footer>
 			</li>))}
 		</ul>);

lerna.json

@@ -1,8 +1,9 @@
 {
   "packages": [
-	"client",
-	"server",
-    "configuration"
+	  "client",
+	  "server",
+    "configuration",
+    "tester"
   ],
   "version": "0.0.0"
 }

package.json

@@ -13,6 +13,7 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
+    "@types/node": "^16.6.0",
     "lerna": "^3.13.1"
   }
 }

server/index.ts

@@ -2,9 +2,12 @@ import express from 'express';
 import bodyParser = require('body-parser');
 import { tempData } from './temp-data';
 import { serverAPIPort, APIPath } from '@fed-exam/config';
+import { Ticket } from '../client/src/api';
 
 console.log('starting server', { serverAPIPort, APIPath });
 
+let data = tempData;
+
 const app = express();
 
 const PAGE_SIZE = 20;
@@ -23,10 +26,24 @@ app.get(APIPath, (req, res) => {
   // @ts-ignore
   const page: number = req.query.page || 1;
 
-  const paginatedData = tempData.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE);
+  const paginatedData = data.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE);
 
   res.send(paginatedData);
 });
+app.post(APIPath, (req, res) => {
+
+  // @ts-ignore
+  const tickets: Ticket[] = req.body || [];
+  data = tickets;
+
+  res.end();
+});
+app.post(`${APIPath}/clean`, (req, res) => {
+
+  // @ts-ignore
+  data = tempData;
+  res.end();
+});
 
 app.listen(serverAPIPort);
 console.log('server running', serverAPIPort)

server/tsconfig.json

@@ -16,7 +16,8 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-	"noEmit": true
+	"noEmit": true,
+  "types": ["jest", "node"]
   },
   "include": [
 	  "types.d.ts",

tester/e2e.test.ts

@@ -1,6 +1,13 @@
 const puppeteer = require('puppeteer');
 const serverData = require('../server/data.json');
-import { staticsUrl } from '@fed-exam/config';
+
+const host = 'http://localhost'
+const staticsPort = 3000;
+const staticsUrl = `${host}:${staticsPort}/`;
+const serverAPIPort = 3232;
+const APIDomain = 'tickets';
+const APIPath = `/api/${APIDomain}`;
+const APIRootPath = `${host}:${serverAPIPort}${APIPath}`
 
 let browser;
 let page;
@@ -37,7 +44,7 @@ const goToMainPage = async () => {
 
 describe("Titles", () => {
 
-  test('20 titles are rendered', async () => {
+  test('20 titles are rendered', async () => {  
     await goToMainPage();
     const titles = await page.$$('.title')