Remove moment.js

Old and big.

assets/article/archive/ArticleArchiveWidget.js

@@ -1,4 +1,3 @@
-import moment from 'moment';
 // import $ from 'jquery';
 import { makeApiRequest } from 'common/utils';
 
@@ -82,7 +81,7 @@ function ArticleArchiveWidget() {
                     </div>
                     <div class="col-md-8">
                       <div class="pull-right article-detail-meta">
-                        <span>${moment(articles[i].published_date).format('DD.MM.YYYY')}</span>
+                        <span>${new Intl.DateTimeFormat("nb-NO", { dateStyle: "short"}).format(new Date(articles[i].published_date))}</span>
                       </div>
                       <a href="/article/${articles[i].id}/${articles[i].slug}">
                         <h3>${articles[i].heading}</h3>

assets/careeropportunity/components/JobList.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Col } from 'react-bootstrap';
-import moment from 'moment';
 import Fuse from 'fuse.js';
 import Job from './Job';
 import tagsPropTypes from '../propTypes/tags';
@@ -42,10 +41,10 @@ const arrangeJobs = (jobs, check) => {
 
 // Check for the deadline tags. If the difference between the deadline, and
 // the current date is less than the deadline specified by the tag, return true.
-const deadlineCheck = (job, id, tag) => (
-  moment().isValid(job.deadline) ?
-    new Date(job.deadline).getTime() - Date.now() <= tag.deadline : false
-);
+const deadlineCheck = (job, id, tag) => {
+  const date = Date.parse(job.deadline);
+  return !isNaN(date) ? new Date(job.deadline).getTime() - Date.now() <= tag.deadline : false;
+};
 
 const JobList = ({ jobs, tags, filterText }) => {
   const fuse = new Fuse(jobs, {

assets/careeropportunity/containers/App.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { Router, Route, Switch } from 'react-router';
-import moment from 'moment';
 import { createBrowserHistory } from 'history';
 import FilterableJobList from './FilterableJobList';
 import DetailView from './DetailView';
@@ -21,7 +20,9 @@ const getDeadlines = deadlines => (
 // Normalizes data from the server, most notably converting to camelCase.
 const normalizeData = job => ({
   locations: job.location.map(location => location.name), // Locations contains name and slug
-  deadline: job.deadline ? moment(job.deadline).format('Do MMMM YYYY') : 'Ikke spesifisert', // Format and give default value
+  deadline: job.deadline
+    ? new Intl.DateTimeFormat('nb-NO', { dateStyle: "long" }).format(new Date(job.deadline))
+    : 'Ikke spesifisert',
   companyImage: job.company.image,
   companyName: job.company.name,
   companyDescription: job.company.short_description,

assets/careeropportunity/index.jsx

@@ -1,11 +1,8 @@
 import React from 'react';
 import ReactDom from 'react-dom';
-import moment from 'moment';
 import App from './containers/App';
 import './less/career.less';
 
-moment.locale('nb');
-
 
 ReactDom.render(
   <App />,

assets/core/index.js

@@ -1,13 +1,9 @@
 import 'common/less/gallery.less';
-import moment from 'moment';
 import 'bootstrap';
 
 import { timeOutAlerts } from 'common/utils/';
 import init from './init';
 import './less/core.less';
 
-
-moment.locale('nb');
-
 init();
 timeOutAlerts();

assets/dashboard/article/article.js

@@ -1,4 +1,3 @@
-import moment from 'moment';
 // import jQuery from 'jquery';
 import { ajax, showStatusMessage } from 'common/utils';
 /**
@@ -88,15 +87,15 @@ const Article = (function PrivateArticle($) {
         let html = '';
         for (let i = 0; i < items.results.length; i += 1) {
           const item = items.results[i];
-          const t = moment(item.published_date);
+          const t = new Date(item.published_date);
 
           html += `
             <tr>
               <td>
                 <a href="${item.id}">${item.heading}</a>
               </td>
               <td>${item.authors}</td>
-              <td>${t.format('YYYY-MM-DD HH:MM:SS')}</td>
+              <td>${new Intl.DateTimeFormat("nb-NO", { dateStyle: "short", timeStyle: "medium" }).format(t)}</td>
               <td>
                 <a href="/dashboard/article/${item.id}/edit/">
                   <i class="fa fa-edit fa-lg"></i>

assets/dashboard/core/Gallery.js

@@ -1,7 +1,6 @@
 // import jQuery from 'jquery';
 import MicroEvent from 'common/utils/MicroEvent';
 import { ajaxEnableCSRF, format, render } from 'common/utils';
-import moment from 'moment';
 import GalleryCrop from './GalleryCrop';
 import GalleryUpload from './GalleryUpload';
 
@@ -147,7 +146,7 @@ const Gallery = (function PrivateGallery($) {
         Gallery.ajax('GET', `/api/v1/images/?query=${query}${preset ? `&preset=${preset}` : ''}`, null, (data) => {
           const images = data.results.map(image => ({
             ...image,
-            timestamp: moment(image.timpstamp).format('YYYY-MM-DD HH:MM:SS'),
+            timestamp: new Intl.DateTimeFormat("nb-NO", { dateStyle: "short", timeStyle: "medium" }).format(new Date(image.timpstamp)),
           }));
           let html = render(TMPL_IMAGE_SEARCH_RESULT, { images });
           if (!data.results.length) html = '<div class="col-md-12"><p>Ingen bilder matchet søket...</p></div></div>';

assets/dashboard/gallery/galleryDashboard.js

@@ -1,5 +1,4 @@
 // import jQuery from 'jquery';
-import moment from 'moment';
 import { ajax, showStatusMessage } from 'common/utils';
 
 /**
@@ -93,7 +92,8 @@ const GalleryDashboard = (function PrivateGalleryDashboard($) {
         html = '<tr><td colspan="4">Ingen bilder matchet søket...</td></tr>';
       } else {
         for (let i = 0; i < data.results.length; i += 1) {
-          const timestamp = moment(data.results[i].timestamp);
+          const timestamp = new Intl.DateTimeFormat("nb-NO", {
+            dateStyle: "short", "timeStyle": "medium"}).format(new Date(data.results[i].timestamp));
 
           html += `
             <tr>
@@ -106,7 +106,7 @@ const GalleryDashboard = (function PrivateGalleryDashboard($) {
                 <a href="${data.results[i].id}/">${data.results[i].name}</a>
               </td>
               <td>${data.results[i].description}</td>
-              <td>${timestamp.format('YYYY-MM-DD HH:MM:SS')}</td>
+              <td>${timestamp}</td>
               <td>${data.results[i].preset_display}</td>
             </tr>`;
         }

assets/frontpage/events/components/Event.jsx

@@ -26,7 +26,7 @@ Event.propTypes = {
   eventUrl: PropTypes.string.isRequired,
   images: EventImage.propTypes.images,
   ingress: PropTypes.string.isRequired,
-  startDate: PropTypes.string.isRequired,
+  startDate: PropTypes.instanceOf(Date).isRequired,
   title: PropTypes.string.isRequired,
 };
 

assets/frontpage/events/components/EventImage.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import moment from 'moment';
 import { Carousel } from 'react-bootstrap';
 import ImagePropTypes from 'common/proptypes/ImagePropTypes';
 
@@ -20,12 +19,12 @@ const EventImage = ({ date, eventUrl, images }) => (
         ))
       }
     </Carousel>
-    <span className="hero-date">{ moment(date).format('DD. MMMM') }</span>
+    <span className="hero-date">{ new Intl.DateTimeFormat("nb-NO", { month: "long", day: "2-digit" }).format(date) }</span>
   </div>
 );
 
 EventImage.propTypes = {
-  date: PropTypes.string.isRequired,
+  date: PropTypes.instanceOf(Date).isRequired,
   eventUrl: PropTypes.string.isRequired,
   images: PropTypes.arrayOf(ImagePropTypes),
 };

assets/frontpage/events/components/SmallEvent.jsx

@@ -1,11 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import moment from 'moment';
 
 const SmallEvent = ({ eventUrl, startDate, title }) => (
   <li>
     <span>
-      {moment(startDate).format('DD.MM')}
+      {new Intl.DateTimeFormat("nb-NO", { month: "2-digit", day: "2-digit" }).format(startDate)}
     </span>
     <a href={eventUrl}>
       {title}
@@ -15,7 +14,7 @@ const SmallEvent = ({ eventUrl, startDate, title }) => (
 
 SmallEvent.propTypes = {
   eventUrl: PropTypes.string.isRequired,
-  startDate: PropTypes.string.isRequired,
+  startDate: PropTypes.instanceOf(Date).isRequired,
   title: PropTypes.string.isRequired,
 };
 

assets/frontpage/events/containers/EventsContainer.jsx

@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import moment from 'moment';
 import Events from '../components/Events';
 import { setEventsForEventTypeId, toggleEventTypeDisplay } from '../utils';
 
@@ -16,41 +15,43 @@ const mergeEventImages = (eventImage, companyEvent) => {
   return [...eventImages, ...companyImages];
 };
 
-const DAYS_BACK_DELTA = moment().subtract(3, 'days');
-const DAYS_FORWARD_DELTA = moment().add(3, 'days');
+// 3 days in milliseconds
+const THREE_DAYS = 3 * 24 * 60 * 60 * 1000
+const DAYS_BACK_DELTA = new Date() - THREE_DAYS;
+const DAYS_FORWARD_DELTA = new Date() + THREE_DAYS;
 
 const getRegistrationFiltered = ({ attendance_event: attendance, event_start: startDate }) => {
+  const registration_start = attendance !== null ? new Date(attendance.registration_start) : null;
   if (
-    attendance &&
-    moment(attendance.registration_start).isBetween(
-      DAYS_BACK_DELTA,
-      DAYS_FORWARD_DELTA,
-    )
+    attendance
+    && DAYS_BACK_DELTA <= registration_start
+    && registration_start < DAYS_FORWARD_DELTA
   ) {
-    return attendance.registration_start;
+    return registration_start;
   }
   return startDate;
 };
 
 const apiEventsToEvents = event => ({
   eventUrl: `/events/${event.id}/${event.slug}`,
   ingress: event.ingress_short,
-  startDate: event.event_start,
-  endDate: event.event_end,
+  startDate: new Date(event.event_start),
+  endDate: new Date(event.event_end),
   registrationFiltered: getRegistrationFiltered(event),
   title: event.title,
   images: mergeEventImages(event.image, event.company_event),
 });
 
 const sortEvents = (a, b) => {
   // checks if the event is starting today or is ongoing
-  if (moment().isBetween(a.startDate, a.endDate)) {
-    if (moment().isBetween(b.startDate, b.endDate)) {
-      return moment(a.endDate).isBefore(b.endDate) ? -1 : 1;
+  const now = new Date();
+  if (a.startDate <= now && now < a.endDate) {
+    if (b.startDate <= now && now < b.endDate) {
+      return a.endDate < b.endDate ? -1 : 1;
     }
     return -1;
   }
-  return moment(a.registrationFiltered).isBefore(b.registrationFiltered) ? -1 : 1;
+  return a.registrationFiltered < b.registrationFiltered ? -1 : 1;
 };
 
 /*
@@ -84,7 +85,7 @@ const initialEventTypes = eventTypes => (
 class EventsContainer extends Component {
   constructor(props) {
     super(props);
-    this.API_URL = `/api/v1/events/?event_end__gte=${moment().format('YYYY-MM-DD')}`;
+    this.API_URL = `/api/v1/events/?event_end__gte=${new Date().toISOString().slice(0, "YYYY-MM-DD".length)}`;
     const eventTypes = [
       { id: '1', name: 'Sosialt' },
       { id: '2', name: 'Bedriftspresentasjon' },

package.json

@@ -19,7 +19,6 @@
     "jquery": "2",
     "js-cookie": "^3.0.5",
     "masonry-layout": "^4.1.1",
-    "moment": "^2.29.2",
     "prop-types": "^15.7.2",
     "react": "^16.8.6",
     "react-bootstrap": "0.33.1",