refactor: refactoring the code according to yuliaHope requirements

client/src/components/Schedule/CalendarView/Calendar.tsx

@@ -1,21 +1,20 @@
 import React from 'react';
 import MobileCalendar from './components/MobileCalendar';
-import useWindowDimensions from './utils/useWindowDimensions';
 import DesktopCalendar from './components/DesktopCalendar';
 import { CourseEvent } from 'services/course';
+import { isMobile } from 'mobile-device-detect';
 
 type Props = {
   data: CourseEvent[];
   timeZone: string;
 };
 
 export const CalendarView: React.FC<Props> = ({data, timeZone}) => {
-  const { width } = useWindowDimensions();
 
   return <>
-    {width > 750
-      ? <DesktopCalendar data={data} timeZone={timeZone}/>
-      : <MobileCalendar data={data} timeZone={timeZone}/>
+    {isMobile
+      ? <MobileCalendar data={data} timeZone={timeZone}/>
+      : <DesktopCalendar data={data} timeZone={timeZone}/>
     }
   </>
 };

client/src/components/Schedule/CalendarView/components/DesktopCalendar.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import { Calendar, Badge } from 'antd';
-import { getMonthValue } from '../utils/DateFuncs';
-import { getListData } from '../utils/DataFuncs';
+import { getMonthValue, getListData } from '../utils/filters';
 import { Scrollbars } from 'react-custom-scrollbars';
 import { ModalWindow } from './Modal';
 import { CourseEvent } from 'services/course';
@@ -58,12 +57,12 @@ const DesktopCalendar: React.FC<Props> = ({ data, timeZone }) => {
   const monthCellRender = (date: unknown | Moment) => {
     const num = getMonthValue(date as unknown as Moment, data, timeZone);
 
-    return num ? (
+    return !!num && (
       <div >
         <span>Number of events</span>
         <section>{num}</section>
       </div>
-    ) : null;
+    );
   }
 
 

client/src/components/Schedule/CalendarView/components/MobileCalendar.tsx

@@ -1,11 +1,23 @@
 import React, { useState} from 'react';
 import { Calendar, Badge, List } from 'antd';
-import { getMonthValue } from '../utils/DateFuncs';
+import { getMonthValue, getListData } from '../utils/filters';
 import {ModalWindow} from './Modal';
-import { getListData } from '../utils/DataFuncs';
 import { CourseEvent } from 'services/course';
 import { Moment } from 'moment';
 import {dateWithTimeZoneRenderer} from 'components/Table';
+import css from 'styled-jsx/css';
+
+const numberEventsStyle = css`section {
+  position: absolute;
+  bottom: 12px;
+  background: #FB6216;
+  right: -13px;
+  border-radius: 100%;
+  width: 20px;
+  height: 20px;
+  line-height: 19px;
+  color: white;
+}`
 
 type Props = {
   data: CourseEvent[];
@@ -42,48 +54,26 @@ const MobileCalendar: React.FC<Props> = ({ data, timeZone }) => {
 
   function dateCellRender(date: unknown | Moment) {
     const numberEvents = getListData(date as unknown as Moment, data, timeZone).length;
-    return numberEvents > 0 ? (
+    return !!(numberEvents > 0) && (
       <>
         <section>{numberEvents}</section>
         <style jsx>
-          {`section {
-            position: absolute;
-            bottom: 12px;
-            background: #FB6216;
-            right: -13px;
-            border-radius: 100%;
-            width: 20px;
-            height: 20px;
-            line-height: 20px;
-            color: white;
-          }`}
+          {numberEventsStyle}
         </style>
       </>
-    ) : null;
+    );
   }
 
   const monthCellRender = (date: unknown | Moment) => {
-    const num = getMonthValue(date as unknown as Moment, data, timeZone);
-    return num ? (
+    const numberEvents = getMonthValue(date as unknown as Moment, data, timeZone);
+    return !!numberEvents && (
       <>
-      <section>{num}</section>
+      <section>{numberEvents}</section>
       <style jsx>
-          {`
-            section {
-              position: absolute;
-              bottom: 12px;
-              background: #FB6216;
-              right: -13px;
-              border-radius: 100%;
-              width: 20px;
-              height: 20px;
-              line-height: 20px;
-              color: white;
-            }
-          `}
-        </style>
+        {numberEventsStyle}
+      </style>
       </>
-    ) : null;
+    );
   }
 
   return (
@@ -106,7 +96,7 @@ const MobileCalendar: React.FC<Props> = ({ data, timeZone }) => {
             <List.Item.Meta
               title={<Badge style={{paddingLeft: 8, paddingRight: 10}} color={item.color} text={item.name} />}
             />
-            <div><b>Time:</b> {dateWithTimeZoneRenderer(timeZone, 'h:mm')(dateTime)}</div>
+            <div>Time: {dateWithTimeZoneRenderer(timeZone, 'h:mm')(dateTime)}</div>
           </List.Item>
         )
       }}/>

client/src/components/Schedule/CalendarView/components/Modal.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Modal} from 'antd';
+import { Modal, Space} from 'antd';
 import moment from 'moment';
 import {GithubUserLink} from 'components';
 import { renderTag, urlRenderer } from 'components/Table/renderers';
@@ -15,9 +15,6 @@ type Props = {
 
 export function ModalWindow({ isOpen, dataEvent, handleOnClose, timeZone }: Props) {
 
-  //!plug
-  const newTimeZone = timeZone === 'Europe/Yekaterinburg' ? 'Asia/Yekaterinburg' : timeZone;
-
   return (
     <>
       <Modal
@@ -28,19 +25,21 @@ export function ModalWindow({ isOpen, dataEvent, handleOnClose, timeZone }: Prop
         onCancel={() => handleOnClose()}
         visible={isOpen}
       >
-        <div>Date: {moment(dataEvent.dateTime, 'YYYY-MM-DD HH:mmZ').tz(newTimeZone).format('LLL')}</div>
-        {dataEvent.event.descriptionUrl &&
-          <div>Url: {urlRenderer(dataEvent.event.descriptionUrl)}</div>
-        }
+        <div>Date: {moment(dataEvent.dateTime, 'YYYY-MM-DD HH:mmZ').tz(timeZone).format('LLL')}</div>
         {dataEvent.event.description &&
           <div>{dataEvent.event.description}</div>
         }
-        <div>
-          {renderTag(EventTypeToName[dataEvent.event.type] || dataEvent.event.type, EventTypeColor[dataEvent.event.type as keyof typeof EventTypeColor])}
-        </div>
         {!!dataEvent.organizer.githubId &&
           <div>Organizer: <GithubUserLink value={dataEvent.organizer.githubId} /></div>
         }
+        <Space>
+          {dataEvent.event.descriptionUrl &&
+            <div>Url: {urlRenderer(dataEvent.event.descriptionUrl)}</div>
+          }
+          <div>
+            {renderTag(EventTypeToName[dataEvent.event.type] || dataEvent.event.type, EventTypeColor[dataEvent.event.type as keyof typeof EventTypeColor])}
+          </div>
+        </Space>
         <style jsx>{`
           div {
             margin-bottom: 10px;

client/src/components/Schedule/CalendarView/utils/filters.ts

@@ -0,0 +1,22 @@
+import moment, { Moment } from 'moment';
+import { CourseEvent } from 'services/course';
+import { EventTypeColor} from 'components/Schedule/model';
+
+export function getListData(calendarCellDate: Moment, data: CourseEvent[], timeZone: string) {
+  return filterByDate(calendarCellDate, data, timeZone).map((el: CourseEvent) => {
+    const tagColor = EventTypeColor[el.event.type as keyof typeof EventTypeColor];
+    return { color: tagColor || '#d9d9d9' , name: el.event.name, key: el.id };
+  });
+}
+
+export function filterByDate(calendarCellDate: Moment, data: CourseEvent[], timeZone: string) {
+  return data.filter(
+    (event) => calendarCellDate.format('YYYY-MM-DD') === moment(event.dateTime, 'YYYY-MM-DD HH:mmZ').tz(timeZone).format('YYYY-MM-DD'),
+  );
+}
+
+export function getMonthValue(calendarCellDate: Moment, data: CourseEvent[], timeZone: string) {
+  return data.filter(
+    (event) => calendarCellDate.format('MM-YYYY') === moment(event.dateTime, 'YYYY-MM-DD HH:mmZ').tz(timeZone).format('MM-YYYY'),
+  ).length;
+}