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' },
+));