Fixed date parsing bug. Small UI fixes.

This commit is contained in:
Paweł Malak
2021-10-14 01:46:48 +02:00
parent 3b22cd9442
commit b04d042255
4 changed files with 32 additions and 22 deletions

View File

@@ -1,12 +1,15 @@
import { ReactNode } from 'react';
interface Props { interface Props {
title?: string; title?: string;
children?: JSX.Element | JSX.Element[]; children?: ReactNode;
classes?: string; classes?: string;
bodyClasses?: string; bodyClasses?: string;
} }
export const Card = (props: Props): JSX.Element => { 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 parentClasses = `card mb-3 ${classes}`;
const childClasses = `card-body ${bodyClasses}`; const childClasses = `card-body ${bodyClasses}`;

View File

@@ -4,7 +4,7 @@ interface Props {
export const Layout = (props: Props): JSX.Element => { export const Layout = (props: Props): JSX.Element => {
return ( return (
<div className='container-lg px-5'> <div className='container-lg'>
<div className='row py-4'>{props.children}</div> <div className='row py-4'>{props.children}</div>
</div> </div>
); );

View File

@@ -29,25 +29,23 @@ export const Snippet = (): JSX.Element => {
) : ( ) : (
<Fragment> <Fragment>
<PageHeader title='' prevDest={from} /> <PageHeader title='' prevDest={from} />
<div className='row mt-3'> <div className='col-12 col-md-7 col-lg-8 mt-3'>
<div className='col-12 col-md-7 col-lg-8'> <SnippetCode
<SnippetCode code={currentSnippet.code}
code={currentSnippet.code} language={currentSnippet.language}
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> </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> </Fragment>
)} )}
</Layout> </Layout>

View File

@@ -1,5 +1,6 @@
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime'; import relativeTime from 'dayjs/plugin/relativeTime';
import customParseFormat from 'dayjs/plugin/customParseFormat';
interface Return { interface Return {
formatted: string; formatted: string;
@@ -8,8 +9,16 @@ interface Return {
export const dateParser = (date: Date): Return => { export const dateParser = (date: Date): Return => {
dayjs.extend(relativeTime); 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 formatted = parsedDate.format('YYYY-MM-DD HH:mm');
const relative = parsedDate.fromNow(); const relative = parsedDate.fromNow();