replace moment with luxon

package.json

@@ -6,10 +6,10 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
-    "moment": "^2.29.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-scripts": "4.0.1"
+    "react-scripts": "4.0.1",
+    "luxon": "^2.4.0"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -28,6 +28,5 @@
     "not dead",
     "not ie <= 11",
     "not op_mini all"
-  ],
-  "devDependencies": {  }
+  ]
 }

project-docs/wave-01.md

@@ -10,7 +10,7 @@ A good way to test this code as you write it would be to take the first chat mes
 
 The styles necessary to make an app which visually matches the demo above have been provided for you, but you will need to make use of them in your React components by adding classes to specific HTML elements in your JSX.
 
-There are several CSS classes for the different elements of a chat message. You should attempt to determine which classes should be applied to which HTML elements, however if you are stuck on this please ask a member of the instructional staff as the styling on this project is not the learning goal.
+There are several CSS classes for the different elements of a chat message. You should attempt to determine which classes should be applied to which HTML elements yourself. However, if you are stuck on this, please reach out for help as the styling is not the primary learning goal of this project.
 
 Usually our convention for styles in React applications is to have a separate CSS file for every component. 
 

src/components/Timestamp.js

@@ -1,10 +1,11 @@
-import React from 'react';
-import moment from 'moment';
+import { DateTime } from 'luxon';
 
 const TimeStamp = (props) => {
-  const time = moment(props.time);
-  const absolute = time.format('MMMM Do YYYY, h:mm:ss a');
-  const relative = time.fromNow();
+  console.log(props);
+
+  const time = DateTime.fromISO(props.time);
+  const absolute = time.toFormat('MMMM Do YYYY, h:mm:ss a');
+  const relative = time.toRelative();
 
   return <span title={absolute}>{relative}</span>;
 };