Habit Tracking Feature

backend/backend/api/urls.py

@@ -1,10 +1,12 @@
 from rest_framework.routers import DefaultRouter
 from journaling.api.urls import journal_router
+from habits.api.urls import habit_router
 from django.urls import path, include
 
 
 router = DefaultRouter()
 router.registry.extend(journal_router.registry)
+router.registry.extend(habit_router.registry)
 
 urlpatterns = [
     path('', include(router.urls)),

backend/backend/settings.py

@@ -11,10 +11,19 @@
 """
 
 from pathlib import Path
+import json
 
 # Build paths inside the project like this: BASE_DIR / 'subdir'.
 BASE_DIR = Path(__file__).resolve().parent.parent
 
+# Config File for the entire app
+config_file = BASE_DIR.parent / "config.json"
+
+with config_file.open() as json_file:
+    config_data = json.load(json_file)
+    HOST_ADDRESS = config_data.get('HOST_ADDRESS', 'localhost')
+
+
 
 # Quick-start development settings - unsuitable for production
 # See https://docs.djangoproject.com/en/4.2/howto/deployment/checklist/
@@ -38,13 +47,14 @@
     'rest_framework',
     'corsheaders',
     'journaling.apps.JournalingConfig',
+    'habits.apps.HabitsConfig',
 ]
 
 CORS_ALLOWED_ORIGINS = [
     'http://localhost:5173',
     'http://localhost:8081',
-    'exp://192.168.254.26:8081',
-    'http://192.168.254.26:8081',
+    f'exp://{HOST_ADDRESS}:8081',
+    f'http://{HOST_ADDRESS}:8081',
     ]
 
 MIDDLEWARE = [

backend/backend/urls.py

@@ -19,5 +19,6 @@
 
 urlpatterns = [
     path('admin/', admin.site.urls),
-    path('api/', include('journaling.api.urls')),
+    path('api/', include('backend.api.urls')),
+    path('api/', include('journaling.api.urls'))
 ]

backend/habits/admin.py

@@ -0,0 +1,5 @@
+from django.contrib import admin
+from .models import Habit
+
+# Register your models here.
+admin.site.register(Habit)

backend/habits/api/serializers.py

@@ -0,0 +1,13 @@
+from rest_framework import serializers
+from ..models import Habit
+
+class HabitSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = Habit
+        fields = ['id', 'name', 'description', 'good_habit', 'date_started', 'date_last_checked']
+
+
+class HabitCreateUpdateSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = Habit
+        fields = ['name', 'description', 'good_habit']

backend/habits/api/urls.py

@@ -0,0 +1,10 @@
+from django.urls import path, include
+from rest_framework.routers import DefaultRouter
+from .views import HabitView
+
+habit_router = DefaultRouter()
+habit_router.register(r'habit', HabitView)
+
+urlpatterns = [
+    path('', include(habit_router.urls)),
+]

backend/habits/api/views.py

@@ -0,0 +1,18 @@
+from rest_framework import viewsets, status
+from ..models import Habit
+from .serializers import HabitSerializer, HabitCreateUpdateSerializer
+from rest_framework.response import Response
+
+# Create your views here.
+
+class HabitView(viewsets.ModelViewSet):
+    queryset = Habit.objects.all()
+
+    def get_serializer_class(self):
+        if self.action in ['create', 'update', 'partial_update']:
+            return HabitCreateUpdateSerializer
+        else:
+            return HabitSerializer
+
+    def create(self, request, *args, **kwargs):
+        return super().create(request, *args, **kwargs)

backend/habits/apps.py

@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class HabitsConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'habits'

backend/habits/migrations/0001_initial.py

@@ -0,0 +1,25 @@
+# Generated by Django 4.2.7 on 2023-12-13 18:21
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Habit',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('name', models.CharField(max_length=25)),
+                ('description', models.CharField(max_length=125)),
+                ('good_habit', models.BooleanField(default=True)),
+                ('date_started', models.DateTimeField(auto_now_add=True)),
+                ('date_last_checked', models.DateTimeField(auto_now=True)),
+            ],
+        ),
+    ]

backend/habits/models.py

@@ -0,0 +1,11 @@
+from django.db import models
+
+# Create your models here.
+
+
+class Habit(models.Model):
+    name = models.CharField(max_length = 25)
+    description = models.CharField(max_length = 125)
+    good_habit = models.BooleanField(default = True)
+    date_started = models.DateTimeField(auto_now_add=True)
+    date_last_checked = models.DateTimeField(auto_now=True)

config.json

@@ -0,0 +1,4 @@
+
+{
+    "HOST_ADDRESS": "<YOUR_ADDRESS_HERE>"
+}

frontendMobile/src/Api/apiEndpoints.js

@@ -1,7 +1,8 @@
 // This is where all the API endpoints are handled (using a REST framework)
 // I made sure to put them all in one file to make frontend dev and backend dev communication a lot easier!
 
-DOMAIN = 'http://192.168.254.26:8000' // Put the server to your backend here!
+HOST = "<YOUR_ADDRESS_HERE>"  // Put the IP here!
+DOMAIN = `http://${HOST}:8000/`
 
 const endpoints = {
     getJournal: `${DOMAIN}/api/journal`,
@@ -10,6 +11,8 @@ const endpoints = {
     journal: `${DOMAIN}/api/create_journal/`,
     journalPage: `${DOMAIN}/api/create_journal_page/`,
 
+    getHabit: `${DOMAIN}/api/habit/`,
+
     postApiResponse(endpoint, data, handleOk = () => {}, handleError = () => {}) {
         console.log("Sender's Data: ", data)
 
@@ -80,4 +83,4 @@ const endpoints = {
 
 };
 
-export default endpoints;
+export default endpoints;

frontendMobile/src/Components/Habits.js

@@ -0,0 +1,48 @@
+import React, { useState, useCallback } from 'react';
+import { View, ScrollView, Text, Button, StyleSheet } from 'react-native';
+import { mainStyle } from '../Styles/Styles';
+import { useFocusEffect } from '@react-navigation/native'
+import dateTimeFormat from '../Utils/DateTimeFormat';
+import endpoints from '../Api/apiEndpoints';
+
+const s = StyleSheet.create(mainStyle);
+
+const Habits = ({sortBy, navigation}) => {
+    const getHabits = endpoints.getHabit;
+
+    const [habits, setHabits] = useState([]);
+    useFocusEffect(useCallback(() => {endpoints.getAPIResponse(getHabits, setHabits)}, []));
+
+    const sortedHabits = habits.slice().sort(sortBy);
+
+    const controlStreak = (goodHabit) => {
+        if (goodHabit) {
+            console.log("Habit is good!");
+        } else {
+            console.log("Habit is bad!");
+        }
+    }
+
+    return (
+        <ScrollView>
+        {sortedHabits.map((habit) => (
+            <View 
+                key={habit.id} 
+                style={s.journalView.container}
+            >
+                <Text style={s.journalView.type}>{habit.name}</Text>
+                <View style={s.horizontalLine} />
+                <Text>{habit.description}</Text>
+                <Text>Streak: (coming soon)</Text>
+                <Button 
+                    style={ habit.good_habit ? s.journal.button : s.buttonText } 
+                    title={ habit.good_habit ? 'Complete' : 'Relapse' }
+                    onPress={() => controlStreak(habit.good_habit)}
+                />
+            </View>
+        ))}
+        </ScrollView>
+    )
+}
+
+export default Habits;

frontendMobile/src/Navigators/HomeStackNavigator.js

@@ -3,6 +3,7 @@ import JournalingScreen from '../Screens/Journaling/JournalingScreen';
 import ViewJournalsScreen from '../Screens/Journaling/ViewJournalsScreen';
 import ViewPagesScreen from '../Screens/Journaling/ViewPagesScreen';
 import SaveJournalingScreen from '../Screens/Journaling/SaveJournalScreen';
+import CreateHabit from '../Screens/Habits/CreateHabit';
 import { createStackNavigator } from '@react-navigation/stack'
 
 const Nav = createStackNavigator();
@@ -19,6 +20,7 @@ const HomeStackNavigator = ({navigation}) => {
             <Nav.Screen name="Save Journal" component={SaveJournalingScreen} />
             <Nav.Screen name="View Journals" component={ViewJournalsScreen} />
             <Nav.Screen name="My Journal" component={ViewPagesScreen} />
+            <Nav.Screen name="Create Habit" component={CreateHabit} />
         </Nav.Navigator> 
     )
 }

frontendMobile/src/Screens/Habits/CreateHabit.js

@@ -0,0 +1,66 @@
+import React, { useState } from 'react';
+import { View, ScrollView, Button, StyleSheet, TextInput, Text, TouchableOpacity } from 'react-native';
+import { mainStyle } from '../../Styles/Styles';
+import endpoints from '../../Api/apiEndpoints';
+
+const s = StyleSheet.create(mainStyle);
+
+const CreateHabit = ({navigation}) => {
+    const [error, setError] = useState('')
+    const [goodHabit, setGoodHabit] = useState(false)
+
+    const [habitData, setHabitData] = useState({
+        name: '',
+        description: '',
+        good_habit: true,
+    });
+
+    const handleChange = (name, value) => {
+        setHabitData({
+            ...habitData,
+            [name]: value
+        });
+    };
+
+    const handlingPost = {
+        handleOk: () => {
+            setError("Successfully saved habit!");
+            navigation.navigate("Home", error);
+        },
+        handleError: () => {
+            setError("An error has occured while saving your habit!");
+        },
+    }
+    const handleSubmit = () => {
+        const habit = endpoints.getHabit;
+        endpoints.postApiResponse(habit, habitData, handlingPost.handleOk, handlingPost.handleError)
+    }
+
+    return (
+        <ScrollView>
+            <View style={s.container}>
+                <Text>{error}</Text>
+                <TextInput
+                    placeholder="Name"
+                    value={habitData.prompt}
+                    onChangeText={(text) => handleChange('name', text)} 
+                />
+                <TextInput
+                    placeholder="Description"
+                    value={habitData.entry}
+                    multiline
+                    onChangeText={(text) => handleChange('description', text)} 
+                />
+                <Button 
+                    title={goodHabit ? 'Good' : 'Bad'}
+                    onPress={() => setGoodHabit(!goodHabit)}
+                />
+                <TouchableOpacity style={s.journal.submitButton} onPress={handleSubmit}>
+                    <Text style={s.buttonText}>Submit</Text>
+                </TouchableOpacity>
+            </View>
+        </ScrollView>
+    )
+}
+
+export default CreateHabit;

frontendMobile/src/Screens/HomeScreen.js

@@ -2,12 +2,22 @@ import React, { useState, useEffect } from 'react';
 import { StyleSheet, Animated, Easing, Text, View, TouchableOpacity } from 'react-native';
 import { mainStyle } from '../Styles/Styles';
 import JournalingChoices from '../Components/JournalingChoices';
+import Habits from '../Components/Habits';
+import dateTimeFormat from '../Utils/DateTimeFormat';
 
 
 const s = StyleSheet.create(mainStyle);
 
 export default function HomeScreen({navigation}) {
 
+  const [currentTime, setCurrentTime] = useState(new Date());
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      setCurrentTime(new Date());
+    }, 1000);
+    return () => clearInterval(intervalId);
+  }, []);
+
   const [journalChoicesVisible, setJournalChoicesVisible] = useState(false)
   const openJournalChoices = () => setJournalChoicesVisible(true);
   const closeJournalChoices = () => setJournalChoicesVisible(false);
@@ -35,6 +45,7 @@ export default function HomeScreen({navigation}) {
   return (
     <Animated.View style={[s.container, {opacity: fade}]}>
         <Text style={s.text}>This is the Home Page!</Text>
+        <Text>{dateTimeFormat(currentTime)}</Text>
         <View style={s.row}>
           <TouchableOpacity style={s.button} onPress={openJournalChoices}>
             <Text style={s.buttonText}>Start Journal</Text>
@@ -44,8 +55,20 @@ export default function HomeScreen({navigation}) {
           </TouchableOpacity>
         </View>
         <View style={s.horizontalLine} />
-        <View testID='Habits'>
-          <Text>-- Habits Go Here --</Text>
+        <View style={s.myHabits.tab}>
+          <View style={s.row}>
+            <Text style={s.myHabits.text}>My Habits</Text>
+          </View>
+          <View style={s.row}>
+            <TouchableOpacity style={s.myHabits.addButton}
+              onPress={() => navigation.navigate("Create Habit")}
+            >
+              <Text style={s.myHabits.buttonText}>+</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+        <View style={s.column}> 
+            <Habits sortBy={(a, b) => 0} />
         </View>
         <View style={s.horizontalLine} />
       <JournalingChoices visible={journalChoicesVisible}