diff --git a/crabfit-frontend/src/pages/Event/Event.tsx b/crabfit-frontend/src/pages/Event/Event.tsx index f37204e..382ba33 100644 --- a/crabfit-frontend/src/pages/Event/Event.tsx +++ b/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 () => { diff --git a/crabfit-frontend/src/pages/Home/Home.tsx b/crabfit-frontend/src/pages/Home/Home.tsx index 88aa382..7a4e3ab 100644 --- a/crabfit-frontend/src/pages/Home/Home.tsx +++ b/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 }) => { About / Donate + + {!!recentsStore.recents.length && ( + + +

Recently visited

+ {recentsStore.recents.map(event => ( + + {event.name} + Created {dayjs.unix(event.created).format('D MMMM, YYYY')} + + ))} +
+
+ )} + + {offline ? (

🦀📵

diff --git a/crabfit-frontend/src/pages/Home/homeStyle.ts b/crabfit-frontend/src/pages/Home/homeStyle.ts index 6f5460e..f37f112 100644 --- a/crabfit-frontend/src/pages/Home/homeStyle.ts +++ b/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; + } +`; diff --git a/crabfit-frontend/src/stores/index.ts b/crabfit-frontend/src/stores/index.ts index 7bcf3ba..2ebd22a 100644 --- a/crabfit-frontend/src/stores/index.ts +++ b/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' }, +));