chore: optimize EventList display

frontend/src/components/EventList.jsx

@@ -4,7 +4,7 @@ import TableCell from '@material-ui/core/TableCell';
 import PropTypes from 'prop-types';
 import InfoIcon from '@material-ui/icons/InfoOutlined';
 import { actions as calendarActions, eventStruct } from '../redux/modules/calendar';
-import {actions as spaceDataActions, spacedataStruct} from '../redux/modules/spacedata';
+import { actions as spaceDataActions, spacedataStruct } from '../redux/modules/spacedata';
 import classNames from 'classnames';
 import { withStyles } from '@material-ui/core/styles';
 import { AutoSizer, Column, Table } from 'react-virtualized';
@@ -158,9 +158,6 @@ class EventList extends React.Component {
     this.props.fetchCalendars();
   }
 
-  formatDate = date => (date.format('DD.MM.YYYY'));
-  formatTime = date => (date.format('HH:mm'));
-
   render() {
 
     const rows = this.props.events.filter(event =>
@@ -171,8 +168,7 @@ class EventList extends React.Component {
     ).map(event => {
       return {
         ...event,
-        start_date: this.formatDate(event.start),
-        start_time: this.formatTime(event.start),
+        start: event.start.format('dd DD. MMM., HH:mm') ?? '',
         summary: event.summary || event.description,
         link: event.url && <a href={event.url}>
           <InfoIcon style={{ cursor: 'pointer', color: '#fff' }} />
@@ -180,39 +176,39 @@ class EventList extends React.Component {
       }
     });
 
-    return (
-      <WrappedVirtualizedTable
-        rowCount={rows.length}
-        rowGetter={({ index }) => rows[index]}
-        columns={[
+    const columns = [
       {
-            width: 120,
+        width: 160,
         label: 'Date',
-            dataKey: 'start_date',
+        dataKey: 'start',
       },
       {
-            width: 120,
-            label: 'Time',
-            dataKey: 'start_time',
-          },
-          {
-            width: 120,
+        width: 200,
         flexGrow: 1,
         label: 'Summary',
         dataKey: 'summary',
       },
       {
-            width: 120,
-            flexGrow: 1,
-            label: 'Carbs (g)',
-            dataKey: 'space',
-          },
-          {
-            width: 120,
-            label: 'Protein (g)',
+        width: 10,
+        label: 'Link',
         dataKey: 'link',
       },
-        ]}
+      {
+        width: 250,
+        label: 'Space',
+        dataKey: 'space',
+        align: 'right',
+      },
+    ];
+    if ( this.props.spacedata.filter.length ) {
+      delete columns[3];
+    }
+
+    return (
+      <WrappedVirtualizedTable
+        rowCount={rows.length}
+        rowGetter={({ index }) => rows[index]}
+        columns={columns}
       />
     );
   }