From a96400e9cbe144731aedf3b34437daf2ce5213da Mon Sep 17 00:00:00 2001
From: sitek94 <msitkowski94@gmail.com>
Date: Mon, 14 Dec 2020 00:46:49 +0100
Subject: [PATCH 01/17] add copyright

---
 src/app/unauthenticated-app.js | 18 ++++++++++++++++++
 src/components/copyright.js    | 14 ++++++++++++++
 2 files changed, 32 insertions(+)
 create mode 100644 src/components/copyright.js

diff --git a/src/app/unauthenticated-app.js b/src/app/unauthenticated-app.js
index e0d1c1e..b6d6ca7 100644
--- a/src/app/unauthenticated-app.js
+++ b/src/app/unauthenticated-app.js
@@ -16,6 +16,7 @@ import {
   makeStyles,
   Toolbar,
   Typography,
+  Box,
 } from '@material-ui/core';
 import { FullPageImageBackground, LandingScreen } from 'screens/landing';
 import { ResetPasswordScreen } from 'screens/reset-password';
@@ -25,6 +26,7 @@ import { LocaleSelect } from 'components/locale-select';
 import { useTranslation } from 'translations';
 import { GithubRepoLink } from 'components/github-repo-link';
 import { DarkModeSwitch } from 'components/dark-mode-switch';
+import { Copyright } from 'components/copyright';
 
 const useStyles = makeStyles((theme) => ({
   // App
@@ -68,6 +70,7 @@ function UnathenticatedApp() {
           <AppRoutes />
         </FullPageImageBackground>
       </main>
+      <Footer />
     </div>
   );
 }
@@ -173,6 +176,21 @@ function Nav() {
   );
 }
 
+function Footer() {
+  return (
+    <Box
+      sx={{
+        position: 'absolute',
+        bottom: 0,
+        left: '50%',
+        transform: 'translateX(-50%)',
+      }}
+    >
+      <Copyright />
+    </Box>
+  );
+}
+
 // Routes
 function AppRoutes() {
   return (
diff --git a/src/components/copyright.js b/src/components/copyright.js
new file mode 100644
index 0000000..ab76ab5
--- /dev/null
+++ b/src/components/copyright.js
@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { Box, Typography } from '@material-ui/core';
+
+function Copyright(props) {
+  return (
+    <Typography variant="subtitle2" {...props} component="div">
+      <Box sx={{ color: 'rgba(255, 255, 255, 0.7)' }}>
+        Copyright © {new Date().getFullYear()} Maciek Sitkowski
+      </Box>
+    </Typography>
+  );
+}
+
+export { Copyright };

From 7c065bbf235ff5634d4f363cf92393aa24659d70 Mon Sep 17 00:00:00 2001
From: sitek94 <msitkowski94@gmail.com>
Date: Mon, 14 Dec 2020 10:10:28 +0100
Subject: [PATCH 02/17] export <AuthProviderButton>

---
 src/components/auth-providers-list.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/auth-providers-list.js b/src/components/auth-providers-list.js
index 6557bdd..315e5e0 100644
--- a/src/components/auth-providers-list.js
+++ b/src/components/auth-providers-list.js
@@ -28,7 +28,7 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-const AuthProviderButton = ({ providerColor, ...props }) => {
+function AuthProviderButton({ providerColor, ...props }) {
   const classes = useStyles();
 
   // Create a theme with primary color set to corresponding auth provider color
@@ -55,7 +55,7 @@ const AuthProviderButton = ({ providerColor, ...props }) => {
       />
     </ThemeProvider>
   );
-};
+}
 
 function AuthProviderList({ text, disabled, onAuthProviderClick }) {
   const classes = useStyles();
@@ -93,4 +93,4 @@ AuthProviderList.propTypes = {
   onAuthProviderClick: PropTypes.func.isRequired,
 };
 
-export { AuthProviderList };
+export { AuthProviderList, AuthProviderButton };

From 6ca3dfbe776ed2d921cfdf57b0be11335c318264 Mon Sep 17 00:00:00 2001
From: sitek94 <msitkowski94@gmail.com>
Date: Mon, 14 Dec 2020 10:10:52 +0100
Subject: [PATCH 03/17] add "sign in as guest" translation

---
 src/translations/translations.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/translations/translations.js b/src/translations/translations.js
index ccf5335..61ac398 100644
--- a/src/translations/translations.js
+++ b/src/translations/translations.js
@@ -59,6 +59,11 @@ const translations = {
     es: 'Inicia sesión con',
     en: 'Sign in with',
   },
+  signInAsGuest: {
+    pl: 'Zaloguj się jako Gość',
+    es: 'Inicia sesión como Invitado',
+    en: 'Sign in as Guest'
+  },
 
   // Sign out
   signOut: {

From 3e0401677702ec72009e34aac120f66c65994760 Mon Sep 17 00:00:00 2001
From: sitek94 <msitkowski94@gmail.com>
Date: Mon, 14 Dec 2020 14:16:23 +0100
Subject: [PATCH 04/17] update react-query to v3!

---
 package.json                 |   3 +-
 src/api/checkmarks.js        | 100 +++++++++++++++++++------------
 src/api/habits.js            | 113 ++++++++++++++++++++---------------
 src/components/checkmark.js  |  13 ++--
 src/components/habit-list.js |   8 +--
 src/context/index.js         |   8 +--
 src/data/guest-data.js       |  73 ++++++++++++++++++++++
 src/screens/add-habit.js     |  19 +++---
 src/screens/dashboard.js     |   8 +--
 src/screens/edit-habit.js    |  12 ++--
 src/screens/manage-habits.js |   4 +-
 yarn.lock                    |  46 +++++++-------
 12 files changed, 258 insertions(+), 149 deletions(-)
 create mode 100644 src/data/guest-data.js

diff --git a/package.json b/package.json
index f55a056..3e0d90d 100644
--- a/package.json
+++ b/package.json
@@ -29,8 +29,7 @@
     "react-error-boundary": "^3.0.2",
     "react-hook-form": "^6.10.1",
     "react-icons": "^4.1.0",
-    "react-query": "^2.26.2",
-    "react-query-devtools": "^2.6.3",
+    "react-query": "^3.2.0",
     "react-router": "^6.0.0-beta.0",
     "react-router-dom": "^6.0.0-beta.0",
     "react-scripts": "4.0.0",
diff --git a/src/api/checkmarks.js b/src/api/checkmarks.js
index 5753d6d..59011d0 100644
--- a/src/api/checkmarks.js
+++ b/src/api/checkmarks.js
@@ -1,4 +1,4 @@
-import { useMutation, useQueryCache, useQuery } from 'react-query';
+import { useMutation, useQueryClient, useQuery } from 'react-query';
 import { useFirebase } from 'context/firebase-context';
 import { useAuth } from 'context/auth-context';
 import { EMPTY } from 'data/constants';
@@ -6,12 +6,12 @@ import { EMPTY } from 'data/constants';
 /**
  * Returns a function that adds a checkmark
  */
-export function useAddCheckmark() {
+export function useAddCheckmarkMutation() {
   const { db } = useFirebase();
   const { user } = useAuth();
-  const cache = useQueryCache();
+  const queryClient = useQueryClient();
 
-  return useMutation(
+  const addCheckmarkMutation = useMutation(
     (checkmark) => {
       // Get checkmark ref in the database
       const newCheckmarkRef = db.ref(`checkmarks/${user.uid}`).push();
@@ -27,25 +27,27 @@ export function useAddCheckmark() {
       // When mutate is called:
       onMutate: (checkmark) => {
         // Cancel any outgoing refetches (so they don't overwrite our optimistic update)
-        cache.cancelQueries('checkmarks');
+        queryClient.cancelQueries('checkmarks');
 
         // Snapshot previous values
-        const previousCheckmarks = cache.getQueryData('checkmarks');
+        const previousCheckmarks = queryClient.getQueryData('checkmarks');
 
         // Optimistically add new checkmark
-        cache.setQueryData('checkmarks', (old) => [...old, checkmark]);
+        queryClient.setQueryData('checkmarks', (old) => [...old, checkmark]);
 
         // Return a context object with the snapshotted value
         return { previousCheckmarks };
       },
       // If the mutation fails, use the context returned from onMutate to roll back
       onError: (error, newCheckmark, context) => {
-        cache.setQueryData('checkmarks', context.previousCheckmarks);
+        queryClient.setQueryData('checkmarks', context.previousCheckmarks);
       },
       // Always refetch after error or success:
-      onSettled: () => cache.invalidateQueries('checkmarks'),
+      onSettled: () => queryClient.invalidateQueries('checkmarks'),
     }
   );
+
+  return addCheckmarkMutation;
 }
 
 /**
@@ -55,7 +57,10 @@ export function useFetchCheckmarks() {
   const { db } = useFirebase();
   const { user } = useAuth();
 
-  return () => {
+  /**
+   * Fetches checkmarks all the user's checkmarks from the database.
+   */
+  const fetchCheckmarks = () => {
     // Get all the user's checkmarks from the database
     return db
       .ref(`checkmarks/${user.uid}`)
@@ -76,6 +81,8 @@ export function useFetchCheckmarks() {
         return checkmarks;
       });
   };
+
+  return fetchCheckmarks;
 }
 
 /**
@@ -83,13 +90,15 @@ export function useFetchCheckmarks() {
  *
  * Returns a react-query query, that fetches the checkmarks using `fetchCheckmark`
  */
-export function useCheckmarks() {
+export function useCheckmarksQuery() {
   const fetchCheckmarks = useFetchCheckmarks();
 
-  return useQuery('checkmarks', fetchCheckmarks, {
+  const checkmarksQuery = useQuery('checkmarks', fetchCheckmarks, {
     initialData: [],
     initialStale: true,
   });
+
+  return checkmarksQuery;
 }
 
 /**
@@ -99,12 +108,12 @@ export function useCheckmarks() {
  * The mutation has to be called with checkmark id.
  *
  */
-export function useDeleteCheckmark() {
+export function useDeleteCheckmarkMutation() {
   const { db } = useFirebase();
   const { user } = useAuth();
-  const cache = useQueryCache();
+  const queryClient = useQueryClient();
 
-  return useMutation(
+  const deleteCheckmarkMutation = useMutation(
     (checkmarkId) => {
       const checkmarkRef = db.ref(`checkmarks/${user.uid}/${checkmarkId}`);
       // Remove the checkmark in the database
@@ -114,13 +123,13 @@ export function useDeleteCheckmark() {
       // When mutate is called:
       onMutate: (checkmarkId) => {
         // Cancel any outgoing refetches (so they don't overwrite our optimistic update)
-        cache.cancelQueries('checkmarks');
+        queryClient.cancelQueries('checkmarks');
 
         // Snapshot previous values
-        const previousCheckmarks = cache.getQueryData('checkmarks');
+        const previousCheckmarks = queryClient.getQueryData('checkmarks');
 
-        // Optimistically remove the checkmark from cache
-        cache.setQueryData('checkmarks', (old) =>
+        // Optimistically remove the checkmark from queryClient
+        queryClient.setQueryData('checkmarks', (old) =>
           old.filter((checkmark) => checkmark.id !== checkmarkId)
         );
 
@@ -129,12 +138,14 @@ export function useDeleteCheckmark() {
       },
       // If the mutation fails, use the context returned from onMutate to roll back
       onError: (error, checkmarkId, context) => {
-        cache.setQueryData('checkmarks', context.previousCheckmarks);
+        queryClient.setQueryData('checkmarks', context.previousCheckmarks);
       },
       // Always refetch after error or success:
-      onSettled: () => cache.invalidateQueries('checkmarks'),
+      onSettled: () => queryClient.invalidateQueries('checkmarks'),
     }
   );
+
+  return deleteCheckmarkMutation;
 }
 
 /**
@@ -143,12 +154,12 @@ export function useDeleteCheckmark() {
  * Returns a react-query mutation, that updates the checkmark value.
  * The mutation has to be called with checkmark object.
  */
-export function useUpdateCheckmarkValue() {
+export function useUpdateCheckmarkMutation() {
   const { db } = useFirebase();
   const { user } = useAuth();
-  const cache = useQueryCache();
+  const queryClient = useQueryClient();
 
-  return useMutation(
+  const updateCheckmarkMutation = useMutation(
     (checkmark) => {
       // Get checkmark database ref
       const checkmarkRef = db.ref(`checkmarks/${user.uid}/${checkmark.id}`);
@@ -164,13 +175,13 @@ export function useUpdateCheckmarkValue() {
       // When mutate is called:
       onMutate: (newCheckmark) => {
         // Cancel any outgoing refetches (so they don't overwrite our optimistic update)
-        cache.cancelQueries('checkmarks');
+        queryClient.cancelQueries('checkmarks');
 
         // Snapshot previous values
-        const previousCheckmarks = cache.getQueryData('checkmarks');
+        const previousCheckmarks = queryClient.getQueryData('checkmarks');
 
         // Optimistically update to the new checkmark value
-        cache.setQueryData('checkmarks', (old) =>
+        queryClient.setQueryData('checkmarks', (old) =>
           old.map((checkmark) => {
             if (checkmark.id === newCheckmark.id) {
               return {
@@ -188,20 +199,27 @@ export function useUpdateCheckmarkValue() {
       },
       // If the mutation fails, use the context returned from onMutate to roll back
       onError: (error, newCheckmark, context) => {
-        cache.setQueryData('checkmarks', context.previousCheckmarks);
+        queryClient.setQueryData('checkmarks', context.previousCheckmarks);
       },
       // Always refetch after error or success:
-      onSettled: () => cache.invalidateQueries('checkmarks'),
+      onSettled: () => queryClient.invalidateQueries('checkmarks'),
     }
   );
-}
 
-export function useUpdateCheckmarkInDb() {
-  const [addCheckmark] = useAddCheckmark();
-  const [updateCheckmarkValue] = useUpdateCheckmarkValue();
-  const [deleteCheckmarkById] = useDeleteCheckmark();
+  return updateCheckmarkMutation;
+}
 
-  return ({ checkmarkId, habitId, value, date }) => {
+export function useUpdateCheckmarkInDbMutate() {
+  const addCheckmark = useAddCheckmarkMutation();
+  const updateCheckmark = useUpdateCheckmarkMutation();
+  const deleteCheckmark = useDeleteCheckmarkMutation();
+
+  const updateCheckmarkInDbMutation = ({
+    checkmarkId,
+    habitId,
+    value,
+    date,
+  }) => {
     // Checkmark id is falsy so the checkmark doesn't exists.
     // A new checkmark should be added.
     const shouldAdd = !checkmarkId;
@@ -216,15 +234,21 @@ export function useUpdateCheckmarkInDb() {
 
     // Update
     if (shouldUpdate) {
-      return updateCheckmarkValue({ id: checkmarkId, value });
+      return updateCheckmark.mutate({ id: checkmarkId, value });
 
       // Delete
     } else if (shouldDelete) {
-      return deleteCheckmarkById(checkmarkId);
+      return deleteCheckmark.mutate(checkmarkId);
 
       // Add
     } else if (shouldAdd) {
-      return addCheckmark({ habitId, date, value });
+      return addCheckmark.mutate({ habitId, date, value });
+    } else {
+      throw new Error(
+        'Unhandled case when updating the checkmark in the database.'
+      );
     }
   };
+
+  return updateCheckmarkInDbMutation;
 }
diff --git a/src/api/habits.js b/src/api/habits.js
index 9804191..496b31d 100644
--- a/src/api/habits.js
+++ b/src/api/habits.js
@@ -1,19 +1,19 @@
 import { useAuth } from 'context/auth-context';
 import { useFirebase } from 'context/firebase-context';
-import { useQueryCache, useQuery, useMutation } from 'react-query';
+import { useQueryClient, useQuery, useMutation } from 'react-query';
 
 /**
- * Use add habit hook
- * 
+ * Use add habit mutation
+ *
  * @returns a react-query mutation that adds a new habit to the database.
  * The mutation takes as an argument a new habit object.
  */
-export function useAddHabit() {
+export function useAddHabitMutation() {
   const { db } = useFirebase();
   const { user } = useAuth();
-  const cache = useQueryCache();
+  const queryClient = useQueryClient();
 
-  return useMutation(
+  const addHabitMutation = useMutation(
     (habit) => {
       const { name, description, frequency, position } = habit;
 
@@ -30,25 +30,27 @@ export function useAddHabit() {
       });
     },
     {
-      onSuccess: () => cache.invalidateQueries('habits'),
+      onSuccess: () => queryClient.invalidateQueries('habits'),
     }
   );
+
+  return addHabitMutation;
 }
 
 /**
  * Use delete habit hook
- * 
+ *
  * @returns a react-query mutation that deletes the habit and all the checkmarks
  * associated with it from the database.
- * 
+ *
  * The mutation takes as an argument habit id.
  */
-export function useDeleteHabit() {
+export function useDeleteHabitMutationMutation() {
   const { db } = useFirebase();
   const { user } = useAuth();
-  const cache = useQueryCache();
+  const queryClient = useQueryClient();
 
-  return useMutation(
+  const deleteHabitMutation = useMutation(
     async (habitId) => {
       // When deleting the habit we have to delete both the habit
       // and all the habit's checkmarks
@@ -82,20 +84,20 @@ export function useDeleteHabit() {
       // When mutate is called:
       onMutate: async (habitId) => {
         // Cancel any outgoing refetches (so they don't overwrite our optimistic update)
-        await cache.cancelQueries('habits');
-        await cache.cancelQueries('checkmarks');
+        await queryClient.cancelQueries('habits');
+        await queryClient.cancelQueries('checkmarks');
 
         // Snapshot previous values
-        const previousHabits = cache.getQueryData('habits');
-        const previousCheckmarks = cache.getQueryData('checkmarks');
+        const previousHabits = queryClient.getQueryData('habits');
+        const previousCheckmarks = queryClient.getQueryData('checkmarks');
 
-        // Optimistically remove the habit from cache
-        cache.setQueryData('habits', (old) =>
+        // Optimistically remove the habit from queryClient
+        queryClient.setQueryData('habits', (old) =>
           old.filter((habit) => habit.id !== habitId)
         );
 
-        // Optimistically remove the habit's checkmarks from cache
-        cache.setQueryData('checkmarks', (old) =>
+        // Optimistically remove the habit's checkmarks from queryClient
+        queryClient.setQueryData('checkmarks', (old) =>
           old.filter((checkmark) => checkmark.habitId !== habitId)
         );
 
@@ -104,28 +106,35 @@ export function useDeleteHabit() {
       },
       // If the mutation fails, use the context returned from onMutate to roll back
       onError: (error, habitId, context) => {
-        cache.setQueryData('habits', context.previousHabits);
-        cache.setQueryData('checkmarks', context.previousCheckmarks);
+        queryClient.setQueryData('habits', context.previousHabits);
+        queryClient.setQueryData('checkmarks', context.previousCheckmarks);
       },
       // Always refetch after error or success:
-      onSettled: () => { 
-        cache.invalidateQueries('habits');
-        cache.invalidateQueries('checkmarks');
-      }
+      onSettled: () => {
+        queryClient.invalidateQueries('habits');
+        queryClient.invalidateQueries('checkmarks');
+      },
     }
   );
+
+  return deleteHabitMutation;
 }
 
 /**
  * Use fetch habit by id hook
- * 
+ *
  * @returns a function that fetches a habit by id from the database.
  */
-export function useFetchHabitById() {
+export function useFetchHabit() {
   const { db } = useFirebase();
   const { user } = useAuth();
 
-  return (key, { id }) => {
+  /**
+   * Fetch habit
+   *
+   * @param {string} id - ID of the habit to fetch
+   */
+  const fetchHabit = (id) => {
     // Get habit database ref
     const habitRef = db.ref(`habits/${user.uid}/${id}`);
 
@@ -144,34 +153,38 @@ export function useFetchHabitById() {
       }
     });
   };
+
+  return fetchHabit;
 }
 
 /**
  * Use habit by id hook
- * 
+ *
  * @param {string} habitId
- * 
- * @returns a react-query query that fetches the habit by id, using `fetchHabitById`
+ *
+ * @returns a react-query query that fetches the habit by id, using `fetchHabit`
  */
-export function useHabitById(habitId) {
-  const fetchHabitById = useFetchHabitById();
+export function useHabitQuery(id) {
+  const fetchHabit = useFetchHabit();
 
-  return useQuery(habitId && ['habit', { id: habitId }], fetchHabitById, {
-    enabled: habitId !== null,
+  const habitQuery = useQuery(id && ['habit', id], () => fetchHabit(id), {
+    enabled: id !== null,
   });
+
+  return habitQuery;
 }
 
 /**
  * Use habits hook
- * 
+ *
  * @returns react-query query for that fetches all the user's habits from
  * the database.
  */
-export function useHabits() {
+export function useHabitsQuery() {
   const { db } = useFirebase();
   const { user } = useAuth();
 
-  return useQuery('habits', () => {
+  const habitsQuery = useQuery('habits', () => {
     // Get all the user's habits from the database
     return db
       .ref(`habits/${user.uid}`)
@@ -192,20 +205,22 @@ export function useHabits() {
         return fetchedHabits;
       });
   });
+
+  return habitsQuery;
 }
 
 /**
  * Use update habit hook
- * 
+ *
  * @returns a react-query mutation that updates the habit in the database.
  * The mutation takes as an argument habit object.
  */
-export function useUpdateHabit() {
+export function useUpdateHabitMutation() {
   const { db } = useFirebase();
   const { user } = useAuth();
-  const cache = useQueryCache();
+  const queryClient = useQueryClient();
 
-  return useMutation(
+  const updateHabitMutation = useMutation(
     (habit) => {
       const { id, name, description, frequency } = habit;
 
@@ -227,10 +242,10 @@ export function useUpdateHabit() {
     {
       // When mutate is called:
       onMutate: (habit) => {
-        const previousHabit = cache.getQueryData(['habit', { id: habit.id }]);
+        const previousHabit = queryClient.getQueryData(['habit', habit.id]);
 
         // Snapshot previous values
-        cache.setQueryData(['habit', { id: habit.id }], (old) => ({
+        queryClient.setQueryData(['habit', habit.id], (old) => ({
           ...old,
           ...habit,
         }));
@@ -240,13 +255,15 @@ export function useUpdateHabit() {
       },
       // If the mutation fails, use the context returned from onMutate to roll back
       onError: (error, newCheckmark, context) => {
-        cache.setQueryData('habits', context.previousCheckmarks);
+        queryClient.setQueryData('habits', context.previousCheckmarks);
       },
       // Always refetch after error or success:
       onSuccess: async (habit) => {
-        cache.refetchQueries('habits');
-        await cache.refetchQueries(['habit', { id: habit.id }]);
+        queryClient.refetchQueries('habits');
+        await queryClient.refetchQueries(['habit', habit.id]);
       },
     }
   );
+
+  return updateHabitMutation;
 }
diff --git a/src/components/checkmark.js b/src/components/checkmark.js
index bd0ccb0..c2a7896 100644
--- a/src/components/checkmark.js
+++ b/src/components/checkmark.js
@@ -5,7 +5,7 @@ import {
   CheckBoxOutlineBlank as EmptyCheckmarkIcon,
   IndeterminateCheckBox as FailedCheckmarkIcon,
 } from '@material-ui/icons';
-import { useUpdateCheckmarkInDb } from 'api/checkmarks';
+import { useUpdateCheckmarkInDbMutate } from 'api/checkmarks';
 import { COMPLETED, EMPTY, FAILED } from 'data/constants';
 import { debounce } from 'lodash';
 
@@ -34,12 +34,17 @@ function Checkmark({ id, initialValue, habitId, date, disabled }) {
     setValue(initialValue);
   }, [initialValue]);
 
-  const updateCheckmarkInDb = useUpdateCheckmarkInDb();
+  const updateCheckmarkInDbMutate = useUpdateCheckmarkInDbMutate();
 
   // Debounced update function
   const debouncedUpdate = React.useRef(
     debounce(({ id, newValue }) => {
-      updateCheckmarkInDb({ checkmarkId: id, value: newValue, habitId, date });
+      updateCheckmarkInDbMutate({
+        checkmarkId: id,
+        value: newValue,
+        habitId,
+        date,
+      });
     }, 200)
   ).current;
 
@@ -49,7 +54,7 @@ function Checkmark({ id, initialValue, habitId, date, disabled }) {
 
     // Update the value locally, so that the icon changes
     setValue(newValue);
-    // Update is debounced so when user is clicking very fast on the checkmark 
+    // Update is debounced so when user is clicking very fast on the checkmark
     // only the last call will be invoked to hit the database.
     debouncedUpdate({ id, newValue });
   };
diff --git a/src/components/habit-list.js b/src/components/habit-list.js
index e6f8d35..5bb09fd 100644
--- a/src/components/habit-list.js
+++ b/src/components/habit-list.js
@@ -17,7 +17,7 @@ import {
 } from '@material-ui/icons';
 import { useDialog } from 'context/dialog-context';
 import { useSnackbar } from 'context/snackbar-context';
-import { useDeleteHabit } from 'api/habits';
+import { useDeleteHabitMutationMutation } from 'api/habits';
 import { Link as RouterLink } from 'react-router-dom';
 import { useLocale } from 'localization';
 import { useTranslation } from 'translations';
@@ -31,7 +31,7 @@ function HabitListItem({ habit }) {
   const { openSnackbar } = useSnackbar();
   const { openDialog } = useDialog();
 
-  const [deleteHabit, { isLoading }] = useDeleteHabit();
+  const deleteHabitMutation = useDeleteHabitMutationMutation();
 
   const handleDeleteClick = () => {
     // Open the dialog to ask the user if they're sure to delete the habit
@@ -40,7 +40,7 @@ function HabitListItem({ habit }) {
       description: t('deleteHabitWarning'),
       confirmText: t('deleteHabitConfirmation'),
       onConfirm: () => {
-        deleteHabit(id, {
+        deleteHabitMutation.mutate(id, {
           onSuccess: () => openSnackbar('success', t('habitDeleted')),
           onError: (error) => openSnackbar('error', error.message),
         });
@@ -50,7 +50,7 @@ function HabitListItem({ habit }) {
   };
 
   // Disable buttons when the habit is being deleted
-  const disableActions = isLoading;
+  const disableActions = deleteHabitMutation.isLoading;
 
   const theme = useTheme();
   const isXs = useMediaQuery(theme.breakpoints.only('xs'));
diff --git a/src/context/index.js b/src/context/index.js
index dbea2a1..71c2f08 100644
--- a/src/context/index.js
+++ b/src/context/index.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 // import { ReactQueryDevtools } from 'react-query-devtools';
-import { ReactQueryCacheProvider, QueryCache } from 'react-query';
+import { QueryClientProvider, QueryClient } from 'react-query'
 import { ThemeProvider } from 'theme';
 import { LocaleProvider } from 'localization';
 import { AuthProvider } from './auth-context';
@@ -10,7 +10,7 @@ import { SnackbarProvider } from './snackbar-context';
 import { DialogProvider } from './dialog-context';
 import { UserProvider } from './user-context';
 
-const queryCache = new QueryCache();
+const queryClient = new QueryClient();
 
 /**
  * Shared context across all app
@@ -18,7 +18,7 @@ const queryCache = new QueryCache();
 function AppProviders({ children }) {
   return (
     <LocaleProvider>
-      <ReactQueryCacheProvider queryCache={queryCache}>
+      <QueryClientProvider client={queryClient}>
         <Router>
           <ThemeProvider>
             <FirebaseProvider>
@@ -31,7 +31,7 @@ function AppProviders({ children }) {
           </ThemeProvider>
         </Router>
         {/* <ReactQueryDevtools position="bottom-left" /> */}
-      </ReactQueryCacheProvider>
+      </QueryClientProvider>
     </LocaleProvider>
   );
 }
diff --git a/src/data/guest-data.js b/src/data/guest-data.js
new file mode 100644
index 0000000..7d455d8
--- /dev/null
+++ b/src/data/guest-data.js
@@ -0,0 +1,73 @@
+import { eachDayOfInterval, format, getDay, parseISO, sub } from 'date-fns';
+import { sample } from 'lodash';
+import { COMPLETED, FAILED } from './constants';
+
+const habits = [
+  {
+    id: 'reading',
+    description: 'Read a book for at least 30 min',
+    frequency: [1, 2, 3, 4, 5],
+    name: 'Reading',
+  },
+  {
+    id: 'get-up',
+    description: "Don't hit that snooze button!",
+    frequency: [1, 2, 4, 3, 5, 6],
+    name: 'Get up at 6 am',
+  },
+  {
+    id: 'running',
+    description: 'Run at least 10km',
+    frequency: [1, 3, 5],
+    name: 'Running',
+  },
+  {
+    id: 'meditation',
+    description: 'Calm your mind before going to sleep',
+    frequency: [0, 1, 2, 3, 4, 5, 6],
+    name: 'Meditation',
+  },
+  {
+    id: 'guitar',
+    description: 'Practice playing the guitar',
+    frequency: [2, 4, 6],
+    name: 'Guitar',
+  },
+];
+
+/**
+ *
+ * @param {string[]} dates - The collection of dates to use.
+ * @param {habit[]} habits - The collection of habits to use.
+ */
+function generateRandomCheckmarks(dates, habits) {
+  const checkmarks = [];
+  dates.forEach((date) => {
+    habits.forEach((habit) => {
+      if (habit.frequency.includes(getDay(parseISO(date)))) {
+        checkmarks.push({
+          id: `${habit.id}-${date}`,
+          habitId: habit.id,
+          date,
+          value: sample([COMPLETED, FAILED]),
+        });
+      }
+    });
+  });
+
+  return checkmarks;
+}
+
+const end = new Date();
+const start = sub(end, { days: 14 });
+
+const dates = eachDayOfInterval({ start, end }).map((d) =>
+  format(d, 'yyyy-MM-dd')
+);
+
+const checkmarks = generateRandomCheckmarks(dates, habits);
+
+export const guest = {
+  habits,
+  checkmarks,
+};
diff --git a/src/screens/add-habit.js b/src/screens/add-habit.js
index 6aab29e..b1d0b76 100644
--- a/src/screens/add-habit.js
+++ b/src/screens/add-habit.js
@@ -6,7 +6,7 @@ import { TextField } from '@material-ui/core';
 import { CheckboxGroup } from 'components/checkbox-group';
 import { FullPageSpinner } from 'components/lib';
 import { useSnackbar } from 'context/snackbar-context';
-import { useAddHabit, useHabits } from 'api/habits';
+import { useAddHabitMutation, useHabitsQuery } from 'api/habits';
 import {
   Form,
   FormBody,
@@ -30,11 +30,8 @@ function AddHabitScreen() {
   const { weekdays } = useLocale();
   const { openSnackbar } = useSnackbar();
 
-  const { data: habits, isLoading } = useHabits();
-  const [
-    addHabit,
-    { error: addingError, isLoading: isAddingHabit },
-  ] = useAddHabit();
+  const { data: habits, isLoading } = useHabitsQuery();
+  const addHabitMutation = useAddHabitMutation();
 
   // Form
   const { control, register, handleSubmit, errors, getValues, reset } = useForm(
@@ -50,7 +47,7 @@ function AddHabitScreen() {
     // Habit's position is based on the number of habits
     const position = habits.length;
 
-    addHabit(
+    addHabitMutation.mutate(
       { name, description, frequency, position },
       {
         onSuccess: () => openSnackbar('success', t('habitAdded')),
@@ -67,14 +64,14 @@ function AddHabitScreen() {
   // Get array of errors from the form
   const formErrors = Object.values(errors);
 
-  const errorText = addingError
+  const errorText = addHabitMutation.isError
     ? // If there is an error when adding the habit it display it first
-      addingError.message
+      addHabitMutation.error.message
     : // Otherwise display first form error if any
       formErrors[0]?.message;
 
   // Disable form actions when the habit is being added
-  const disableActions = isAddingHabit;
+  const disableActions = addHabitMutation.isLoading;
 
   return (
     <Form onSubmit={handleSubmit(onSubmit)}>
@@ -113,7 +110,7 @@ function AddHabitScreen() {
           error={!!errors?.frequency}
         />
 
-        <FormButton type="submit" pending={isAddingHabit}>
+        <FormButton type="submit" pending={disableActions}>
           {t('createHabit')}
         </FormButton>
       </FormBody>
diff --git a/src/screens/dashboard.js b/src/screens/dashboard.js
index 7a82fa7..a6b5488 100644
--- a/src/screens/dashboard.js
+++ b/src/screens/dashboard.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { useCheckmarks } from 'api/checkmarks';
-import { useHabits } from 'api/habits';
+import { useCheckmarksQuery } from 'api/checkmarks';
+import { useHabitsQuery } from 'api/habits';
 import { NoHabitsScreen } from 'screens/no-habits';
 import { useUser } from 'context/user-context';
 import { useLocale } from 'localization';
@@ -35,9 +35,9 @@ function DashboardScreen() {
     data: habits,
     error: habitsError,
     isLoading: isLoadingHabits,
-  } = useHabits();
+  } = useHabitsQuery();
   // Checkmarks data
-  const { data: checkmarks, error: checkmarksError } = useCheckmarks();
+  const { data: checkmarks, error: checkmarksError } = useCheckmarksQuery();
 
   const { performanceGoal } = useUser();
 
diff --git a/src/screens/edit-habit.js b/src/screens/edit-habit.js
index a0fa55f..5adf704 100644
--- a/src/screens/edit-habit.js
+++ b/src/screens/edit-habit.js
@@ -7,7 +7,7 @@ import { CheckboxGroup } from 'components/checkbox-group';
 import { FullPageSpinner } from 'components/lib';
 import { useSnackbar } from 'context/snackbar-context';
 import { habitSchema } from 'data/constraints';
-import { useHabitById, useUpdateHabit } from 'api/habits';
+import { useHabitQuery, useUpdateHabitMutation } from 'api/habits';
 import { useLocale } from 'localization';
 import { NotFoundHabitScreen } from './not-found-habit';
 import {
@@ -35,8 +35,8 @@ function EditHabitScreen() {
   const { habitId } = useParams();
   const { openSnackbar } = useSnackbar();
 
-  const { data: habit, error: habitError, isFetching } = useHabitById(habitId);
-  const [updateHabit, { isLoading: isUpdatingHabit }] = useUpdateHabit();
+  const { data: habit, error: habitError, isFetching } = useHabitQuery(habitId);
+  const updateHabitMutation = useUpdateHabitMutation();
 
   // Form
   const {
@@ -54,7 +54,7 @@ function EditHabitScreen() {
 
   // Save edited habit
   const onSubmit = (form) => {
-    updateHabit(
+    updateHabitMutation.mutate(
       { id: habitId, ...form },
       {
         onSuccess: () => {
@@ -96,7 +96,7 @@ function EditHabitScreen() {
   }
 
   // Disable form actions when the habit is updating
-  const disableActions = isUpdatingHabit;
+  const disableActions = updateHabitMutation.isLoading;
 
   return (
     <Form onSubmit={handleSubmit(onSubmit)}>
@@ -135,7 +135,7 @@ function EditHabitScreen() {
           error={!!errors?.frequency}
         />
 
-        <FormButton type="submit" pending={isUpdatingHabit}>
+        <FormButton type="submit" pending={disableActions}>
           {t('saveHabit')}
         </FormButton>
       </FormBody>
diff --git a/src/screens/manage-habits.js b/src/screens/manage-habits.js
index 3de1c4e..8af84d4 100644
--- a/src/screens/manage-habits.js
+++ b/src/screens/manage-habits.js
@@ -1,7 +1,7 @@
 import { Box } from '@material-ui/core';
 import { HabitList } from 'components/habit-list';
 import { FullPageSpinner } from 'components/lib';
-import { useHabits } from 'api/habits';
+import { useHabitsQuery } from 'api/habits';
 import { NoHabitsScreen } from 'screens/no-habits';
 
 /**
@@ -13,7 +13,7 @@ import { NoHabitsScreen } from 'screens/no-habits';
  * ### TODO: Add arrows (or other mechanism) to change a habit position.
  */
 function ManageHabitsScreen() {
-  const { data: habits, isLoading } = useHabits();
+  const { data: habits, isLoading } = useHabitsQuery();
 
   if (isLoading) return <FullPageSpinner />;
 
diff --git a/yarn.lock b/yarn.lock
index 192d192..6ec4e7e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2467,11 +2467,11 @@
     "@testing-library/dom" "^7.28.1"
 
 "@testing-library/user-event@^12.1.10":
-  version "12.5.0"
-  resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-12.5.0.tgz#7c6f69cee4dbd11037ac9c3f62c5d81b9a4ccf30"
-  integrity sha512-9uXr4+OwjHVUxzdfYZ2yCnF3xlEzr8cZOdqjGnqD8Qb1NoCJrm7UXxG3RUpL2QqcqZ1eqVuxkFJTCky5Yit+XQ==
+  version "12.6.0"
+  resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-12.6.0.tgz#2d0229e399eb5a0c6c112e848611432356cac886"
+  integrity sha512-FNEH/HLmOk5GO70I52tKjs7WvGYckeE/SrnLX/ip7z2IGbffyd5zOUM1tZ10vsTphqm+VbDFI0oaXu0wcfQsAQ==
   dependencies:
-    "@babel/runtime" "^7.10.2"
+    "@babel/runtime" "^7.12.5"
 
 "@types/anymatch@*":
   version "1.3.1"
@@ -3967,9 +3967,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001125, caniuse-lite@^1.0.30001165:
-  version "1.0.30001165"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001165.tgz#32955490d2f60290bb186bb754f2981917fa744f"
-  integrity sha512-8cEsSMwXfx7lWSUMA2s08z9dIgsnR5NAqjXP23stdsU3AUWkCr/rr4s4OFtHXn5XXr6+7kam3QFVoYyXNPdJPA==
+  version "1.0.30001166"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001166.tgz#ca73e8747acfd16a4fd6c4b784f1b995f9698cf8"
+  integrity sha512-nCL4LzYK7F4mL0TjEMeYavafOGnBa98vTudH5c8lW9izUjnB99InG6pmC1ElAI1p0GlyZajv4ltUdFXvOHIl1A==
 
 capture-exit@^2.0.0:
   version "2.0.0"
@@ -6686,9 +6686,9 @@ html-encoding-sniffer@^2.0.1:
     whatwg-encoding "^1.0.5"
 
 html-entities@^1.2.1, html-entities@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.3.1.tgz#fb9a1a4b5b14c5daba82d3e34c6ae4fe701a0e44"
-  integrity sha512-rhE/4Z3hIhzHAUKbW8jVcCyuT5oJCXXqhN/6mXXVCpzTmvJnoH2HL/bt3EZ6p55jbFJBeAe1ZNpL5BugLujxNA==
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.3.3.tgz#3dca638a43ee7de316fc23067398491152ad4736"
+  integrity sha512-/VulV3SYni1taM7a4RMdceqzJWR39gpZHjBwUnsCFKWV/GJkD14CJ5F7eWcZozmHJK0/f/H5U3b3SiPkuvxMgg==
 
 html-escaper@^2.0.0:
   version "2.0.2"
@@ -8416,12 +8416,12 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
-match-sorter@^4.1.0:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/match-sorter/-/match-sorter-4.2.1.tgz#575b4b3737185ba9518b67612b66877ea0b37358"
-  integrity sha512-s+3h9TiZU9U1pWhIERHf8/f4LmBN6IXaRgo2CI17+XGByGS1GvG5VvXK9pcGyCjGe3WM3mSYRC3ipGrd5UEVgw==
+match-sorter@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/match-sorter/-/match-sorter-6.0.2.tgz#91bbab14c28a87f4a67755b7a194c0d11dedc080"
+  integrity sha512-SDRLNlWof9GnAUEyhKP0O5525MMGXUGt+ep4MrrqQ2StAh3zjvICVZseiwg7Zijn3GazpJDiwuRr/mFDHd92NQ==
   dependencies:
-    "@babel/runtime" "^7.10.5"
+    "@babel/runtime" "^7.12.5"
     remove-accents "0.4.2"
 
 md5.js@^1.3.4:
@@ -10506,19 +10506,13 @@ react-motion@^0.5.2:
     prop-types "^15.5.8"
     raf "^3.1.0"
 
-react-query-devtools@^2.6.3:
-  version "2.6.3"
-  resolved "https://registry.yarnpkg.com/react-query-devtools/-/react-query-devtools-2.6.3.tgz#f7c982839d4b0001cee4d5ddfa826493c2f6341f"
-  integrity sha512-pSvWq5Q8zgIP7QbF0+4BerCHLaLn5HPzce7sIXYqz4XEizcYJHkJtcrAwn6bUkCu5JmAt1Y7fViQtZwOIG2SYA==
-  dependencies:
-    match-sorter "^4.1.0"
-
-react-query@^2.26.2:
-  version "2.26.4"
-  resolved "https://registry.yarnpkg.com/react-query/-/react-query-2.26.4.tgz#18239b4c0b61d0b744f0d4a91f566b294fa9f752"
-  integrity sha512-sXGG0gh1ah11AcfptYOCRpGDoYMnssq6riQUpQaLSM2EOodVkexp3zNLk1MFDgfRGuXQst40Tnu17oNwni66aA==
+react-query@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/react-query/-/react-query-3.2.0.tgz#c13264941249867c5a5640ec0be8343a55a13158"
+  integrity sha512-P1uErndQIOIhrCLrsw7G3pRPe/S1qL0almPZhYjh/ggRNHwiu8ZRrPh2yTnD8zqDYMvdk+ARJ6VtjukjgX/UZg==
   dependencies:
     "@babel/runtime" "^7.5.5"
+    match-sorter "^6.0.2"
 
 react-refresh@^0.8.3:
   version "0.8.3"

From 3ea97e1678d3769c541b0a2f5e41f055b97b7e48 Mon Sep 17 00:00:00 2001
From: sitek94 <msitkowski94@gmail.com>
Date: Mon, 14 Dec 2020 14:27:39 +0100
Subject: [PATCH 05/17] remove unused code

---
 src/theme/theme-context.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/theme/theme-context.js b/src/theme/theme-context.js
index 35e5518..5854793 100644
--- a/src/theme/theme-context.js
+++ b/src/theme/theme-context.js
@@ -29,7 +29,6 @@ function ThemeProvider({ children }) {
   const resetTheme = React.useCallback(
     () => {
       const { mode } = theme.palette;
-      console.log(mode);
       setTheme(createDefaultTheme(mode))
     }, [theme]
   )

From 35b8ce95486d9c3bd3737b7561b940e1d47f5efe Mon Sep 17 00:00:00 2001
From: sitek94 <msitkowski94@gmail.com>
Date: Mon, 14 Dec 2020 16:38:35 +0100
Subject: [PATCH 06/17] add initial guest data

---
 src/data/{guest-data.js => guest.js} | 23 +++++++++++++++++------
 1 file changed, 17 insertions(+), 6 deletions(-)
 rename src/data/{guest-data.js => guest.js} (73%)

diff --git a/src/data/guest-data.js b/src/data/guest.js
similarity index 73%
rename from src/data/guest-data.js
rename to src/data/guest.js
index 7d455d8..a9a0909 100644
--- a/src/data/guest-data.js
+++ b/src/data/guest.js
@@ -36,7 +36,8 @@ const habits = [
 ];
 
 /**
- *
+ * Generates an array of checkmarks with random value.
+ * 
  * @param {string[]} dates - The collection of dates to use.
  * @param {habit[]} habits - The collection of habits to use.
  */
@@ -49,7 +50,7 @@ function generateRandomCheckmarks(dates, habits) {
           id: `${habit.id}-${date}`,
           habitId: habit.id,
           date,
-          value: sample([COMPLETED, FAILED]),
+          value: sample([COMPLETED, COMPLETED, FAILED]),
         });
       }
     });
@@ -65,9 +66,19 @@ const dates = eachDayOfInterval({ start, end }).map((d) =>
   format(d, 'yyyy-MM-dd')
 );
 
+// Random checkmarks for last 14 days
 const checkmarks = generateRandomCheckmarks(dates, habits);
 
-export const guest = {
-  habits,
-  checkmarks,
-};
+// Converts array of objects to an object using each object `id` as key
+function convertToObj(array) {
+  return array.reduce((acc, { id, ...obj }) => {
+    acc[id] = obj;
+    return acc;
+  }, {});
+}
+
+// Convert the data so it can be used in the database.
+const dbHabits = convertToObj(habits);
+const dbCheckmarks = convertToObj(checkmarks);
+
+export { habits, dbHabits, checkmarks, dbCheckmarks };

From b64f1ad07ba5102670e963f18720fbf2d33b5c8e Mon Sep 17 00:00:00 2001
From: sitek94 <msitkowski94@gmail.com>
Date: Mon, 14 Dec 2020 16:47:15 +0100
Subject: [PATCH 07/17] [SignInAsGuest] Create component

---
 src/components/sign-in-as-guest-button.js | 26 +++++++++++++++++++++++
 1 file changed, 26 insertions(+)
 create mode 100644 src/components/sign-in-as-guest-button.js

diff --git a/src/components/sign-in-as-guest-button.js b/src/components/sign-in-as-guest-button.js
new file mode 100644
index 0000000..dbb49c7
--- /dev/null
+++ b/src/components/sign-in-as-guest-button.js
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { Incognito as IncognitoIcon } from 'mdi-material-ui';
+import { AuthProviderButton } from './auth-providers-list';
+import { useTheme } from '@material-ui/core';
+import { useTranslation } from 'translations';
+import { blueGrey } from '@material-ui/core/colors';
+
+
+function SignInAsGuestButton(props) {
+  const { palette } = useTheme();
+  const t = useTranslation();
+
+  return (
+    <AuthProviderButton
+      providerColor={blueGrey[800]}      
+      startIcon={<IncognitoIcon />}
+      variant={palette.mode === 'dark' ? 'contained' : 'outlined'}
+      fullWidth
+      {...props}
+    >
+      {t('signInAsGuest')}
+    </AuthProviderButton>
+  )
+}
+
+export { SignInAsGuestButton }
\ No newline at end of file

From d04fa6ceda8244a099b17675ac5d964cc3bd3750 Mon Sep 17 00:00:00 2001
From: sitek94 <msitkowski94@gmail.com>
Date: Mon, 14 Dec 2020 16:49:18 +0100
Subject: [PATCH 08/17] [SignIn] Add option to sign in as guest

---
 src/screens/sign-in.js | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/screens/sign-in.js b/src/screens/sign-in.js
index 139effa..c31d759 100644
--- a/src/screens/sign-in.js
+++ b/src/screens/sign-in.js
@@ -17,11 +17,12 @@ import { signInSchema } from 'data/constraints';
 import { useTranslation, translations } from 'translations';
 import { useForm } from 'react-hook-form';
 import { useAsync } from 'utils/hooks';
+import { SignInAsGuestButton } from 'components/sign-in-as-guest-button';
 
 function SignInScreen() {
   const t = useTranslation(translations);
 
-  const { signIn, signInWithAuthProvider } = useAuth();
+  const { signIn, signInWithAuthProvider, signInAsGuest } = useAuth();
   const { isLoading, isError: isAuthError, error: authError, run } = useAsync();
 
   const { register, handleSubmit, errors, reset } = useForm({
@@ -41,6 +42,10 @@ function SignInScreen() {
     run(signInWithAuthProvider(provider));
   };
 
+  const handleSignInAsGuestClick = () => {
+    run(signInAsGuest());
+  };
+
   const errorMessages = Object.values(errors);
   const isError = isAuthError || errorMessages.length !== 0;
   const errorMessage = authError?.message || errorMessages[0]?.message;
@@ -63,6 +68,11 @@ function SignInScreen() {
           disabled={isLoading}
         />
 
+        <SignInAsGuestButton
+          disabled={isLoading}
+          onClick={handleSignInAsGuestClick}
+        />
+
         <FormDivider />
 
         <TextField

From e22f73c816a8ce5957d2f951d06a9cf1a1dbf495 Mon Sep 17 00:00:00 2001
From: sitek94 <msitkowski94@gmail.com>
Date: Mon, 14 Dec 2020 16:50:33 +0100
Subject: [PATCH 09/17] [AuthContext] Add `signInAsGuest` method

---
 src/context/auth-context.js | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/context/auth-context.js b/src/context/auth-context.js
index 17d90d7..d315044 100644
--- a/src/context/auth-context.js
+++ b/src/context/auth-context.js
@@ -29,7 +29,7 @@ function AuthProvider(props) {
     const unsubscribe = auth.onAuthStateChanged((user) => {
       if (user) {
         setData(user);
-        navigate('dashboard')
+        navigate('dashboard');
       } else {
         setData(null);
       }
@@ -37,7 +37,7 @@ function AuthProvider(props) {
 
     return () => {
       unsubscribe();
-    }
+    };
   }, [auth, setData, navigate]);
 
   // Sign in (email, password)
@@ -64,6 +64,11 @@ function AuthProvider(props) {
     [firebase, auth]
   );
 
+  // Sign in as guest
+  const signInAsGuest = React.useCallback(() => {
+    return auth.signInAnonymously();
+  }, [auth]);
+
   // Sign up (email, password)
   const signUp = React.useCallback(
     ({ email, password }) => {
@@ -74,10 +79,9 @@ function AuthProvider(props) {
 
   // Sign out
   const signOut = React.useCallback(() => {
-    return auth.signOut()
-      .then(() => {
-        resetTheme();
-      });
+    return auth.signOut().then(() => {
+      resetTheme();
+    });
   }, [auth, resetTheme]);
 
   // Reset password
@@ -98,6 +102,7 @@ function AuthProvider(props) {
       user,
       signIn,
       signInWithAuthProvider,
+      signInAsGuest,
       signUp,
       signOut,
       resetPassword,
@@ -107,6 +112,7 @@ function AuthProvider(props) {
       user,
       signIn,
       signInWithAuthProvider,
+      signInAsGuest,
       signUp,
       signOut,
       resetPassword,

From 576a172adb28003bcec4bb578e623df7e6516e23 Mon Sep 17 00:00:00 2001
From: sitek94 <msitkowski94@gmail.com>
Date: Mon, 14 Dec 2020 16:51:16 +0100
Subject: [PATCH 10/17] [HabitRow] Remove `position` from prop types

---
 src/components/habit-row.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/habit-row.js b/src/components/habit-row.js
index 1939b8e..9c1e7ca 100644
--- a/src/components/habit-row.js
+++ b/src/components/habit-row.js
@@ -68,7 +68,6 @@ HabitRow.propTypes = {
     id: PropTypes.string.isRequired,
     name: PropTypes.string.isRequired,
     frequency: PropTypes.arrayOf(PropTypes.number).isRequired,
-    position: PropTypes.number.isRequired,
   }).isRequired,
   dates: PropTypes.arrayOf(PropTypes.string).isRequired,
 };

From 07f6ef96dcbe88d3a8912cca671b3425e3b6b6ae Mon Sep 17 00:00:00 2001
From: sitek94 <msitkowski94@gmail.com>
Date: Mon, 14 Dec 2020 19:11:20 +0100
Subject: [PATCH 11/17] add option to sign in/up as guest

---
 src/api/user-data.js                      | 29 ++++++++++++
 src/app/authenticated-app.js              | 58 +++++++++++++++++++++--
 src/components/auth-providers-list.js     | 39 +++++----------
 src/components/form.js                    | 16 +++++++
 src/components/sign-in-as-guest-button.js |  7 +--
 src/data/constants.js                     |  3 --
 src/screens/sign-in.js                    | 27 +++++++----
 src/screens/sign-up.js                    | 19 +++++++-
 src/translations/translations.js          |  7 ++-
 9 files changed, 156 insertions(+), 49 deletions(-)

diff --git a/src/api/user-data.js b/src/api/user-data.js
index 51db0dc..4d8e32b 100644
--- a/src/api/user-data.js
+++ b/src/api/user-data.js
@@ -1,5 +1,6 @@
 import { useFirebase } from 'context/firebase-context';
 import { useAuth } from 'context/auth-context';
+import { useQueryClient } from 'react-query';
 
 /**
  * Use update performance goal hook
@@ -40,6 +41,7 @@ export function useUpdateLocaleCode() {
 export function useDeleteUserData() {
   const { user } = useAuth();
   const { db } = useFirebase();
+  const queryClient = useQueryClient();
 
   return () => {
     const updates = {};
@@ -48,6 +50,33 @@ export function useDeleteUserData() {
     updates[`checkmarks/${user.uid}`] = null;
     updates[`users/${user.uid}`] = null;
 
+    return db.ref().update(updates).then(() => {
+      queryClient.invalidateQueries();
+    });
+  };
+}
+
+/**
+ * Returns a function that updates the user data in the database.
+ */
+export function useUpdateUserData() {
+  const { user } = useAuth();
+  const { db } = useFirebase();
+
+  /**
+   * Updates the user data in the database.
+   * 
+   * @param { {checkmarks: string[]} }
+   */
+  const updateUserData = ({ checkmarks, habits, settings }) => {
+    const updates = {};
+
+    if (checkmarks) updates[`checkmarks/${user.uid}`] = checkmarks;
+    if (habits) updates[`habits/${user.uid}`] = habits;
+    if (settings) updates[`users/${user.uid}`] = settings;
+
     return db.ref().update(updates);
   };
+
+  return updateUserData;
 }
diff --git a/src/app/authenticated-app.js b/src/app/authenticated-app.js
index 50b3861..66badfa 100644
--- a/src/app/authenticated-app.js
+++ b/src/app/authenticated-app.js
@@ -8,11 +8,12 @@ import { EditHabitScreen } from 'screens/edit-habit';
 import { ManageHabitsScreen } from 'screens/manage-habits';
 import { NotFoundScreen } from 'screens/not-found';
 import { UserSettingsScreen } from 'screens/user-settings';
-import { useUpdateLocaleCode } from 'api/user-data';
+import { useUpdateLocaleCode, useUpdateUserData } from 'api/user-data';
 import { FullPageErrorFallback, ErrorFallback } from 'components/lib';
 import { LocaleSelect } from 'components/locale-select';
 import { useAuth } from 'context/auth-context';
 import { useDialog } from 'context/dialog-context';
+import { useQueryClient } from 'react-query';
 import { Divider, List, Toolbar, Typography } from '@material-ui/core';
 import {
   Add as AddIcon,
@@ -30,21 +31,72 @@ import {
   SidebarLink,
 } from 'layout/authenticated-layout';
 import { GithubRepoLink } from 'components/github-repo-link';
+import { useDeleteUserData } from 'api/user-data';
+import * as guestData from 'data/guest';
 
 /**
  * Authenticated App
  */
 function AuthenticatedApp() {
-  const { signOut } = useAuth();
+  const queryClient = useQueryClient();
+  const { user, signOut } = useAuth();
   const { openDialog } = useDialog();
   const t = useTranslation();
 
+  const deleteUserData = useDeleteUserData();
+  const updateUserData = useUpdateUserData();
+
+  /**
+   * Initializing the data when user is Anonymous
+   *
+   * When user logs in as guest we provide him with some dummy data. This data
+   * is immediately stored in the cache and updated in user's data point in the database.
+   *
+   * This will be handy when creating an account by linking this anonymous account.
+   */
+  React.useEffect(() => {
+    /**
+     * Check if user is anonymous and if they have habits and checkmarks in the cache.
+     * If they've already have the data in cache it means that it has already been initialized
+     * and there is no need to do it again.
+     */
+
+    if (user.isAnonymous) {
+      const { habits, dbHabits, checkmarks, dbCheckmarks } = guestData;
+
+      // Set data in the cache
+      queryClient.setQueryData('habits', habits);
+      queryClient.setQueryData('checkmarks', checkmarks);
+
+      // Set data in the database
+      updateUserData({
+        habits: dbHabits,
+        checkmarks: dbCheckmarks,
+      });
+    }
+    // Run ONLY on initial mount.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Logout click handler
   const handleLogoutClick = () => {
     openDialog({
       title: t('signOutQuestion'),
       description: t('signOutDescription'),
       confirmText: t('signOutConfirm'),
-      onConfirm: signOut,
+      onConfirm: async () => {
+        try {
+          // When signing out and user is anonymous, delete their data
+          if (user.isAnonymous) {
+            await deleteUserData();
+            await signOut();
+          } else {
+            await signOut();
+          }
+        } catch (error) {
+          console.log(error, error.message);
+        }
+      },
       color: 'secondary',
     });
   };
diff --git a/src/components/auth-providers-list.js b/src/components/auth-providers-list.js
index 315e5e0..8158039 100644
--- a/src/components/auth-providers-list.js
+++ b/src/components/auth-providers-list.js
@@ -10,14 +10,6 @@ import {
 import authProviders from 'data/auth-providers';
 
 const useStyles = makeStyles((theme) => ({
-  // list
-  list: {
-    // Target all but last buttons in the list
-    '& > *:not(:last-child)': {
-      marginBottom: theme.spacing(1),
-    },
-  },
-
   // Button
   root: {
     justifyContent: 'flex-start',
@@ -58,26 +50,21 @@ function AuthProviderButton({ providerColor, ...props }) {
 }
 
 function AuthProviderList({ text, disabled, onAuthProviderClick }) {
-  const classes = useStyles();
   const { palette } = useTheme();
 
-  return (
-    <div className={classes.list}>
-      {authProviders.map(({ id, name, color, icon, scopes }) => (
-        <AuthProviderButton
-          key={id}
-          providerColor={color}
-          onClick={(event) => onAuthProviderClick(event, { id, scopes })}
-          disabled={disabled}
-          startIcon={icon}
-          variant={palette.mode === 'dark' ? 'contained' : 'outlined'}
-          fullWidth
-        >
-          {text} {name}
-        </AuthProviderButton>
-      ))}
-    </div>
-  );
+  return authProviders.map(({ id, name, color, icon, scopes }) => (
+    <AuthProviderButton
+      key={id}
+      providerColor={color}
+      onClick={(event) => onAuthProviderClick(event, { id, scopes })}
+      disabled={disabled}
+      startIcon={icon}
+      variant={palette.mode === 'dark' ? 'contained' : 'outlined'}
+      fullWidth
+    >
+      {text} {name}
+    </AuthProviderButton>
+  ));
 }
 
 AuthProviderList.defaultProps = {
diff --git a/src/components/form.js b/src/components/form.js
index d82b130..df23331 100644
--- a/src/components/form.js
+++ b/src/components/form.js
@@ -74,6 +74,21 @@ function FormBody({ children }) {
   );
 }
 
+function FormListContainer({ children }) {
+  return (
+    <Box
+      sx={{
+        '& > *:not(:last-child)': {
+          mb: 1,
+        },
+      }}
+    >
+      {children}
+    </Box>
+  );
+}
+
+
 /**
  * Form primary text
  */
@@ -183,6 +198,7 @@ export {
   Form,
   FormBody,
   FormHeader,
+  FormListContainer,
   FormPrimaryText,
   FormSecondaryText,
   FormErrorText,
diff --git a/src/components/sign-in-as-guest-button.js b/src/components/sign-in-as-guest-button.js
index dbb49c7..4dde5e9 100644
--- a/src/components/sign-in-as-guest-button.js
+++ b/src/components/sign-in-as-guest-button.js
@@ -2,13 +2,10 @@ import * as React from 'react';
 import { Incognito as IncognitoIcon } from 'mdi-material-ui';
 import { AuthProviderButton } from './auth-providers-list';
 import { useTheme } from '@material-ui/core';
-import { useTranslation } from 'translations';
 import { blueGrey } from '@material-ui/core/colors';
 
-
-function SignInAsGuestButton(props) {
+function SignInAsGuestButton({ label, ...props }) {
   const { palette } = useTheme();
-  const t = useTranslation();
 
   return (
     <AuthProviderButton
@@ -18,7 +15,7 @@ function SignInAsGuestButton(props) {
       fullWidth
       {...props}
     >
-      {t('signInAsGuest')}
+      {label}
     </AuthProviderButton>
   )
 }
diff --git a/src/data/constants.js b/src/data/constants.js
index 4ecfe7a..bb7551f 100644
--- a/src/data/constants.js
+++ b/src/data/constants.js
@@ -1,12 +1,9 @@
 export const DATE_FORMAT = 'YYYY-MM-DD';
 
-/** @type {number} */
 export const COMPLETED = 'completed';
 
-/** @type {number} */
 export const FAILED = 'failed';
 
-/** @type {number} */
 export const EMPTY = 'empty';
 
 export const CHECKMARK_VALUES = [EMPTY, COMPLETED, FAILED];
diff --git a/src/screens/sign-in.js b/src/screens/sign-in.js
index c31d759..b964592 100644
--- a/src/screens/sign-in.js
+++ b/src/screens/sign-in.js
@@ -9,6 +9,7 @@ import {
   FormErrorText,
   FormHeader,
   FormLink,
+  FormListContainer,
   FormPrimaryText,
   FormSecondaryText,
 } from 'components/form';
@@ -30,11 +31,13 @@ function SignInScreen() {
     reValidateMode: 'onSubmit',
   });
 
+  // Form submit
   const onSubmit = ({ email, password }) => {
     run(signIn({ email, password }));
     reset();
   };
 
+  // Auth provider click
   const handleAuthProviderClick = (event, provider) => {
     // Prevents the form from submitting and triggering the form errors
     event.preventDefault();
@@ -42,6 +45,7 @@ function SignInScreen() {
     run(signInWithAuthProvider(provider));
   };
 
+  // Sign in as Guest click
   const handleSignInAsGuestClick = () => {
     run(signInAsGuest());
   };
@@ -62,16 +66,19 @@ function SignInScreen() {
       </FormHeader>
 
       <FormBody>
-        <AuthProviderList
-          text={t('signInWith')}
-          onAuthProviderClick={handleAuthProviderClick}
-          disabled={isLoading}
-        />
-
-        <SignInAsGuestButton
-          disabled={isLoading}
-          onClick={handleSignInAsGuestClick}
-        />
+        <FormListContainer>
+          <AuthProviderList
+            text={t('signInWith')}
+            onAuthProviderClick={handleAuthProviderClick}
+            disabled={isLoading}
+          />
+
+          <SignInAsGuestButton
+            label={t('signInAsGuest')}
+            disabled={isLoading}
+            onClick={handleSignInAsGuestClick}
+          />
+        </FormListContainer>
 
         <FormDivider />
 
diff --git a/src/screens/sign-up.js b/src/screens/sign-up.js
index 841b4aa..1ab92fe 100644
--- a/src/screens/sign-up.js
+++ b/src/screens/sign-up.js
@@ -8,6 +8,7 @@ import {
   FormErrorText,
   FormHeader,
   FormLink,
+  FormListContainer,
   FormPrimaryText,
   FormSecondaryText,
 } from 'components/form';
@@ -17,22 +18,25 @@ import { useForm } from 'react-hook-form';
 import { useAsync } from 'utils/hooks';
 import { AuthProviderList } from 'components/auth-providers-list';
 import { useTranslation } from 'translations';
+import { SignInAsGuestButton } from 'components/sign-in-as-guest-button';
 
 function SignUpScreen() {
   const t = useTranslation();
 
-  const { signUp, signInWithAuthProvider } = useAuth();
+  const { signUp, signInWithAuthProvider, signInAsGuest } = useAuth();
   const { isLoading, isError: isAuthError, error: authError, run } = useAsync();
 
   const { register, handleSubmit, errors, reset } = useForm({
     resolver: yupResolver(signUpSchema),
   });
 
+  // Form submit
   const onSubmit = ({ email, password }) => {
     run(signUp({ email, password }));
     reset();
   };
 
+  // Auth provider click
   const handleAuthProviderClick = (event, provider) => {
     // Prevents the form from submitting and triggering the form errors
     event.preventDefault();
@@ -40,6 +44,11 @@ function SignUpScreen() {
     run(signInWithAuthProvider(provider));
   };
 
+  // Sign up as Guest click
+  const handleSignInAsGuestClick = () => {
+    run(signInAsGuest());
+  };
+
   const errorMessages = Object.values(errors);
   const isError = isAuthError || errorMessages.length !== 0;
   const errorMessage = authError?.message || errorMessages[0]?.message;
@@ -55,11 +64,19 @@ function SignUpScreen() {
       </FormHeader>
 
       <FormBody>
+        <FormListContainer>
+
         <AuthProviderList
           text={t('signUpWith')}
           onAuthProviderClick={handleAuthProviderClick}
           disabled={isLoading}
         />
+        <SignInAsGuestButton
+            label={t('signUpAsGuest')}
+            disabled={isLoading}
+            onClick={handleSignInAsGuestClick}
+          />
+        </FormListContainer>
 
         <FormDivider />
 
diff --git a/src/translations/translations.js b/src/translations/translations.js
index 61ac398..ab2c6ce 100644
--- a/src/translations/translations.js
+++ b/src/translations/translations.js
@@ -89,7 +89,7 @@ const translations = {
 
   // Sign up
   signUp: {
-    pl: 'Rejestracja',
+    pl: 'Zarejestruj',
     es: 'Regístrate',
     en: 'Sign up',
   },
@@ -98,6 +98,11 @@ const translations = {
     es: 'Registrarse con',
     en: 'Sign up with',
   },
+  signUpAsGuest: {
+    pl: 'Zarejestruj się jako Gość',
+    es: 'Registrarse como Invitado',
+    en: 'Sign up as Guest'
+  },
 
   // No account
   noAccountQuestion: {

From c92cde2cf0b2537b4dc9ec223dc9cc92c34fcd1a Mon Sep 17 00:00:00 2001
From: sitek94 <msitkowski94@gmail.com>
Date: Mon, 14 Dec 2020 19:11:48 +0100
Subject: [PATCH 12/17] add react-query devtools

---
 src/context/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/context/index.js b/src/context/index.js
index 71c2f08..940aaaa 100644
--- a/src/context/index.js
+++ b/src/context/index.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
-// import { ReactQueryDevtools } from 'react-query-devtools';
+import { ReactQueryDevtools } from 'react-query/devtools';
 import { QueryClientProvider, QueryClient } from 'react-query'
 import { ThemeProvider } from 'theme';
 import { LocaleProvider } from 'localization';
@@ -30,7 +30,7 @@ function AppProviders({ children }) {
             </FirebaseProvider>
           </ThemeProvider>
         </Router>
-        {/* <ReactQueryDevtools position="bottom-left" /> */}
+        <ReactQueryDevtools position="bottom-left" />
       </QueryClientProvider>
     </LocaleProvider>
   );

From 85a9a4bba6bfd3b00b766a1d4e739e8ddf5bdab0 Mon Sep 17 00:00:00 2001
From: sitek94 <msitkowski94@gmail.com>
Date: Mon, 14 Dec 2020 19:15:29 +0100
Subject: [PATCH 13/17] Arrange pie charts in correct order

---
 src/components/performance-panel/performance-panel.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/performance-panel/performance-panel.js b/src/components/performance-panel/performance-panel.js
index 327827c..6959470 100644
--- a/src/components/performance-panel/performance-panel.js
+++ b/src/components/performance-panel/performance-panel.js
@@ -22,9 +22,9 @@ function PerformancePanel({ checkmarks, goal }) {
     .map((c) => c.value);
 
   const dataList = [
-    { label: t('today'), data: createPieChartData(todayValues) },
-    { label: t('thisWeek'), data: createPieChartData(thisWeekValues) },
     { label: t('lastWeek'), data: createPieChartData(lastWeekValues) },
+    { label: t('thisWeek'), data: createPieChartData(thisWeekValues) },
+    { label: t('today'), data: createPieChartData(todayValues) },
   ];
 
   // Calculate all time user score

From ef3500025ca9dba086392b733c664ec7ac9a33b0 Mon Sep 17 00:00:00 2001
From: sitek94 <msitkowski94@gmail.com>
Date: Mon, 14 Dec 2020 19:15:56 +0100
Subject: [PATCH 14/17] use `Math.random()` instead of `sample` from lodash

---
 src/data/guest.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/data/guest.js b/src/data/guest.js
index a9a0909..528cb3b 100644
--- a/src/data/guest.js
+++ b/src/data/guest.js
@@ -1,5 +1,4 @@
 import { eachDayOfInterval, format, getDay, parseISO, sub } from 'date-fns';
-import { sample } from 'lodash';
 import { COMPLETED, FAILED } from './constants';
 
 const habits = [
@@ -50,7 +49,7 @@ function generateRandomCheckmarks(dates, habits) {
           id: `${habit.id}-${date}`,
           habitId: habit.id,
           date,
-          value: sample([COMPLETED, COMPLETED, FAILED]),
+          value: Math.random() > .25 ? COMPLETED : FAILED,
         });
       }
     });

From 229706ac0b7a3db1364cc088c7002e3a1394fbf0 Mon Sep 17 00:00:00 2001
From: sitek94 <msitkowski94@gmail.com>
Date: Mon, 14 Dec 2020 19:17:14 +0100
Subject: [PATCH 15/17] update `hasReachedGoal` check

---
 src/components/performance-panel/performance-panel.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/performance-panel/performance-panel.js b/src/components/performance-panel/performance-panel.js
index 6959470..d7e0486 100644
--- a/src/components/performance-panel/performance-panel.js
+++ b/src/components/performance-panel/performance-panel.js
@@ -44,7 +44,7 @@ function PerformancePanel({ checkmarks, goal }) {
       <Grid container justifyContent="space-evenly">
         {dataList.map(({ label, data }) => {
           const completedValue = data[0].value;
-          const hasReachedGoal = completedValue > goal;
+          const hasReachedGoal = completedValue >= goal;
 
           return (
             <Grid item key={label}>

From 1c17d6b54bd99c5b790f146a5d932583dc62ea29 Mon Sep 17 00:00:00 2001
From: sitek94 <msitkowski94@gmail.com>
Date: Mon, 14 Dec 2020 19:36:16 +0100
Subject: [PATCH 16/17] remove react-query devtools for production

---
 src/context/index.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/context/index.js b/src/context/index.js
index 940aaaa..f89aea7 100644
--- a/src/context/index.js
+++ b/src/context/index.js
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
-import { ReactQueryDevtools } from 'react-query/devtools';
 import { QueryClientProvider, QueryClient } from 'react-query'
 import { ThemeProvider } from 'theme';
 import { LocaleProvider } from 'localization';
@@ -30,7 +29,6 @@ function AppProviders({ children }) {
             </FirebaseProvider>
           </ThemeProvider>
         </Router>
-        <ReactQueryDevtools position="bottom-left" />
       </QueryClientProvider>
     </LocaleProvider>
   );

From b99ae70d3ed97603cb16f35a1e02d9d59657474a Mon Sep 17 00:00:00 2001
From: sitek94 <msitkowski94@gmail.com>
Date: Mon, 14 Dec 2020 23:08:29 +0100
Subject: [PATCH 17/17] update media queries

---
 src/components/habit-list.js   | 54 ++++++++++++++++++++++------------
 src/components/habits-table.js |  2 +-
 src/screens/dashboard.js       | 39 ++++++++++++------------
 3 files changed, 58 insertions(+), 37 deletions(-)

diff --git a/src/components/habit-list.js b/src/components/habit-list.js
index 5bb09fd..3990300 100644
--- a/src/components/habit-list.js
+++ b/src/components/habit-list.js
@@ -55,6 +55,27 @@ function HabitListItem({ habit }) {
   const theme = useTheme();
   const isXs = useMediaQuery(theme.breakpoints.only('xs'));
 
+  // Name and description
+  const text = <ListItemText primary={name} secondary={description} />;
+
+  // Frequency
+  const frequencyChips = (
+    <Box
+      sx={{
+        mr: 1,
+      }}
+    >
+      {weekdays.map((day, i) => (
+        <Chip
+          size={isXs ? 'small' : 'medium'}
+          key={day}
+          label={day.slice(0, 1)}
+          color={frequency.includes(i) ? 'primary' : 'default'}
+        />
+      ))}
+    </Box>
+  );
+
   return (
     <ListItem button>
       {/* TODO: Let user choose icon */}
@@ -62,24 +83,21 @@ function HabitListItem({ habit }) {
         <FolderIcon />
       </ListItemIcon> */}
 
-      {/* Name and description */}
-      <ListItemText primary={name} secondary={description} />
-
-      {/* Frequency */}
-      <Box
-        sx={{
-          mr: 1,
-        }}
-      >
-        {weekdays.map((day, i) => (
-          <Chip
-            size={isXs ? 'small' : 'medium'}
-            key={day}
-            label={day.slice(0, 1)}
-            color={frequency.includes(i) ? 'primary' : 'default'}
-          />
-        ))}
-      </Box>
+      {/* On small screens display frequency below the text */}
+      {isXs && (
+        <Box sx={{ flex: 1 }}>
+          {text}
+          {frequencyChips}
+        </Box>
+      )}
+
+      {/* Small screens and up display frequency next to the text */}
+      {!isXs && (
+        <>
+          {text}
+          {frequencyChips}
+        </>
+      )}
 
       {/* Edit link */}
       <Tooltip title={t('editHabit')}>
diff --git a/src/components/habits-table.js b/src/components/habits-table.js
index 383503e..a150bfa 100644
--- a/src/components/habits-table.js
+++ b/src/components/habits-table.js
@@ -112,7 +112,7 @@ function HabitsTable({ habits, checkmarks, dates }) {
             {datesCells.map(({ date, label }) => (
               <TableCell key={date} align="center">
                 {isToday(date) ? (
-                  <Typography color="primary">{label}</Typography>
+                  <Typography color="primary" noWrap>{label}</Typography>
                 ) : (
                   label
                 )}
diff --git a/src/screens/dashboard.js b/src/screens/dashboard.js
index a6b5488..52310dc 100644
--- a/src/screens/dashboard.js
+++ b/src/screens/dashboard.js
@@ -65,11 +65,12 @@ function DashboardScreen() {
 
   /**
    * Temporary fix
-   * 
+   *
    * Cancelled query is throwing `CancelledError`. In V3 cancellation will not throw an error anymore.
    * https://github.com/tannerlinsley/react-query/discussions/1179
    */
-  const isCancelledError = checkmarksError && checkmarksError.hasOwnProperty('silent');
+  const isCancelledError =
+    checkmarksError && checkmarksError.hasOwnProperty('silent');
 
   // Ignore cancelled errors
   if (error && !isCancelledError) {
@@ -124,25 +125,27 @@ function DashboardScreen() {
   return (
     <Box sx={{ height: '100%' }} clone>
       <Container disableGutters>
-        {/* Mobile screens */}
+        {/* extra small screens */}
         <Hidden smUp>
-          <Grid container spacing={1}>
-            <Grid item xs={12}>
-              {weekPicker}
-            </Grid>
-            <Grid item xs={12}>
-              {habitsTable}
-            </Grid>
-            <Grid item xs={12}>
-              {performancePanel}
-            </Grid>
-            <Grid item xs={12}>
-              {barChart}
+          <Box sx={{ overflow: 'hidden' }}>
+            <Grid container spacing={1}>
+              <Grid item xs={12}>
+                {weekPicker}
+              </Grid>
+              <Grid item xs={12}>
+                {habitsTable}
+              </Grid>
+              <Grid item xs={12}>
+                {performancePanel}
+              </Grid>
+              <Grid item xs={12}>
+                {barChart}
+              </Grid>
             </Grid>
-          </Grid>
+          </Box>
         </Hidden>
 
-        {/* Small screens */}
+        {/* small screens */}
         <Hidden smDown mdUp>
           <Box sx={{ p: 1 }}>
             <Grid container spacing={1}>
@@ -162,7 +165,7 @@ function DashboardScreen() {
           </Box>
         </Hidden>
 
-        {/* Large screens up */}
+        {/* medium screens and up */}
         <Hidden mdDown>
           <Box sx={{ p: 2 }}>
             <Grid container spacing={2}>