Merge pull request #41 from sitek94/development

Small fixes and refactoring

.gitignore

@@ -12,9 +12,15 @@ src/api/firebase-config.js
 # production
 /build
 
+# firebase
+*.cache
+.firebaserc
+
 # misc
 .DS_Store
 .env
+.env.development
+.env.production
 .env.local
 .env.development.local
 .env.test.local

firebase.json

@@ -0,0 +1,16 @@
+{
+  "hosting": {
+    "public": "build",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
+  }
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "habit-tracker",
-  "version": "0.1.0",
+  "version": "1.0.0-alpha.1",
   "private": true,
   "dependencies": {
     "@emotion/react": "^11.1.1",

src/api/firebase.js

@@ -4,11 +4,20 @@ import 'firebase/auth';
 import 'firebase/database';
 import 'firebase/firestore';
 
-import firebaseConfig from './firebase-config';
+const config = {
+  apiKey: process.env.REACT_APP_API_KEY,
+  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
+  databaseURL: process.env.REACT_APP_DATABASE_URL,
+  projectId: process.env.REACT_APP_PROJECT_ID,
+  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
+  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
+  appId: process.env.REACT_APP_APP_ID,
+  measurementId: process.env.REACT_APP_MEASUREMENT_ID,
+};
 
 class Firebase {
   constructor() {
-    firebase.initializeApp(firebaseConfig);
+    firebase.initializeApp(config);
 
     this.firebase = firebase;
     this.auth = firebase.auth();

src/components/checkmark/checkmark.js → src/components/checkmark.js

@@ -23,6 +23,7 @@ const variants = {
   empty: {
     icon: <EmptyCheckmarkIcon />,
     label: 'empty',
+    color: 'default',
   },
 };
 
@@ -39,7 +40,7 @@ function Checkmark({ id, initialValue, habitId, date, disabled }) {
   const debouncedUpdate = React.useRef(
     debounce(({ id, newValue }) => {
       updateCheckmarkInDb({ checkmarkId: id, value: newValue, habitId, date });
-    }, 300)
+    }, 200)
   ).current;
 
   // Handles clicking on checkmark

src/components/github-repo-link.js

@@ -15,7 +15,7 @@ function GithubRepoLink(props) {
         target="_blank"
         label={t('githubRepo')}
         rel="noopener noreferrer"
-        href="https://github.com/sitek94/pocket-globe-app"
+        href="https://github.com/sitek94/habit-tracker"
         {...props}
       >
         <GitHubIcon />

src/components/habit-row.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Checkmark } from 'components/checkmark';
 import { makeStyles, TableCell, TableRow, Typography } from '@material-ui/core';
-import { getDay, isFuture } from 'date-fns';
+import { getDay, parseISO } from 'date-fns';
 import { EMPTY } from 'data/constants';
 
 // Styles
@@ -17,7 +17,7 @@ const useStyles = makeStyles((theme) => ({
 // Habit row
 function HabitRow({ habit, dates, checkmarks }) {
   const classes = useStyles();
-
+  
   const { id, name, frequency /* position */ } = habit;
 
   return (
@@ -39,11 +39,10 @@ function HabitRow({ habit, dates, checkmarks }) {
 
       {/* Dates */}
       {dates.map((date) => {
-        const dateObj = new Date(date);
+        const dateObj = parseISO(date);
 
-        // Checkmark is disabled if the date is not tracked or date is in the future
-        const disabled =
-          !frequency.includes(getDay(dateObj)) || isFuture(dateObj);
+        // Checkmark is disabled if the date is not tracked
+        const disabled = !frequency.includes(getDay(dateObj));
 
         // Find checkmark
         const checkmark = checkmarks.find((d) => d.date === date);

src/components/habits-table.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { format, isToday } from 'date-fns';
+import { format, isToday, parseISO } from 'date-fns';
 import { getComparator } from 'utils/misc';
 import { HabitRow } from './habit-row';
 import { useLocale } from 'localization';
@@ -66,7 +66,7 @@ function HabitsTable({ habits, checkmarks, dates }) {
 
   // Currently selected date range cells
   const datesCells = dates.map((d) => {
-    const date = new Date(d);
+    const date = parseISO(d);
 
     return {
       date,

src/components/performance-panel/helpers.js

@@ -0,0 +1,52 @@
+import { COMPLETED } from 'data/constants';
+
+/**
+ * Checkmark object
+ * @typedef  Checkmark
+ *
+ * @property {string} id
+ * @property {string} date
+ * @property {string} habitId
+ * @property {number} value
+ */
+
+/**
+ * Calculate score
+ *
+ * Calculates the score for an array of checkmark values.
+ * The perfomance is the count of COMPLETED checkmarks divided
+ * by the total count.
+ *
+ * @param  {number[]} values
+ *
+ * @returns {number}  floored score between 0 and 100
+ */
+export function calculateScore(values) {
+  if (!values.length) return 0;
+
+  const completedCount = values.reduce((sum, value) => {
+    return value === COMPLETED ? sum + 1 : sum;
+  }, 0);
+
+  return Math.floor((completedCount / values.length) * 100);
+}
+
+/**
+ * Create pie chart data
+ *
+ * @returns an array of data for pie chart
+ */
+export function createPieChartData(values) {
+  const score = calculateScore(values);
+
+  return [
+    {
+      id: 'value',
+      value: score,
+    },
+    {
+      id: 'empty',
+      value: 100 - score,
+    },
+  ];
+}

src/components/performance-panel/index.js

@@ -0,0 +1 @@
+export { PerformancePanel } from './performance-panel';

src/components/user-scores/user-scores.js → src/components/performance-panel/performance-panel.js

@@ -4,29 +4,31 @@ import { Done as DoneIcon } from '@material-ui/icons';
 import { Pie } from '@nivo/pie';
 import {
   calculateScore,
-  createScoreType,
-  getScoreTypeDataList,
-  isCheckmarkLastWeek,
-  isCheckmarkThisWeek,
-  isCheckmarkToday,
+  createPieChartData
 } from './helpers';
 import { useTranslation } from 'translations';
+import { getWeek, isThisWeek, isToday, parseISO } from 'date-fns';
 
-function UserScores({ checkmarks, goal }) {
+function PerformancePanel({ checkmarks, goal }) {
   const t = useTranslation();
 
-  // Score types that we track is 'last week', 'this week' and 'today'
-  const scoreTypeList = React.useMemo(
-    () => [
-      createScoreType(t('lastWeek'), isCheckmarkLastWeek),
-      createScoreType(t('thisWeek'), isCheckmarkThisWeek),
-      createScoreType(t('today'), isCheckmarkToday),
-    ],
-    [t]
-  );
+  const todayValues = checkmarks
+    .filter((c) => isToday(parseISO(c.date)))
+    .map((c) => c.value);
+
+  const thisWeekValues = checkmarks
+    .filter((c) => isThisWeek(parseISO(c.date)))
+    .map((c) => c.value);
+
+  const lastWeekValues = checkmarks
+    .filter((c) => getWeek(parseISO(c.date)) === getWeek(new Date()) - 1)
+    .map((c) => c.value);
 
-  // Use user's checkmarks and score types list to generate the data for pie chart
-  const scoreTypeDataList = getScoreTypeDataList(checkmarks, scoreTypeList);
+  const dataList = [
+    { label: t('today'), data: createPieChartData(todayValues) },
+    { label: t('thisWeek'), data: createPieChartData(thisWeekValues) },
+    { label: t('lastWeek'), data: createPieChartData(lastWeekValues) },
+  ];
 
   // Calculate all time user score
   const allTimeValues = checkmarks.map((d) => d.value);
@@ -43,7 +45,7 @@ function UserScores({ checkmarks, goal }) {
 
       {/* Pie charts */}
       <Grid container justifyContent="space-evenly">
-        {scoreTypeDataList.map(({ label, data }) => {
+        {dataList.map(({ label, data }) => {
           const completedValue = data[0].value;
           const hasReachedGoal = completedValue > goal;
 
@@ -183,4 +185,4 @@ function PieChart({ data }) {
   );
 }
 
-export { UserScores };
+export { PerformancePanel };