From b04d042255ed8ad327a00fa84fb6fa3fe28d095f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Malak?= <pawel999@icloud.com>
Date: Thu, 14 Oct 2021 01:46:48 +0200
Subject: [PATCH] Fixed date parsing bug. Small UI fixes.

---
 client/src/components/UI/Card.tsx   |  7 ++++--
 client/src/components/UI/Layout.tsx |  2 +-
 client/src/containers/Snippet.tsx   | 34 ++++++++++++++---------------
 client/src/utils/dateParser.ts      | 11 +++++++++-
 4 files changed, 32 insertions(+), 22 deletions(-)

diff --git a/client/src/components/UI/Card.tsx b/client/src/components/UI/Card.tsx
index 18ee470..0b493da 100644
--- a/client/src/components/UI/Card.tsx
+++ b/client/src/components/UI/Card.tsx
@@ -1,12 +1,15 @@
+import { ReactNode } from 'react';
+
 interface Props {
   title?: string;
-  children?: JSX.Element | JSX.Element[];
+  children?: ReactNode;
   classes?: string;
   bodyClasses?: string;
 }
 
 export const Card = (props: Props): JSX.Element => {
-  const { title, children, classes, bodyClasses } = props;
+  const { title, children, classes = '', bodyClasses = '' } = props;
+
   const parentClasses = `card mb-3 ${classes}`;
   const childClasses = `card-body ${bodyClasses}`;
 
diff --git a/client/src/components/UI/Layout.tsx b/client/src/components/UI/Layout.tsx
index 7d39671..9a84fad 100644
--- a/client/src/components/UI/Layout.tsx
+++ b/client/src/components/UI/Layout.tsx
@@ -4,7 +4,7 @@ interface Props {
 
 export const Layout = (props: Props): JSX.Element => {
   return (
-    <div className='container-lg px-5'>
+    <div className='container-lg'>
       <div className='row py-4'>{props.children}</div>
     </div>
   );
diff --git a/client/src/containers/Snippet.tsx b/client/src/containers/Snippet.tsx
index 99b9504..3ea5009 100644
--- a/client/src/containers/Snippet.tsx
+++ b/client/src/containers/Snippet.tsx
@@ -29,25 +29,23 @@ export const Snippet = (): JSX.Element => {
       ) : (
         <Fragment>
           <PageHeader title='' prevDest={from} />
-          <div className='row mt-3'>
-            <div className='col-12 col-md-7 col-lg-8'>
-              <SnippetCode
-                code={currentSnippet.code}
-                language={currentSnippet.language}
-              />
-            </div>
-            <div className='col-12 col-md-5 col-lg-4'>
-              <SnippetDetails snippet={currentSnippet} />
-            </div>
-            {currentSnippet.docs && (
-              <div className='col-12'>
-                <Card title='Snippet documentation'>
-                  <hr />
-                  <SnippetDocs markdown={currentSnippet.docs} />
-                </Card>
-              </div>
-            )}
+          <div className='col-12 col-md-7 col-lg-8 mt-3'>
+            <SnippetCode
+              code={currentSnippet.code}
+              language={currentSnippet.language}
+            />
           </div>
+          <div className='col-12 col-md-5 col-lg-4 mt-md-3'>
+            <SnippetDetails snippet={currentSnippet} />
+          </div>
+          {currentSnippet.docs && (
+            <div className='col-12'>
+              <Card title='Snippet documentation'>
+                <hr />
+                <SnippetDocs markdown={currentSnippet.docs} />
+              </Card>
+            </div>
+          )}
         </Fragment>
       )}
     </Layout>
diff --git a/client/src/utils/dateParser.ts b/client/src/utils/dateParser.ts
index 587d66b..be7791a 100644
--- a/client/src/utils/dateParser.ts
+++ b/client/src/utils/dateParser.ts
@@ -1,5 +1,6 @@
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
 
 interface Return {
   formatted: string;
@@ -8,8 +9,16 @@ interface Return {
 
 export const dateParser = (date: Date): Return => {
   dayjs.extend(relativeTime);
+  dayjs.extend(customParseFormat);
 
-  const parsedDate = dayjs(date);
+  // test date format
+  const regex = /\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\.|\+|-|Z)+/;
+  const dateFormat = regex.test(date.toString())
+    ? 'YYYY-MM-DD[T]HH:mm:ss.SSSZ'
+    : 'YYYY-MM-DD HH:mm:ss.SSS Z';
+
+  // parse date
+  const parsedDate = dayjs(date, dateFormat);
   const formatted = parsedDate.format('YYYY-MM-DD HH:mm');
   const relative = parsedDate.fromNow();