used moment.js for date formatting

ahorowitz123 · Jul 23, 2018 · 6350664 · 6350664
1 parent 068ff11
commit 6350664
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 1 deletion.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "ajv": "^6.5.2",
+    "moment": "^2.22.2",
     "react": "^16.4.1",
     "react-bootstrap": "^0.32.1",
     "react-dom": "^16.4.1",

diff --git a/src/components/App/App.css b/src/components/App/App.css
@@ -2,6 +2,10 @@
   text-align: center;
 }
 
+.App th {
+  text-align: center;
+}
+
 .App-logo {
   animation: App-logo-spin infinite 20s linear;
   height: 80px;

diff --git a/src/components/MovieList/index.js b/src/components/MovieList/index.js
@@ -1,6 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { Table } from "react-bootstrap";
+import moment from "moment";
 
 const MovieList = props =>
   <Table responsive>
@@ -12,13 +13,14 @@ const MovieList = props =>
     </thead>
     <tbody>
       {props.movies.map((movie, index) => {
+        const thisDate = moment(movie.release_date, "YYYY-MM-DD")
         return (
           <tr key={index}>
             <td>
               {movie.title}
             </td>
             <td>
-              {movie.release_date}
+              {thisDate.format("dddd, MMMM D YYYY")}
             </td>
           </tr>
         );