Extract recents to component

crabfit-frontend/src/components/Recents/Recents.tsx

@@ -0,0 +1,30 @@
+import { useTranslation } from 'react-i18next';
+import { useRecentsStore } from 'stores';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+
+import { AboutSection, StyledMain } from '../../pages/Home/homeStyle';
+import { Recent } from './recentsStyle';
+
+dayjs.extend(relativeTime);
+
+const Recents = () => {
+  const recents = useRecentsStore(state => state.recents);
+  const { t } = useTranslation(['home', 'common']);
+
+  return !!recents.length && (
+    <AboutSection id="recents">
+      <StyledMain>
+        <h2>{t('home:recently_visited')}</h2>
+        {recents.map(event => (
+          <Recent href={`/${event.id}`} key={event.id}>
+            <span className="name">{event.name}</span>
+            <span className="date" title={dayjs.unix(event.created).format('D MMMM, YYYY')}>{t('common:created')} {dayjs.unix(event.created).fromNow()}</span>
+          </Recent>
+        ))}
+      </StyledMain>
+    </AboutSection>
+  );
+};
+
+export default Recents;

crabfit-frontend/src/components/Recents/recentsStyle.ts

@@ -0,0 +1,36 @@
+import styled from '@emotion/styled';
+
+export const Recent = styled.a`
+	text-decoration: none;
+  color: inherit;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 5px 0;
+  flex-wrap: wrap;
+
+  & .name {
+    font-weight: 700;
+    font-size: 1.1em;
+    color: ${props => props.theme.primaryDark};
+    flex: 1;
+    display: block;
+  }
+  & .date {
+    font-weight: 400;
+    opacity: .8;
+    white-space: nowrap;
+  }
+
+  &:hover .name {
+    text-decoration: underline;
+  }
+
+  @media (max-width: 500px) {
+    display: block;
+
+    & .date {
+      white-space: normal;
+    }
+  }
+`;

crabfit-frontend/src/components/index.ts

@@ -17,3 +17,4 @@ export { default as Donate } from './Donate/Donate';
 export { default as Settings } from './Settings/Settings';
 export { default as Egg } from './Egg/Egg';
 export { default as Footer } from './Footer/Footer';
+export { default as Recents } from './Recents/Recents';

crabfit-frontend/src/pages/Create/Create.tsx

@@ -15,6 +15,7 @@ import {
 	Button,
 	Donate,
 	Error,
+  Recents,
 } from 'components';
 
 import {
@@ -28,9 +29,6 @@ import {
   Footer,
   AboutSection,
 } from './createStyle';
-import {
-  Recent,
-} from '../Home/homeStyle';
 
 import api from 'services';
 import { useRecentsStore } from 'stores';
@@ -54,7 +52,7 @@ const Create = ({ offline }) => {
 
   const { push } = useHistory();
 
-  const recentsStore = useRecentsStore();
+  const addRecent = useRecentsStore(state => state.addRecent);
 
 	useEffect(() => {
     if (window.self === window.top) {
@@ -123,7 +121,7 @@ const Create = ({ offline }) => {
 				},
 			});
       setCreatedEvent(response.data);
-      recentsStore.addRecent({
+      addRecent({
         id: response.data.id,
         created: response.data.created,
         name: response.data.name,
@@ -175,19 +173,7 @@ const Create = ({ offline }) => {
         </StyledMain>
       ) : (
         <>
-          {!!recentsStore.recents.length && (
+          <Recents />
-            <AboutSection id="recents">
-              <StyledMain>
-                <h2>Recently visited</h2>
-                {recentsStore.recents.map(event => (
-                  <Recent href={`/${event.id}`} target="_blank" key={event.id}>
-                    <span className="name">{event.name}</span>
-                    <span className="date">Created {dayjs.unix(event.created).format('D MMMM, YYYY')}</span>
-                  </Recent>
-                ))}
-              </StyledMain>
-            </AboutSection>
-          )}
 
           <StyledMain>
             {offline ? (

crabfit-frontend/src/pages/Home/Home.tsx

@@ -17,6 +17,7 @@ import {
 	Center,
 	Error,
   Footer,
+  Recents,
 } from 'components';
 
 import {
@@ -33,11 +34,9 @@ import {
 	StatNumber,
 	StatLabel,
   OfflineMessage,
-  Recent,
 } from './homeStyle';
 
 import api from 'services';
-import { useRecentsStore } from 'stores';
 
 import logo from 'res/logo.svg';
 import timezones from 'res/timezones.json';
@@ -60,7 +59,6 @@ const Home = ({ offline }) => {
 		version: 'loading...',
 	});
 	const { push } = useHistory();
-  const recentsStore = useRecentsStore();
   const { t } = useTranslation(['common', 'home']);
 
 	useEffect(() => {
@@ -161,19 +159,7 @@ const Home = ({ offline }) => {
 				</Links>
       </StyledMain>
 
-      {!!recentsStore.recents.length && (
+      <Recents />
-        <AboutSection id="recents">
-          <StyledMain>
-            <h2>{t('home:recently_visited')}</h2>
-            {recentsStore.recents.map(event => (
-              <Recent href={`/${event.id}`} key={event.id}>
-                <span className="name">{event.name}</span>
-                <span className="date">Created {dayjs.unix(event.created).format('D MMMM, YYYY')}</span>
-              </Recent>
-            ))}
-          </StyledMain>
-        </AboutSection>
-      )}
 
       <StyledMain>
         {offline ? (

crabfit-frontend/src/pages/Home/homeStyle.ts

@@ -87,38 +87,3 @@ export const OfflineMessage = styled.div`
 	text-align: center;
   margin: 50px 0 20px;
 `;
-
-export const Recent = styled.a`
-	text-decoration: none;
-  color: inherit;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 5px 0;
-  flex-wrap: wrap;
-
-  & .name {
-    font-weight: 700;
-    font-size: 1.1em;
-    color: ${props => props.theme.primaryDark};
-    flex: 1;
-    display: block;
-  }
-  & .date {
-    font-weight: 400;
-    opacity: .8;
-    white-space: nowrap;
-  }
-
-  &:hover .name {
-    text-decoration: underline;
-  }
-
-  @media (max-width: 500px) {
-    display: block;
-
-    & .date {
-      white-space: normal;
-    }
-  }
-`;