Recently visited section

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

@@ -34,7 +34,7 @@ import {
 } from './eventStyle';
 
 import api from 'services';
-import { useSettingsStore } from 'stores';
+import { useSettingsStore, useRecentsStore } from 'stores';
 
 import logo from 'res/logo.svg';
 import timezones from 'res/timezones.json';
@@ -47,6 +47,8 @@ const Event = (props) => {
   const timeFormat = useSettingsStore(state => state.timeFormat);
   const weekStart = useSettingsStore(state => state.weekStart);
 
+  const addRecent = useRecentsStore(state => state.addRecent);
+
 	const { register, handleSubmit } = useForm();
 	const { id } = props.match.params;
   const { offline } = props;
@@ -74,6 +76,11 @@ const Event = (props) => {
 				const response = await api.get(`/event/${id}`);
 
 				setEvent(response.data);
+        addRecent({
+          id: response.data.id,
+          created: response.data.created,
+          name: response.data.name,
+        });
 				document.title = `${response.data.name} | Crab Fit`;
 			} catch (e) {
 				console.error(e);
@@ -83,7 +90,7 @@ const Event = (props) => {
 		};
 
 		fetchEvent();
-	}, [id]);
+	}, [id, addRecent]);
 
 	useEffect(() => {
 		const fetchPeople = async () => {

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

@@ -33,9 +33,11 @@ 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';
@@ -58,6 +60,7 @@ const Home = ({ offline }) => {
 		version: 'loading...',
 	});
 	const { push } = useHistory();
+  const recentsStore = useRecentsStore();
 
 	useEffect(() => {
 		const fetch = async () => {
@@ -154,7 +157,23 @@ const Home = ({ offline }) => {
 				<Links>
 					<a href="#about">About</a> / <a href="#donate">Donate</a>
 				</Links>
+      </StyledMain>
 
+      {!!recentsStore.recents.length && (
+        <AboutSection id="recents">
+          <StyledMain>
+            <h2>Recently visited</h2>
+            {recentsStore.recents.map(event => (
+              <Recent href={`/${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 ? (
           <OfflineMessage>
             <h1>🦀📵</h1>

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

@@ -7,6 +7,7 @@ export const StyledMain = styled.div`
 `;
 
 export const CreateForm = styled.form`
+  margin: 0 0 60px;
 `;
 
 export const TitleSmall = styled.span`
@@ -45,7 +46,7 @@ export const Links = styled.nav`
 `;
 
 export const AboutSection = styled.section`
-	margin: 60px 0 0;
+	margin: 30px 0 0;
 	background-color: ${props => props.theme.primaryBackground};
 	padding: 20px 0;
 `;
@@ -93,3 +94,24 @@ 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;
+  margin: 10px 0;
+
+  & .name {
+    font-weight: 800;
+    font-size: 1.1em;
+  }
+  & .date {
+    font-weight: 400;
+  }
+
+  &:hover .name {
+    text-decoration: underline;
+  }
+`;

crabfit-frontend/src/stores/index.ts

@@ -13,3 +13,22 @@ export const useSettingsStore = create(persist(
   }),
   { name: 'crabfit-settings' },
 ));
+
+export const useRecentsStore = create(persist(
+  set => ({
+    recents: [],
+
+    addRecent: event => set(state => {
+      const recents = state.recents.filter(e => e.id !== event.id);
+      recents.unshift(event);
+      recents.length = Math.min(recents.length, 5);
+      return { recents };
+    }),
+    removeRecent: id => set(state => {
+      const recents = state.recents.filter(e => e.id !== id);
+      return { recents };
+    }),
+    clearRecents: () => set({ recents: [] }),
+  }),
+  { name: 'crabfit-recent' },
+));