mirror of
https://github.com/TurTaskProject/TurTaskWeb.git
synced 2025-12-19 22:14:07 +01:00
Merge pull request #41 from TurTaskProject/feature/tasks-api
Update Task Relate UI such as Kanban and Eisenhower
This commit is contained in:
Sirin Puenggun
GitHub
commit
e8b594d2dc
@ -6,46 +6,22 @@ from rest_framework import viewsets
|
||||
from rest_framework.response import Response
|
||||
from rest_framework.permissions import IsAuthenticated
|
||||
|
||||
from tasks.utils import get_service
|
||||
from tasks.utils import get_service, generate_recurrence_rule
|
||||
from tasks.models import Todo, RecurrenceTask
|
||||
from tasks.serializers import TodoUpdateSerializer, RecurrenceTaskUpdateSerializer
|
||||
|
||||
|
||||
class GoogleCalendarEventViewset(viewsets.ViewSet):
|
||||
"""Viewset for list or save Google Calendar Events."""
|
||||
permission_classes = (IsAuthenticated,)
|
||||
|
||||
def __init__(self, *args, **kwargs):
|
||||
super().__init__()
|
||||
self.current_time = datetime.now(tz=timezone.utc).isoformat()
|
||||
self.event_fields = 'items(id,summary,description,created,recurringEventId,updated,start,end)'
|
||||
|
||||
def _validate_serializer(self, serializer):
|
||||
if serializer.is_valid():
|
||||
serializer.save()
|
||||
return Response("Validate Successfully", status=200)
|
||||
return Response(serializer.errors, status=400)
|
||||
|
||||
def post(self, request):
|
||||
service = get_service(request)
|
||||
events = service.events().list(calendarId='primary', fields=self.event_fields).execute()
|
||||
for event in events.get('items', []):
|
||||
if event.get('recurringEventId'):
|
||||
continue
|
||||
event['start_datetime'] = event.get('start').get('dateTime')
|
||||
event['end_datetime'] = event.get('end').get('dateTime')
|
||||
event.pop('start')
|
||||
event.pop('end')
|
||||
try:
|
||||
task = Todo.objects.get(google_calendar_id=event['id'])
|
||||
serializer = TodoUpdateSerializer(instance=task, data=event)
|
||||
return self._validate_serializer(serializer)
|
||||
except Todo.DoesNotExist:
|
||||
serializer = TodoUpdateSerializer(data=event, user=request.user)
|
||||
return self._validate_serializer(serializer)
|
||||
|
||||
def list(self, request, days=7):
|
||||
max_time = (datetime.now(tz=timezone.utc) + timedelta(days=days)).isoformat()
|
||||
self.current_time = (datetime.now(tz=timezone.utc) + timedelta(days=-7)).isoformat()
|
||||
self.max_time = (datetime.now(tz=timezone.utc) + timedelta(days=7)).isoformat()
|
||||
self.event_fields = 'items(id,summary,description,created,recurringEventId,updated,start,end,originalStartTime)'
|
||||
|
||||
def _get_google_events(self, request):
|
||||
"""Get all events from Google Calendar. """
|
||||
service = get_service(request)
|
||||
events = []
|
||||
next_page_token = None
|
||||
@ -54,12 +30,12 @@ class GoogleCalendarEventViewset(viewsets.ViewSet):
|
||||
query = service.events().list(
|
||||
calendarId='primary',
|
||||
timeMin=self.current_time,
|
||||
timeMax=max_time,
|
||||
timeMax=self.max_time,
|
||||
maxResults=200,
|
||||
singleEvents=True,
|
||||
orderBy='startTime',
|
||||
pageToken=next_page_token,
|
||||
fields='items(id,summary,description,created,recurringEventId,updated,start,end)',
|
||||
fields=self.event_fields,
|
||||
)
|
||||
|
||||
page_results = query.execute()
|
||||
@ -71,4 +47,60 @@ class GoogleCalendarEventViewset(viewsets.ViewSet):
|
||||
if next_page_token is None:
|
||||
break
|
||||
|
||||
return Response(events, status=200)
|
||||
return events
|
||||
|
||||
def _validate_serializer(self, serializer):
|
||||
"""Validate serializer and return response."""
|
||||
if serializer.is_valid():
|
||||
serializer.save()
|
||||
return Response("Validate Successfully", status=200)
|
||||
return Response(serializer.errors, status=400)
|
||||
|
||||
def create(self, request, *args, **kwargs):
|
||||
"""Create a new Google Calendar Event."""
|
||||
events = self._get_google_events(request)
|
||||
|
||||
responses = []
|
||||
recurrence_task_ids = []
|
||||
for event in events:
|
||||
start_datetime = event.get('start', {}).get('dateTime')
|
||||
end_datetime = event.get('end', {}).get('dateTime')
|
||||
|
||||
event['start_datetime'] = start_datetime
|
||||
event['end_datetime'] = end_datetime
|
||||
event.pop('start')
|
||||
event.pop('end')
|
||||
|
||||
if (event.get('recurringEventId') in recurrence_task_ids):
|
||||
continue
|
||||
|
||||
if (event.get('recurringEventId') is not None):
|
||||
originalStartTime = event.get('originalStartTime', {}).get('dateTime')
|
||||
rrule_text = generate_recurrence_rule(event['start_datetime'], event['end_datetime'], originalStartTime)
|
||||
event['recurrence'] = rrule_text
|
||||
event.pop('originalStartTime')
|
||||
recurrence_task_ids.append(event['recurringEventId'])
|
||||
|
||||
try:
|
||||
task = RecurrenceTask.objects.get(google_calendar_id=event['id'])
|
||||
serializer = RecurrenceTaskUpdateSerializer(instance=task, data=event)
|
||||
except RecurrenceTask.DoesNotExist:
|
||||
serializer = RecurrenceTaskUpdateSerializer(data=event, user=request.user)
|
||||
|
||||
responses.append(self._validate_serializer(serializer))
|
||||
continue
|
||||
|
||||
try:
|
||||
task = Todo.objects.get(google_calendar_id=event['id'])
|
||||
serializer = TodoUpdateSerializer(instance=task, data=event)
|
||||
except Todo.DoesNotExist:
|
||||
serializer = TodoUpdateSerializer(data=event, user=request.user)
|
||||
|
||||
responses.append(self._validate_serializer(serializer))
|
||||
|
||||
return responses[0] if responses else Response("No events to process", status=200)
|
||||
|
||||
def list(self, request):
|
||||
"""List all Google Calendar Events."""
|
||||
return Response(self._get_google_events(request), status=200)
|
||||
|
||||
39
backend/tasks/migrations/0012_habit.py
Normal file
39
backend/tasks/migrations/0012_habit.py
Normal file
@ -0,0 +1,39 @@
|
||||
# Generated by Django 4.2.6 on 2023-11-13 18:15
|
||||
|
||||
from django.conf import settings
|
||||
from django.db import migrations, models
|
||||
import django.db.models.deletion
|
||||
|
||||
|
||||
class Migration(migrations.Migration):
|
||||
|
||||
dependencies = [
|
||||
migrations.swappable_dependency(settings.AUTH_USER_MODEL),
|
||||
('tasks', '0011_recurrencetask'),
|
||||
]
|
||||
|
||||
operations = [
|
||||
migrations.CreateModel(
|
||||
name='Habit',
|
||||
fields=[
|
||||
('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
|
||||
('title', models.TextField()),
|
||||
('notes', models.TextField(default='')),
|
||||
('importance', models.PositiveSmallIntegerField(choices=[(1, '1'), (2, '2'), (3, '3'), (4, '4'), (5, '5')], default=1)),
|
||||
('difficulty', models.PositiveSmallIntegerField(choices=[(1, 'Easy'), (2, 'Normal'), (3, 'Hard'), (4, 'Very Hard'), (5, 'Devil')], default=1)),
|
||||
('challenge', models.BooleanField(default=False)),
|
||||
('fromSystem', models.BooleanField(default=False)),
|
||||
('creation_date', models.DateTimeField(auto_now_add=True)),
|
||||
('last_update', models.DateTimeField(auto_now=True)),
|
||||
('google_calendar_id', models.CharField(blank=True, max_length=255, null=True)),
|
||||
('start_event', models.DateTimeField(null=True)),
|
||||
('end_event', models.DateTimeField(null=True)),
|
||||
('streak', models.IntegerField(default=0)),
|
||||
('tags', models.ManyToManyField(blank=True, to='tasks.tag')),
|
||||
('user', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to=settings.AUTH_USER_MODEL)),
|
||||
],
|
||||
options={
|
||||
'abstract': False,
|
||||
},
|
||||
),
|
||||
]
|
||||
@ -0,0 +1,18 @@
|
||||
# Generated by Django 4.2.6 on 2023-11-14 15:17
|
||||
|
||||
from django.db import migrations, models
|
||||
|
||||
|
||||
class Migration(migrations.Migration):
|
||||
|
||||
dependencies = [
|
||||
('tasks', '0012_habit'),
|
||||
]
|
||||
|
||||
operations = [
|
||||
migrations.AlterField(
|
||||
model_name='recurrencetask',
|
||||
name='recurrence_rule',
|
||||
field=models.CharField(),
|
||||
),
|
||||
]
|
||||
@ -68,11 +68,19 @@ class Todo(Task):
|
||||
return self.title
|
||||
|
||||
class RecurrenceTask(Task):
|
||||
recurrence_rule = models.TextField()
|
||||
recurrence_rule = models.CharField()
|
||||
|
||||
def __str__(self) -> str:
|
||||
return f"{self.title} ({self.recurrence_rule})"
|
||||
|
||||
|
||||
class Habit(Task):
|
||||
streak = models.IntegerField(default=0)
|
||||
|
||||
def __str__(self) -> str:
|
||||
return f"{self.title} ({self.streak})"
|
||||
|
||||
|
||||
class Subtask(models.Model):
|
||||
"""
|
||||
Represents a subtask associated with a task.
|
||||
|
||||
@ -41,7 +41,7 @@ class RecurrenceTaskUpdateSerializer(serializers.ModelSerializer):
|
||||
description = serializers.CharField(source="notes", required=False)
|
||||
created = serializers.DateTimeField(source="creation_date")
|
||||
updated = serializers.DateTimeField(source="last_update")
|
||||
recurrence = serializers.DateTimeField(source="recurrence_rule")
|
||||
recurrence = serializers.CharField(source="recurrence_rule")
|
||||
start_datetime = serializers.DateTimeField(source="start_event", required=False)
|
||||
end_datetime = serializers.DateTimeField(source="end_event", required=False)
|
||||
|
||||
|
||||
@ -1,17 +1,7 @@
|
||||
from rest_framework import serializers
|
||||
from ..models import Todo
|
||||
from ..models import Todo, RecurrenceTask, Habit
|
||||
|
||||
class TaskCreateSerializer(serializers.ModelSerializer):
|
||||
class Meta:
|
||||
model = Todo
|
||||
# fields = '__all__'
|
||||
exclude = ('tags',)
|
||||
|
||||
def create(self, validated_data):
|
||||
# Create a new task with validated data
|
||||
return Todo.objects.create(**validated_data)
|
||||
|
||||
class TaskGeneralSerializer(serializers.ModelSerializer):
|
||||
class TaskSerializer(serializers.ModelSerializer):
|
||||
class Meta:
|
||||
model = Todo
|
||||
fields = '__all__'
|
||||
@ -19,3 +9,39 @@ class TaskGeneralSerializer(serializers.ModelSerializer):
|
||||
def create(self, validated_data):
|
||||
# Create a new task with validated data
|
||||
return Todo.objects.create(**validated_data)
|
||||
|
||||
class TaskCreateSerializer(serializers.ModelSerializer):
|
||||
class Meta:
|
||||
model = Todo
|
||||
exclude = ('tags',)
|
||||
|
||||
|
||||
class RecurrenceTaskSerializer(serializers.ModelSerializer):
|
||||
class Meta:
|
||||
model = RecurrenceTask
|
||||
fields = '__all__'
|
||||
|
||||
def create(self, validated_data):
|
||||
# Create a new task with validated data
|
||||
return Todo.objects.create(**validated_data)
|
||||
|
||||
class RecurrenceTaskCreateSerializer(serializers.ModelSerializer):
|
||||
class Meta:
|
||||
model = RecurrenceTask
|
||||
exclude = ('tags',)
|
||||
|
||||
|
||||
class HabitTaskSerializer(serializers.ModelSerializer):
|
||||
class Meta:
|
||||
model = Habit
|
||||
fields = '__all__'
|
||||
|
||||
def create(self, validated_data):
|
||||
# Create a new task with validated data
|
||||
return Todo.objects.create(**validated_data)
|
||||
|
||||
|
||||
class HabitTaskCreateSerializer(serializers.ModelSerializer):
|
||||
class Meta:
|
||||
model = Habit
|
||||
exclude = ('tags',)
|
||||
@ -1,16 +1,49 @@
|
||||
from rest_framework import viewsets
|
||||
from rest_framework.permissions import IsAuthenticated
|
||||
from tasks.models import Todo
|
||||
from .serializers import TaskCreateSerializer, TaskGeneralSerializer
|
||||
from tasks.models import Todo, RecurrenceTask, Habit
|
||||
from tasks.tasks.serializers import (TaskCreateSerializer,
|
||||
TaskSerializer,
|
||||
RecurrenceTaskSerializer,
|
||||
RecurrenceTaskCreateSerializer,
|
||||
HabitTaskSerializer,
|
||||
HabitTaskCreateSerializer)
|
||||
|
||||
|
||||
class TodoViewSet(viewsets.ModelViewSet):
|
||||
queryset = Todo.objects.all()
|
||||
serializer_class = TaskGeneralSerializer
|
||||
serializer_class = TaskSerializer
|
||||
permission_classes = [IsAuthenticated]
|
||||
|
||||
def get_queryset(self):
|
||||
queryset = Todo.objects.filter(user=self.request.user)
|
||||
return queryset
|
||||
|
||||
def get_serializer_class(self):
|
||||
# Can't add ManytoMany at creation time (Tags)
|
||||
if self.action == 'create':
|
||||
return TaskCreateSerializer
|
||||
return TaskGeneralSerializer
|
||||
return TaskSerializer
|
||||
|
||||
|
||||
class RecurrenceTaskViewSet(viewsets.ModelViewSet):
|
||||
queryset = RecurrenceTask.objects.all()
|
||||
serializer_class = RecurrenceTaskSerializer
|
||||
permission_classes = [IsAuthenticated]
|
||||
|
||||
def get_serializer_class(self):
|
||||
# Can't add ManytoMany at creation time (Tags)
|
||||
if self.action == 'create':
|
||||
return RecurrenceTaskCreateSerializer
|
||||
return RecurrenceTaskSerializer
|
||||
|
||||
|
||||
class HabitTaskViewSet(viewsets.ModelViewSet):
|
||||
queryset = Habit.objects.all()
|
||||
serializer_class = HabitTaskSerializer
|
||||
permission_classes = [IsAuthenticated]
|
||||
|
||||
def get_serializer_class(self):
|
||||
# Can't add ManytoMany at creation time (Tags)
|
||||
if self.action == 'create':
|
||||
return HabitTaskCreateSerializer
|
||||
return HabitTaskSerializer
|
||||
@ -3,12 +3,14 @@ from django.urls import path, include
|
||||
from rest_framework.routers import DefaultRouter
|
||||
|
||||
from tasks.api import GoogleCalendarEventViewset
|
||||
from tasks.tasks.views import TodoViewSet
|
||||
from tasks.tasks.views import TodoViewSet, RecurrenceTaskViewSet, HabitTaskViewSet
|
||||
from tasks.misc.views import TagViewSet
|
||||
|
||||
|
||||
router = DefaultRouter()
|
||||
router.register(r'todo', TodoViewSet)
|
||||
router.register(r'daily', RecurrenceTaskViewSet)
|
||||
router.register(r'habit', HabitTaskViewSet)
|
||||
router.register(r'tags', TagViewSet)
|
||||
router.register(r'calendar-events', GoogleCalendarEventViewset, basename='calendar-events')
|
||||
|
||||
|
||||
@ -1,8 +1,55 @@
|
||||
from dateutil import rrule
|
||||
from datetime import datetime
|
||||
|
||||
from googleapiclient.discovery import build
|
||||
|
||||
from authentications.access_token_cache import get_credential_from_cache_token
|
||||
|
||||
|
||||
def get_service(request):
|
||||
"""
|
||||
Get a service that communicates to a Google API.
|
||||
|
||||
:param request: Http request object
|
||||
:return: A Resource object with methods for interacting with the calendar service
|
||||
"""
|
||||
credentials = get_credential_from_cache_token(request.user.id)
|
||||
return build('calendar', 'v3', credentials=credentials)
|
||||
|
||||
def _determine_frequency(time_difference):
|
||||
if time_difference.days >= 365:
|
||||
return rrule.YEARLY
|
||||
elif time_difference.days >= 30:
|
||||
return rrule.MONTHLY
|
||||
elif time_difference.days >= 7:
|
||||
return rrule.WEEKLY
|
||||
elif time_difference.days >= 1:
|
||||
return rrule.DAILY
|
||||
elif time_difference.seconds >= 3600:
|
||||
return rrule.HOURLY
|
||||
elif time_difference.seconds >= 60:
|
||||
return rrule.MINUTELY
|
||||
else:
|
||||
return rrule.SECONDLY
|
||||
|
||||
def generate_recurrence_rule(datetime1: str, datetime2: str, original_start_time: str) -> str:
|
||||
"""
|
||||
Generate recurrence rule from
|
||||
difference between two datetime string.
|
||||
|
||||
:param task1: A task object
|
||||
:param task2: A task object
|
||||
:return: A recurrence rule string according to ICAL format
|
||||
"""
|
||||
start_time1 = datetime.fromisoformat(datetime1)
|
||||
start_time2 = datetime.fromisoformat(datetime2)
|
||||
|
||||
time_difference = start_time2 - start_time1
|
||||
|
||||
recurrence_rule = rrule.rrule(
|
||||
freq=_determine_frequency(time_difference),
|
||||
dtstart=datetime.fromisoformat(original_start_time),
|
||||
interval=time_difference.days if time_difference.days > 0 else 1,
|
||||
)
|
||||
|
||||
return str(recurrence_rule)
|
||||
@ -0,0 +1,40 @@
|
||||
# Generated by Django 4.2.6 on 2023-11-13 18:15
|
||||
|
||||
import django.core.validators
|
||||
from django.db import migrations, models
|
||||
import users.models
|
||||
|
||||
|
||||
class Migration(migrations.Migration):
|
||||
|
||||
dependencies = [
|
||||
('users', '0004_userstats'),
|
||||
]
|
||||
|
||||
operations = [
|
||||
migrations.AlterField(
|
||||
model_name='userstats',
|
||||
name='endurance',
|
||||
field=models.IntegerField(default=1, validators=[django.core.validators.MinValueValidator(1), django.core.validators.MaxValueValidator(100)]),
|
||||
),
|
||||
migrations.AlterField(
|
||||
model_name='userstats',
|
||||
name='intelligence',
|
||||
field=models.IntegerField(default=1, validators=[django.core.validators.MinValueValidator(1), django.core.validators.MaxValueValidator(100)]),
|
||||
),
|
||||
migrations.AlterField(
|
||||
model_name='userstats',
|
||||
name='luck',
|
||||
field=models.IntegerField(default=users.models.random_luck, validators=[django.core.validators.MinValueValidator(1), django.core.validators.MaxValueValidator(50)]),
|
||||
),
|
||||
migrations.AlterField(
|
||||
model_name='userstats',
|
||||
name='perception',
|
||||
field=models.IntegerField(default=1, validators=[django.core.validators.MinValueValidator(1), django.core.validators.MaxValueValidator(100)]),
|
||||
),
|
||||
migrations.AlterField(
|
||||
model_name='userstats',
|
||||
name='strength',
|
||||
field=models.IntegerField(default=1, validators=[django.core.validators.MinValueValidator(1), django.core.validators.MaxValueValidator(100)]),
|
||||
),
|
||||
]
|
||||
@ -10,8 +10,10 @@ import Calendar from "./components/calendar/calendar";
|
||||
import KanbanBoard from "./components/kanbanBoard/kanbanBoard";
|
||||
import IconSideNav from "./components/navigations/IconSideNav";
|
||||
import Eisenhower from "./components/eisenhowerMatrix/Eisenhower";
|
||||
import PrivateRoute from "./PrivateRoute";
|
||||
import ProfileUpdatePage from "./components/profilePage";
|
||||
|
||||
|
||||
const App = () => {
|
||||
const location = useLocation();
|
||||
const prevention = ["/login", "/signup"];
|
||||
@ -20,16 +22,24 @@ const App = () => {
|
||||
return (
|
||||
<div className={isLoginPageOrSignUpPage ? "" : "display: flex"}>
|
||||
{!isLoginPageOrSignUpPage && <IconSideNav />}
|
||||
<div className={isLoginPageOrSignUpPage ? "" : "flex-1"}>
|
||||
<div className={isLoginPageOrSignUpPage ? "" : "flex-1 ml-[76px]"}>
|
||||
<NavBar />
|
||||
<div className={isLoginPageOrSignUpPage ? "" : "flex items-center justify-center"}>
|
||||
<Routes>
|
||||
<Route path="/" element={<Home />} />
|
||||
<Route path="/tasks" element={<KanbanBoard />} />
|
||||
<Route exact path="/tasks" element={<PrivateRoute />}>
|
||||
<Route exact path="/tasks" element={<KanbanBoard />} />
|
||||
</Route>
|
||||
<Route path="/testAuth" element={<TestAuth />} />
|
||||
<Route path="/profile" element={<ProfileUpdatePage />} />
|
||||
<Route path="/calendar" element={<Calendar />} />
|
||||
<Route path="/priority" element={<Eisenhower />} />
|
||||
<Route exact path="/profile" element={<PrivateRoute />}>
|
||||
<Route exact path="/profile" element={<ProfileUpdatePage />} />
|
||||
</Route>
|
||||
<Route exact path="/calendar" element={<PrivateRoute />}>
|
||||
<Route exact path="/calendar" element={<Calendar />} />
|
||||
</Route>
|
||||
<Route exact path="/priority" element={<PrivateRoute />}>
|
||||
<Route exact path="/priority" element={<Eisenhower />} />
|
||||
</Route>
|
||||
<Route path="/login" element={<LoginPage />} />
|
||||
<Route path="/signup" element={<SignUpPage />} />
|
||||
</Routes>
|
||||
|
||||
11
frontend/src/PrivateRoute.jsx
Normal file
11
frontend/src/PrivateRoute.jsx
Normal file
@ -0,0 +1,11 @@
|
||||
import React from "react";
|
||||
import { Navigate, Outlet } from "react-router-dom";
|
||||
import { useAuth } from "./hooks/authentication/IsAuthenticated";
|
||||
|
||||
const PrivateRoute = () => {
|
||||
const { isAuthenticated, setIsAuthenticated } = useAuth();
|
||||
const auth = isAuthenticated;
|
||||
return auth ? <Outlet /> : <Navigate to="/login" />;
|
||||
};
|
||||
|
||||
export default PrivateRoute;
|
||||
@ -1,12 +1,8 @@
|
||||
import axiosInstance from "./configs/AxiosConfig";
|
||||
import { createTask, readTasks, readTaskByID, updateTask, deleteTask } from "./TaskApi";
|
||||
|
||||
export const fetchTags = () => {
|
||||
return axiosInstance
|
||||
.get("tags/")
|
||||
.then(response => {
|
||||
return response.data;
|
||||
})
|
||||
.catch(error => {
|
||||
throw error;
|
||||
});
|
||||
};
|
||||
// CRUD functions for "tags" endpoint
|
||||
export const createTag = data => createTask("tags", data);
|
||||
export const readTags = () => readTasks("tags");
|
||||
export const readTagByID = id => readTaskByID("tags", id);
|
||||
export const updateTag = (id, data) => updateTask("tags", id, data);
|
||||
export const deleteTag = id => deleteTask("tags", id);
|
||||
|
||||
@ -1,23 +1,73 @@
|
||||
import axiosInstance from "./configs/AxiosConfig";
|
||||
|
||||
export const fetchTodoTasks = () => {
|
||||
const baseURL = "";
|
||||
|
||||
export const createTask = (endpoint, data) => {
|
||||
return axiosInstance
|
||||
.get("todo/")
|
||||
.then(response => {
|
||||
return response.data;
|
||||
})
|
||||
.post(`${baseURL}${endpoint}/`, data)
|
||||
.then(response => response.data)
|
||||
.catch(error => {
|
||||
throw error;
|
||||
});
|
||||
};
|
||||
|
||||
export const fetchTodoTasksID = id => {
|
||||
export const readTasks = endpoint => {
|
||||
return axiosInstance
|
||||
.get(`todo/${id}/`)
|
||||
.then(response => {
|
||||
return response.data;
|
||||
})
|
||||
.get(`${baseURL}${endpoint}/`)
|
||||
.then(response => response.data)
|
||||
.catch(error => {
|
||||
throw error;
|
||||
});
|
||||
};
|
||||
|
||||
export const readTaskByID = (endpoint, id) => {
|
||||
return axiosInstance
|
||||
.get(`${baseURL}${endpoint}/${id}/`)
|
||||
.then(response => response.data)
|
||||
.catch(error => {
|
||||
throw error;
|
||||
});
|
||||
};
|
||||
|
||||
export const updateTask = (endpoint, id, data) => {
|
||||
return axiosInstance
|
||||
.put(`${baseURL}${endpoint}/${id}/`, data)
|
||||
.then(response => response.data)
|
||||
.catch(error => {
|
||||
throw error;
|
||||
});
|
||||
};
|
||||
|
||||
export const deleteTask = (endpoint, id) => {
|
||||
return axiosInstance
|
||||
.delete(`${baseURL}${endpoint}/${id}/`)
|
||||
.then(response => response.data)
|
||||
.catch(error => {
|
||||
throw error;
|
||||
});
|
||||
};
|
||||
|
||||
// Create
|
||||
export const createTodoTask = data => createTask("todo", data);
|
||||
export const createRecurrenceTask = data => createTask("daily", data);
|
||||
export const createHabitTask = data => createTask("habit", data);
|
||||
|
||||
// Read
|
||||
export const readTodoTasks = () => readTasks("todo");
|
||||
export const readRecurrenceTasks = () => readTasks("daily");
|
||||
export const readHabitTasks = () => readTasks("habit");
|
||||
|
||||
// Read by ID
|
||||
export const readTodoTaskByID = id => readTaskByID("todo", id);
|
||||
export const readRecurrenceTaskByID = id => readTaskByID("daily", id);
|
||||
export const readHabitTaskByID = id => readTaskByID("habit", id);
|
||||
|
||||
// Update
|
||||
export const updateTodoTask = (id, data) => updateTask("todo", id, data);
|
||||
export const updateRecurrenceTask = (id, data) => updateTask("daily", id, data);
|
||||
export const updateHabitTask = (id, data) => updateTask("habit", id, data);
|
||||
|
||||
// Delete
|
||||
export const deleteTodoTask = id => deleteTask("todo", id);
|
||||
export const deleteRecurrenceTask = id => deleteTask("daily", id);
|
||||
export const deleteHabitTask = id => deleteTask("habit", id);
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import axios from 'axios';
|
||||
import axios from "axios";
|
||||
|
||||
const ApiUpdateUserProfile = async (formData) => {
|
||||
const ApiUpdateUserProfile = async formData => {
|
||||
try {
|
||||
const response = await axios.post('http://127.0.1:8000/api/user/update/', formData, {
|
||||
const response = await axios.post("http://127.0.1:8000/api/user/update/", formData, {
|
||||
headers: {
|
||||
'Authorization': "Bearer " + localStorage.getItem('access_token'),
|
||||
'Content-Type': 'multipart/form-data',
|
||||
Authorization: "Bearer " + localStorage.getItem("access_token"),
|
||||
"Content-Type": "multipart/form-data",
|
||||
},
|
||||
});
|
||||
|
||||
@ -13,7 +13,7 @@ const ApiUpdateUserProfile = async (formData) => {
|
||||
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
console.error('Error updating user profile:', error);
|
||||
console.error("Error updating user profile:", error);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
import axios from 'axios';
|
||||
import axios from "axios";
|
||||
import { redirect } from "react-router-dom";
|
||||
|
||||
const axiosInstance = axios.create({
|
||||
baseURL: 'http://127.0.0.1:8000/api/',
|
||||
baseURL: "http://127.0.0.1:8000/api/",
|
||||
timeout: 5000,
|
||||
headers: {
|
||||
'Authorization': "Bearer " + localStorage.getItem('access_token'),
|
||||
'Content-Type': 'application/json',
|
||||
'accept': 'application/json',
|
||||
Authorization: "Bearer " + localStorage.getItem("access_token"),
|
||||
"Content-Type": "application/json",
|
||||
accept: "application/json",
|
||||
},
|
||||
});
|
||||
|
||||
@ -15,28 +16,30 @@ axiosInstance.interceptors.response.use(
|
||||
response => response,
|
||||
error => {
|
||||
const originalRequest = error.config;
|
||||
const refresh_token = localStorage.getItem('refresh_token');
|
||||
const refresh_token = localStorage.getItem("refresh_token");
|
||||
|
||||
// Check if the error is due to 401 and a refresh token is available
|
||||
if (error.response.status === 401 && error.response.statusText === "Unauthorized" && refresh_token !== "undefined") {
|
||||
if (
|
||||
error.response.status === 401 &&
|
||||
error.response.statusText === "Unauthorized" &&
|
||||
refresh_token !== "undefined"
|
||||
) {
|
||||
return axiosInstance
|
||||
.post('/token/refresh/', { refresh: refresh_token })
|
||||
.then((response) => {
|
||||
.post("/token/refresh/", { refresh: refresh_token })
|
||||
.then(response => {
|
||||
localStorage.setItem("access_token", response.data.access);
|
||||
|
||||
localStorage.setItem('access_token', response.data.access);
|
||||
|
||||
axiosInstance.defaults.headers['Authorization'] = "Bearer " + response.data.access;
|
||||
originalRequest.headers['Authorization'] = "Bearer " + response.data.access;
|
||||
axiosInstance.defaults.headers["Authorization"] = "Bearer " + response.data.access;
|
||||
originalRequest.headers["Authorization"] = "Bearer " + response.data.access;
|
||||
|
||||
return axiosInstance(originalRequest);
|
||||
})
|
||||
.catch(err => {
|
||||
console.log('Interceptors error: ', err);
|
||||
console.log("Interceptors error: ", err);
|
||||
});
|
||||
}
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
export default axiosInstance;
|
||||
|
||||
@ -1,27 +1,65 @@
|
||||
import React from 'react';
|
||||
import React from "react";
|
||||
import { FiAlertCircle, FiClock, FiXCircle, FiCheckCircle } from "react-icons/fi";
|
||||
|
||||
function EachBlog({ name, colorCode }) {
|
||||
function EachBlog({ name, colorCode, contentList, icon }) {
|
||||
return (
|
||||
<div className={`grid grid-rows-2 gap-4 text-left p-4 rounded-lg bg-white border border-gray-300 shadow-md`}>
|
||||
<div className={`text-xl font-bold`} style={{ color: colorCode }}>
|
||||
{name}
|
||||
<div
|
||||
className={`h-full text-left p-4 rounded-lg bg-white border border-gray-300 overflow-y-auto`}>
|
||||
<div className="flex" style={{ color: colorCode }}>
|
||||
<span className="mx-2 mt-1">{icon}</span>
|
||||
<span>{name}</span>
|
||||
</div>
|
||||
<div className='h-36'>
|
||||
Content goes here
|
||||
<hr className="my-3 h-0.5 border-t-0 bg-gray-300 opacity-100 dark:opacity-50" />
|
||||
<div className="space-y-2">
|
||||
{contentList.length === 0 ? (
|
||||
<p className="text-gray-500 text-center">No tasks</p>
|
||||
) : (
|
||||
contentList.map((item, index) => (
|
||||
<div key={index} className="flex items-start">
|
||||
<input type="checkbox" checked={item.checked} className="checkbox mt-1 mr-2" />
|
||||
<label className="cursor-pointer">{item.text}</label>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Eisenhower() {
|
||||
const contentList_ui = [
|
||||
{ text: "Complete report for the meeting", checked: true },
|
||||
{ text: "Review project proposal", checked: false },
|
||||
{ text: "Submit expense report", checked: false },
|
||||
{ text: "Complete report for the meeting", checked: true },
|
||||
{ text: "Review project proposal", checked: false },
|
||||
{ text: "Submit expense report", checked: false },
|
||||
{ text: "Complete report for the meeting", checked: true },
|
||||
{ text: "Review project proposal", checked: false },
|
||||
{ text: "Submit expense report", checked: false },
|
||||
];
|
||||
|
||||
const contentList_uni = [];
|
||||
const contentList_nui = [];
|
||||
const contentList_nuni = [];
|
||||
|
||||
return (
|
||||
<div className='bg-slate-100 text-left p-4 m-auto'>
|
||||
<h1 className="text-3xl font-bold mb-4">The Eisenhower Matrix</h1>
|
||||
<div className='grid grid-rows-2 grid-cols-2 gap-2'>
|
||||
<EachBlog name="Urgent & Important" colorCode="#FF5733" />
|
||||
<EachBlog name="Urgent & Not important" colorCode="#FDDD5C" />
|
||||
<EachBlog name="Not urgent & Important" colorCode="#189AB4" />
|
||||
<EachBlog name="Not urgent & Not important" colorCode="#94FA92" />
|
||||
<div className="bg-slate-100 text-left p-4 w-full">
|
||||
<div className="grid grid-rows-2 grid-cols-2 gap-2">
|
||||
<EachBlog name="Urgent & Important" colorCode="#ff5f68" icon={<FiAlertCircle />} contentList={contentList_ui} />
|
||||
<EachBlog name="Urgent & Not important" colorCode="#ffb000" icon={<FiClock />} contentList={contentList_uni} />
|
||||
<EachBlog
|
||||
name="Not urgent & Important"
|
||||
colorCode="#4772fa"
|
||||
icon={<FiCheckCircle />}
|
||||
contentList={contentList_nui}
|
||||
/>
|
||||
<EachBlog
|
||||
name="Not urgent & Not important"
|
||||
colorCode="#0cce9c"
|
||||
icon={<FiXCircle />}
|
||||
contentList={contentList_nuni}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React from 'react';
|
||||
import React from "react";
|
||||
|
||||
function HomePage() {
|
||||
return (
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
import React, { useState, useRef } from 'react';
|
||||
import { ApiUpdateUserProfile } from '../api/UserProfileApi';
|
||||
import React, { useState, useRef } from "react";
|
||||
import { ApiUpdateUserProfile } from "../api/UserProfileApi";
|
||||
|
||||
function ProfileUpdateComponent() {
|
||||
const [file, setFile] = useState(null);
|
||||
const [username, setUsername] = useState('');
|
||||
const [fullName, setFullName] = useState('');
|
||||
const [about, setAbout] = useState('');
|
||||
const defaultImage = 'https://i1.sndcdn.com/artworks-cTz48e4f1lxn5Ozp-L3hopw-t500x500.jpg';
|
||||
const [username, setUsername] = useState("");
|
||||
const [fullName, setFullName] = useState("");
|
||||
const [about, setAbout] = useState("");
|
||||
const defaultImage = "https://i1.sndcdn.com/artworks-cTz48e4f1lxn5Ozp-L3hopw-t500x500.jpg";
|
||||
const fileInputRef = useRef(null);
|
||||
|
||||
const handleImageUpload = () => {
|
||||
@ -15,7 +15,7 @@ function ProfileUpdateComponent() {
|
||||
}
|
||||
};
|
||||
|
||||
const handleFileChange = (e) => {
|
||||
const handleFileChange = e => {
|
||||
const selectedFile = e.target.files[0];
|
||||
if (selectedFile) {
|
||||
setFile(selectedFile);
|
||||
@ -24,9 +24,9 @@ function ProfileUpdateComponent() {
|
||||
|
||||
const handleSave = () => {
|
||||
const formData = new FormData();
|
||||
formData.append('profile_pic', file);
|
||||
formData.append('first_name', username);
|
||||
formData.append('about', about);
|
||||
formData.append("profile_pic", file);
|
||||
formData.append("first_name", username);
|
||||
formData.append("about", about);
|
||||
|
||||
ApiUpdateUserProfile(formData);
|
||||
};
|
||||
@ -45,10 +45,7 @@ function ProfileUpdateComponent() {
|
||||
ref={fileInputRef}
|
||||
/>
|
||||
</label>
|
||||
<div
|
||||
className="avatar w-32 h-32 cursor-pointer hover:blur"
|
||||
onClick={handleImageUpload}
|
||||
>
|
||||
<div className="avatar w-32 h-32 cursor-pointer hover:blur" onClick={handleImageUpload}>
|
||||
{file ? (
|
||||
<img src={URL.createObjectURL(file)} alt="Profile" className="rounded-full" />
|
||||
) : (
|
||||
@ -69,7 +66,7 @@ function ProfileUpdateComponent() {
|
||||
placeholder="Enter your username"
|
||||
className="input w-full"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
onChange={e => setUsername(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -81,7 +78,7 @@ function ProfileUpdateComponent() {
|
||||
placeholder="Enter your full name"
|
||||
className="input w-full"
|
||||
value={fullName}
|
||||
onChange={(e) => setFullName(e.target.value)}
|
||||
onChange={e => setFullName(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -92,7 +89,7 @@ function ProfileUpdateComponent() {
|
||||
placeholder="Tell us about yourself"
|
||||
className="textarea w-full h-32"
|
||||
value={about}
|
||||
onChange={(e) => setAbout(e.target.value)}
|
||||
onChange={e => setAbout(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
@ -1,19 +0,0 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
|
||||
function IsAuthenticated() {
|
||||
const [isAuthenticated, setIsAuthenticated] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const access_token = localStorage.getItem('access_token');
|
||||
|
||||
if (access_token) {
|
||||
setIsAuthenticated(true);
|
||||
} else {
|
||||
setIsAuthenticated(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
return isAuthenticated;
|
||||
}
|
||||
|
||||
export default IsAuthenticated;
|
||||
@ -5,9 +5,13 @@ import { useGoogleLogin } from "@react-oauth/google";
|
||||
import refreshAccessToken from "./refreshAcesstoken";
|
||||
import axiosapi from "../../api/AuthenticationApi";
|
||||
|
||||
import { useAuth } from "../../hooks/authentication/IsAuthenticated";
|
||||
|
||||
function LoginPage() {
|
||||
const Navigate = useNavigate();
|
||||
|
||||
const { isAuthenticated, setIsAuthenticated } = useAuth();
|
||||
|
||||
useEffect(() => {
|
||||
if (!refreshAccessToken()) {
|
||||
Navigate("/");
|
||||
@ -39,11 +43,13 @@ function LoginPage() {
|
||||
localStorage.setItem("access_token", res.data.access);
|
||||
localStorage.setItem("refresh_token", res.data.refresh);
|
||||
axiosapi.axiosInstance.defaults.headers["Authorization"] = "Bearer " + res.data.access;
|
||||
setIsAuthenticated(true);
|
||||
Navigate("/");
|
||||
})
|
||||
.catch(err => {
|
||||
console.log("Login failed");
|
||||
console.log(err);
|
||||
setIsAuthenticated(false);
|
||||
});
|
||||
};
|
||||
|
||||
@ -58,10 +64,12 @@ function LoginPage() {
|
||||
|
||||
localStorage.setItem("access_token", access_token);
|
||||
localStorage.setItem("refresh_token", refresh_token);
|
||||
setIsAuthenticated(true);
|
||||
Navigate("/");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error with the POST request:", error);
|
||||
setIsAuthenticated(false);
|
||||
}
|
||||
},
|
||||
onError: errorResponse => console.log(errorResponse),
|
||||
|
||||
@ -1,31 +1,30 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import axiosapi from '../../api/AuthenticationApi';
|
||||
|
||||
import Avatar from '@mui/material/Avatar';
|
||||
import Button from '@mui/material/Button';
|
||||
import CssBaseline from '@mui/material/CssBaseline';
|
||||
import TextField from '@mui/material/TextField';
|
||||
import FormControlLabel from '@mui/material/FormControlLabel';
|
||||
import Checkbox from '@mui/material/Checkbox';
|
||||
import Link from '@mui/material/Link';
|
||||
import Grid from '@mui/material/Grid';
|
||||
import Box from '@mui/material/Box';
|
||||
import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Container from '@mui/material/Container';
|
||||
import { createTheme, ThemeProvider } from '@mui/material/styles';
|
||||
import React, { useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import axiosapi from "../../api/AuthenticationApi";
|
||||
|
||||
import Avatar from "@mui/material/Avatar";
|
||||
import Button from "@mui/material/Button";
|
||||
import CssBaseline from "@mui/material/CssBaseline";
|
||||
import TextField from "@mui/material/TextField";
|
||||
import FormControlLabel from "@mui/material/FormControlLabel";
|
||||
import Checkbox from "@mui/material/Checkbox";
|
||||
import Link from "@mui/material/Link";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Box from "@mui/material/Box";
|
||||
import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import Container from "@mui/material/Container";
|
||||
import { createTheme, ThemeProvider } from "@mui/material/styles";
|
||||
|
||||
function Copyright(props) {
|
||||
return (
|
||||
<Typography variant="body2" color="text.secondary" align="center" {...props}>
|
||||
{'Copyright © '}
|
||||
{"Copyright © "}
|
||||
<Link color="inherit" href="https://github.com/TurTaskProject/TurTaskWeb">
|
||||
TurTask
|
||||
</Link>{' '}
|
||||
</Link>{" "}
|
||||
{new Date().getFullYear()}
|
||||
{'.'}
|
||||
{"."}
|
||||
</Typography>
|
||||
);
|
||||
}
|
||||
@ -33,18 +32,17 @@ function Copyright(props) {
|
||||
const defaultTheme = createTheme();
|
||||
|
||||
export default function SignUp() {
|
||||
|
||||
const Navigate = useNavigate();
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
email: '',
|
||||
username: '',
|
||||
password: '',
|
||||
email: "",
|
||||
username: "",
|
||||
password: "",
|
||||
});
|
||||
const [error, setError] = useState(null);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
const handleSubmit = async e => {
|
||||
e.preventDefault();
|
||||
setIsSubmitting(true);
|
||||
setError(null);
|
||||
@ -52,15 +50,15 @@ export default function SignUp() {
|
||||
try {
|
||||
axiosapi.createUser(formData);
|
||||
} catch (error) {
|
||||
console.error('Error creating user:', error);
|
||||
setError('Registration failed. Please try again.');
|
||||
console.error("Error creating user:", error);
|
||||
setError("Registration failed. Please try again.");
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
Navigate('/login');
|
||||
Navigate("/login");
|
||||
};
|
||||
|
||||
const handleChange = (e) => {
|
||||
const handleChange = e => {
|
||||
const { name, value } = e.target;
|
||||
setFormData({ ...formData, [name]: value });
|
||||
};
|
||||
@ -72,12 +70,11 @@ export default function SignUp() {
|
||||
<Box
|
||||
sx={{
|
||||
marginTop: 8,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<Avatar sx={{ m: 1, bgcolor: 'secondary.main' }}>
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
}}>
|
||||
<Avatar sx={{ m: 1, bgcolor: "secondary.main" }}>
|
||||
<LockOutlinedIcon />
|
||||
</Avatar>
|
||||
<Typography component="h1" variant="h5">
|
||||
@ -127,12 +124,7 @@ export default function SignUp() {
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Button
|
||||
type="submit"
|
||||
fullWidth
|
||||
variant="contained"
|
||||
sx={{ mt: 3, mb: 2 }}
|
||||
>
|
||||
<Button type="submit" fullWidth variant="contained" sx={{ mt: 3, mb: 2 }}>
|
||||
Sign Up
|
||||
</Button>
|
||||
<Grid container justifyContent="flex-end">
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import axios from 'axios';
|
||||
import axios from "axios";
|
||||
|
||||
async function refreshAccessToken() {
|
||||
const refresh_token = localStorage.getItem('refresh_token');
|
||||
const access_token = localStorage.getItem('access_token');
|
||||
const refresh_token = localStorage.getItem("refresh_token");
|
||||
const access_token = localStorage.getItem("access_token");
|
||||
|
||||
if (access_token) {
|
||||
return true;
|
||||
@ -12,7 +12,7 @@ async function refreshAccessToken() {
|
||||
return false;
|
||||
}
|
||||
|
||||
const refreshUrl = 'http://127.0.0.1:8000/api/token/refresh/';
|
||||
const refreshUrl = "http://127.0.0.1:8000/api/token/refresh/";
|
||||
|
||||
try {
|
||||
const response = await axios.post(refreshUrl, { refresh: refresh_token });
|
||||
@ -22,8 +22,8 @@ async function refreshAccessToken() {
|
||||
const newAccessToken = response.data.access;
|
||||
const newRefreshToken = response.data.refresh;
|
||||
|
||||
localStorage.setItem('access_token', newAccessToken);
|
||||
localStorage.setItem('refresh_token', newRefreshToken);
|
||||
localStorage.setItem("access_token", newAccessToken);
|
||||
localStorage.setItem("refresh_token", newRefreshToken);
|
||||
|
||||
return true;
|
||||
} else {
|
||||
|
||||
@ -1,35 +1,19 @@
|
||||
import { fetchTodoTasks } from '../../api/TaskApi';
|
||||
import { readTodoTasks } from "../../api/TaskApi";
|
||||
|
||||
let eventGuid = 0
|
||||
let eventGuid = 0;
|
||||
|
||||
// function getDateAndTime(dateString) {
|
||||
// const dateObject = new Date(dateString);
|
||||
|
||||
// const year = dateObject.getFullYear();
|
||||
// const month = (dateObject.getMonth() + 1).toString().padStart(2, '0');
|
||||
// const day = dateObject.getDate().toString().padStart(2, '0');
|
||||
// const dateFormatted = `${year}-${month}-${day}`;
|
||||
|
||||
// const hours = dateObject.getUTCHours().toString().padStart(2, '0');
|
||||
// const minutes = dateObject.getUTCMinutes().toString().padStart(2, '0');
|
||||
// const seconds = dateObject.getUTCSeconds().toString().padStart(2, '0');
|
||||
// const timeFormatted = `T${hours}:${minutes}:${seconds}`;
|
||||
|
||||
// return dateFormatted + timeFormatted;
|
||||
// }
|
||||
|
||||
const mapResponseToEvents = (response) => {
|
||||
const mapResponseToEvents = response => {
|
||||
return response.map(item => ({
|
||||
id: createEventId(),
|
||||
title: item.title,
|
||||
start: item.start_event,
|
||||
end: item.end_event,
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
export async function getEvents() {
|
||||
try {
|
||||
const response = await fetchTodoTasks();
|
||||
const response = await readTodoTasks();
|
||||
return mapResponseToEvents(response);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { useState } from 'react';
|
||||
import React, { useState } from "react";
|
||||
import { formatDate } from "@fullcalendar/core";
|
||||
import FullCalendar from "@fullcalendar/react";
|
||||
import dayGridPlugin from "@fullcalendar/daygrid";
|
||||
@ -79,7 +79,7 @@ export default class Calendar extends React.Component {
|
||||
});
|
||||
};
|
||||
|
||||
handleDateSelect = (selectInfo) => {
|
||||
handleDateSelect = selectInfo => {
|
||||
let title = prompt("Please enter a new title for your event");
|
||||
let calendarApi = selectInfo.view.calendar;
|
||||
|
||||
@ -96,13 +96,13 @@ export default class Calendar extends React.Component {
|
||||
}
|
||||
};
|
||||
|
||||
handleEventClick = (clickInfo) => {
|
||||
handleEventClick = clickInfo => {
|
||||
if (confirm(`Are you sure you want to delete the event '${clickInfo.event.title}'`)) {
|
||||
clickInfo.event.remove();
|
||||
}
|
||||
};
|
||||
|
||||
handleEvents = (events) => {
|
||||
handleEvents = events => {
|
||||
this.setState({
|
||||
currentEvents: events,
|
||||
});
|
||||
|
||||
@ -1,22 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
function PlusIcon() {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={1.5}
|
||||
stroke="currentColor"
|
||||
className="w-6 h-6"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default PlusIcon;
|
||||
@ -1,23 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
function TrashIcon() {
|
||||
return (
|
||||
React.createElement(
|
||||
"svg",
|
||||
{
|
||||
xmlns: "http://www.w3.org/2000/svg",
|
||||
fill: "none",
|
||||
viewBox: "0 0 24 24",
|
||||
strokeWidth: 1.5,
|
||||
className: "w-6 h-6"
|
||||
},
|
||||
React.createElement("path", {
|
||||
strokeLinecap: "round",
|
||||
strokeLinejoin: "round",
|
||||
d: "M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
|
||||
})
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default TrashIcon;
|
||||
@ -1,33 +1,18 @@
|
||||
import { SortableContext, useSortable } from "@dnd-kit/sortable";
|
||||
import TrashIcon from "../icons/trashIcon";
|
||||
import { BsFillTrashFill } from "react-icons/bs";
|
||||
import { AiOutlinePlusCircle } from "react-icons/ai";
|
||||
import { CSS } from "@dnd-kit/utilities";
|
||||
import { useMemo, useState } from "react";
|
||||
import PlusIcon from "../icons/plusIcon";
|
||||
import TaskCard from "./taskCard";
|
||||
|
||||
function ColumnContainer({
|
||||
column,
|
||||
deleteColumn,
|
||||
updateColumn,
|
||||
createTask,
|
||||
tasks,
|
||||
deleteTask,
|
||||
updateTask,
|
||||
}) {
|
||||
function ColumnContainer({ column, deleteColumn, updateColumn, createTask, tasks, deleteTask, updateTask }) {
|
||||
const [editMode, setEditMode] = useState(false);
|
||||
|
||||
const tasksIds = useMemo(() => {
|
||||
return tasks.map((task) => task.id);
|
||||
return tasks.map(task => task.id);
|
||||
}, [tasks]);
|
||||
|
||||
const {
|
||||
setNodeRef,
|
||||
attributes,
|
||||
listeners,
|
||||
transform,
|
||||
transition,
|
||||
isDragging,
|
||||
} = useSortable({
|
||||
const { setNodeRef, attributes, listeners, transform, transition, isDragging } = useSortable({
|
||||
id: column.id,
|
||||
data: {
|
||||
type: "Column",
|
||||
@ -47,18 +32,15 @@ function ColumnContainer({
|
||||
ref={setNodeRef}
|
||||
style={style}
|
||||
className="
|
||||
bg-columnBackgroundColor
|
||||
opacity-40
|
||||
border-2
|
||||
border-pink-500
|
||||
border-blue-500
|
||||
w-[350px]
|
||||
h-[500px]
|
||||
max-h-[500px]
|
||||
max-h-[400px]
|
||||
rounded-md
|
||||
flex
|
||||
flex-col
|
||||
"
|
||||
></div>
|
||||
"></div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -67,15 +49,13 @@ function ColumnContainer({
|
||||
ref={setNodeRef}
|
||||
style={style}
|
||||
className="
|
||||
bg-columnBackgroundColor
|
||||
w-[350px]
|
||||
h-[500px]
|
||||
max-h-[500px]
|
||||
bg-[#f1f2f4]
|
||||
w-[280px]
|
||||
max-h-[400px]
|
||||
rounded-md
|
||||
flex
|
||||
flex-col
|
||||
"
|
||||
>
|
||||
">
|
||||
{/* Column title */}
|
||||
<div
|
||||
{...attributes}
|
||||
@ -84,47 +64,26 @@ function ColumnContainer({
|
||||
setEditMode(true);
|
||||
}}
|
||||
className="
|
||||
bg-mainBackgroundColor
|
||||
ml-3
|
||||
text-md
|
||||
h-[60px]
|
||||
cursor-grab
|
||||
rounded-md
|
||||
rounded-b-none
|
||||
p-3
|
||||
font-bold
|
||||
border-columnBackgroundColor
|
||||
border-4
|
||||
flex
|
||||
items-center
|
||||
justify-between
|
||||
"
|
||||
>
|
||||
">
|
||||
<div className="flex gap-2">
|
||||
<div
|
||||
className="
|
||||
flex
|
||||
justify-center
|
||||
items-center
|
||||
bg-columnBackgroundColor
|
||||
px-2
|
||||
py-1
|
||||
text-sm
|
||||
rounded-full
|
||||
"
|
||||
>
|
||||
0
|
||||
</div>
|
||||
{!editMode && column.title}
|
||||
{editMode && (
|
||||
<input
|
||||
className="bg-black focus:border-rose-500 border rounded outline-none px-2"
|
||||
className="bg-gray-200 focus:border-blue-500 border rounded-md outline-none px-2"
|
||||
value={column.title}
|
||||
onChange={(e) => updateColumn(column.id, e.target.value)}
|
||||
onChange={e => updateColumn(column.id, e.target.value)}
|
||||
autoFocus
|
||||
onBlur={() => {
|
||||
setEditMode(false);
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
onKeyDown={e => {
|
||||
if (e.key !== "Enter") return;
|
||||
setEditMode(false);
|
||||
}}
|
||||
@ -142,33 +101,26 @@ function ColumnContainer({
|
||||
rounded
|
||||
px-1
|
||||
py-2
|
||||
"
|
||||
>
|
||||
<TrashIcon />
|
||||
">
|
||||
<BsFillTrashFill />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Column task container */}
|
||||
<div className="flex flex-grow flex-col gap-4 p-2 overflow-x-hidden overflow-y-auto">
|
||||
<div className="flex flex-grow flex-col gap-2 p-1 overflow-x-hidden overflow-y-auto">
|
||||
<SortableContext items={tasksIds}>
|
||||
{tasks.map((task) => (
|
||||
<TaskCard
|
||||
key={task.id}
|
||||
task={task}
|
||||
deleteTask={deleteTask}
|
||||
updateTask={updateTask}
|
||||
/>
|
||||
{tasks.map(task => (
|
||||
<TaskCard key={task.id} task={task} deleteTask={deleteTask} updateTask={updateTask} />
|
||||
))}
|
||||
</SortableContext>
|
||||
</div>
|
||||
{/* Column footer */}
|
||||
<button
|
||||
className="flex gap-2 items-center border-columnBackgroundColor border-2 rounded-md p-4 border-x-columnBackgroundColor hover:bg-mainBackgroundColor hover:text-rose-500 active:bg-black"
|
||||
className="flex gap-2 items-center rounded-md p-2 my-2 hover:bg-zinc-200 active:bg-zinc-400"
|
||||
onClick={() => {
|
||||
createTask(column.id);
|
||||
}}
|
||||
>
|
||||
<PlusIcon />
|
||||
}}>
|
||||
<AiOutlinePlusCircle />
|
||||
Add task
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -0,0 +1,19 @@
|
||||
import ColumnContainer from "./columnContainer";
|
||||
|
||||
function ColumnContainerCard({ column, deleteColumn, updateColumn, createTask, tasks, deleteTask, updateTask }) {
|
||||
return (
|
||||
<div className="card bg-[#f1f2f4] shadow p-1 my-2 border-2">
|
||||
<ColumnContainer
|
||||
column={column}
|
||||
deleteColumn={deleteColumn}
|
||||
updateColumn={updateColumn}
|
||||
createTask={createTask}
|
||||
tasks={tasks}
|
||||
deleteTask={deleteTask}
|
||||
updateTask={updateTask}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ColumnContainerCard;
|
||||
@ -1,16 +1,10 @@
|
||||
import PlusIcon from "../icons/plusIcon"
|
||||
import { useMemo, useState } from "react";
|
||||
import ColumnContainer from "./columnContainer";
|
||||
import {
|
||||
DndContext,
|
||||
DragOverlay,
|
||||
PointerSensor,
|
||||
useSensor,
|
||||
useSensors,
|
||||
} from "@dnd-kit/core";
|
||||
import ColumnContainerCard from "./columnContainerWrapper";
|
||||
import { DndContext, DragOverlay, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
|
||||
import { SortableContext, arrayMove } from "@dnd-kit/sortable";
|
||||
import { createPortal } from "react-dom";
|
||||
import TaskCard from "./taskCard";
|
||||
import { AiOutlinePlusCircle } from "react-icons/ai";
|
||||
|
||||
const defaultCols = [
|
||||
{
|
||||
@ -98,7 +92,7 @@ const defaultTasks = [
|
||||
|
||||
function KanbanBoard() {
|
||||
const [columns, setColumns] = useState(defaultCols);
|
||||
const columnsId = useMemo(() => columns.map((col) => col.id), [columns]);
|
||||
const columnsId = useMemo(() => columns.map(col => col.id), [columns]);
|
||||
|
||||
const [tasks, setTasks] = useState(defaultTasks);
|
||||
|
||||
@ -123,19 +117,13 @@ function KanbanBoard() {
|
||||
items-center
|
||||
overflow-x-auto
|
||||
overflow-y-hidden
|
||||
"
|
||||
>
|
||||
<DndContext
|
||||
sensors={sensors}
|
||||
onDragStart={onDragStart}
|
||||
onDragEnd={onDragEnd}
|
||||
onDragOver={onDragOver}
|
||||
>
|
||||
<div className="m-auto flex gap-4">
|
||||
">
|
||||
<DndContext sensors={sensors} onDragStart={onDragStart} onDragEnd={onDragEnd} onDragOver={onDragOver}>
|
||||
<div className="ml-2 flex gap-4">
|
||||
<div className="flex gap-4">
|
||||
<SortableContext items={columnsId}>
|
||||
{columns.map((col) => (
|
||||
<ColumnContainer
|
||||
{columns.map(col => (
|
||||
<ColumnContainerCard
|
||||
key={col.id}
|
||||
column={col}
|
||||
deleteColumn={deleteColumn}
|
||||
@ -143,7 +131,7 @@ function KanbanBoard() {
|
||||
createTask={createTask}
|
||||
deleteTask={deleteTask}
|
||||
updateTask={updateTask}
|
||||
tasks={tasks.filter((task) => task.columnId === col.id)}
|
||||
tasks={tasks.filter(task => task.columnId === col.id)}
|
||||
/>
|
||||
))}
|
||||
</SortableContext>
|
||||
@ -154,47 +142,40 @@ function KanbanBoard() {
|
||||
}}
|
||||
className="
|
||||
h-[60px]
|
||||
w-[350px]
|
||||
min-w-[350px]
|
||||
w-[268px]
|
||||
max-w-[268px]
|
||||
cursor-pointer
|
||||
rounded-lg
|
||||
bg-mainBackgroundColor
|
||||
rounded-xl
|
||||
bg-[#f1f2f4]
|
||||
border-2
|
||||
border-columnBackgroundColor
|
||||
p-4
|
||||
ring-rose-500
|
||||
hover:ring-2
|
||||
hover:bg-gray-200
|
||||
flex
|
||||
gap-2
|
||||
"
|
||||
>
|
||||
<PlusIcon />
|
||||
my-2
|
||||
bg-opacity-60
|
||||
">
|
||||
<div className="my-1">
|
||||
<AiOutlinePlusCircle />
|
||||
</div>
|
||||
Add Column
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{createPortal(
|
||||
<DragOverlay>
|
||||
<DragOverlay className="bg-white" dropAnimation={null} zIndex={20}>
|
||||
{activeColumn && (
|
||||
<ColumnContainer
|
||||
<ColumnContainerCard
|
||||
column={activeColumn}
|
||||
deleteColumn={deleteColumn}
|
||||
updateColumn={updateColumn}
|
||||
createTask={createTask}
|
||||
deleteTask={deleteTask}
|
||||
updateTask={updateTask}
|
||||
tasks={tasks.filter(
|
||||
(task) => task.columnId === activeColumn.id
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
{activeTask && (
|
||||
<TaskCard
|
||||
task={activeTask}
|
||||
deleteTask={deleteTask}
|
||||
updateTask={updateTask}
|
||||
tasks={tasks.filter(task => task.columnId === activeColumn.id)}
|
||||
/>
|
||||
)}
|
||||
{activeTask && <TaskCard task={activeTask} deleteTask={deleteTask} updateTask={updateTask} />}
|
||||
</DragOverlay>,
|
||||
document.body
|
||||
)}
|
||||
@ -213,12 +194,12 @@ function KanbanBoard() {
|
||||
}
|
||||
|
||||
function deleteTask(id) {
|
||||
const newTasks = tasks.filter((task) => task.id !== id);
|
||||
const newTasks = tasks.filter(task => task.id !== id);
|
||||
setTasks(newTasks);
|
||||
}
|
||||
|
||||
function updateTask(id, content) {
|
||||
const newTasks = tasks.map((task) => {
|
||||
const newTasks = tasks.map(task => {
|
||||
if (task.id !== id) return task;
|
||||
return { ...task, content };
|
||||
});
|
||||
@ -236,15 +217,15 @@ function KanbanBoard() {
|
||||
}
|
||||
|
||||
function deleteColumn(id) {
|
||||
const filteredColumns = columns.filter((col) => col.id !== id);
|
||||
const filteredColumns = columns.filter(col => col.id !== id);
|
||||
setColumns(filteredColumns);
|
||||
|
||||
const newTasks = tasks.filter((t) => t.columnId !== id);
|
||||
const newTasks = tasks.filter(t => t.columnId !== id);
|
||||
setTasks(newTasks);
|
||||
}
|
||||
|
||||
function updateColumn(id, title) {
|
||||
const newColumns = columns.map((col) => {
|
||||
const newColumns = columns.map(col => {
|
||||
if (col.id !== id) return col;
|
||||
return { ...col, title };
|
||||
});
|
||||
@ -279,10 +260,10 @@ function KanbanBoard() {
|
||||
const isActiveAColumn = active.data.current?.type === "Column";
|
||||
if (!isActiveAColumn) return;
|
||||
|
||||
setColumns((columns) => {
|
||||
const activeColumnIndex = columns.findIndex((col) => col.id === activeId);
|
||||
setColumns(columns => {
|
||||
const activeColumnIndex = columns.findIndex(col => col.id === activeId);
|
||||
|
||||
const overColumnIndex = columns.findIndex((col) => col.id === overId);
|
||||
const overColumnIndex = columns.findIndex(col => col.id === overId);
|
||||
|
||||
return arrayMove(columns, activeColumnIndex, overColumnIndex);
|
||||
});
|
||||
@ -303,9 +284,9 @@ function KanbanBoard() {
|
||||
if (!isActiveATask) return;
|
||||
|
||||
if (isActiveATask && isOverATask) {
|
||||
setTasks((tasks) => {
|
||||
const activeIndex = tasks.findIndex((t) => t.id === activeId);
|
||||
const overIndex = tasks.findIndex((t) => t.id === overId);
|
||||
setTasks(tasks => {
|
||||
const activeIndex = tasks.findIndex(t => t.id === activeId);
|
||||
const overIndex = tasks.findIndex(t => t.id === overId);
|
||||
|
||||
if (tasks[activeIndex].columnId !== tasks[overIndex].columnId) {
|
||||
tasks[activeIndex].columnId = tasks[overIndex].columnId;
|
||||
@ -319,8 +300,8 @@ function KanbanBoard() {
|
||||
const isOverAColumn = over.data.current?.type === "Column";
|
||||
|
||||
if (isActiveATask && isOverAColumn) {
|
||||
setTasks((tasks) => {
|
||||
const activeIndex = tasks.findIndex((t) => t.id === activeId);
|
||||
setTasks(tasks => {
|
||||
const activeIndex = tasks.findIndex(t => t.id === activeId);
|
||||
|
||||
tasks[activeIndex].columnId = overId;
|
||||
return arrayMove(tasks, activeIndex, activeIndex);
|
||||
|
||||
@ -1,26 +1,18 @@
|
||||
import { useState } from "react";
|
||||
import TrashIcon from "../icons/trashIcon";
|
||||
import { BsFillTrashFill } from "react-icons/bs";
|
||||
import { useSortable } from "@dnd-kit/sortable";
|
||||
import { CSS } from "@dnd-kit/utilities";
|
||||
import TaskDetailModal from "./taskDetailModal";
|
||||
|
||||
function TaskCard({ task, deleteTask, updateTask }) {
|
||||
const [mouseIsOver, setMouseIsOver] = useState(false);
|
||||
const [editMode, setEditMode] = useState(true);
|
||||
|
||||
const {
|
||||
setNodeRef,
|
||||
attributes,
|
||||
listeners,
|
||||
transform,
|
||||
transition,
|
||||
isDragging,
|
||||
} = useSortable({
|
||||
const { setNodeRef, attributes, listeners, transform, transition, isDragging } = useSortable({
|
||||
id: task.id,
|
||||
data: {
|
||||
type: "Task",
|
||||
task,
|
||||
},
|
||||
disabled: editMode,
|
||||
});
|
||||
|
||||
const style = {
|
||||
@ -28,11 +20,9 @@ function TaskCard({ task, deleteTask, updateTask }) {
|
||||
transform: CSS.Transform.toString(transform),
|
||||
};
|
||||
|
||||
const toggleEditMode = () => {
|
||||
setEditMode((prev) => !prev);
|
||||
setMouseIsOver(false);
|
||||
};
|
||||
|
||||
{
|
||||
/* If card is dragged */
|
||||
}
|
||||
if (isDragging) {
|
||||
return (
|
||||
<div
|
||||
@ -40,57 +30,31 @@ function TaskCard({ task, deleteTask, updateTask }) {
|
||||
style={style}
|
||||
className="
|
||||
opacity-30
|
||||
bg-mainBackgroundColor p-2.5 h-[100px] min-h-[100px] items-center flex text-left rounded-xl border-2 border-rose-500 cursor-grab relative
|
||||
bg-mainBackgroundColor p-2.5 items-center flex text-left rounded-xl border-2 border-gray-400 cursor-grab relative
|
||||
"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (editMode) {
|
||||
return (
|
||||
<div>
|
||||
<TaskDetailModal />
|
||||
<div
|
||||
ref={setNodeRef}
|
||||
style={style}
|
||||
{...attributes}
|
||||
{...listeners}
|
||||
className="bg-mainBackgroundColor p-2.5 h-[100px] min-h-[100px] items-center flex text-left rounded-xl hover:ring-2 hover:ring-inset hover:ring-rose-500 cursor-grab relative"
|
||||
>
|
||||
<textarea
|
||||
className="
|
||||
h-[90%]
|
||||
w-full resize-none border-none rounded bg-transparent text-white focus:outline-none
|
||||
"
|
||||
value={task.content}
|
||||
autoFocus
|
||||
placeholder="Task content here"
|
||||
onBlur={toggleEditMode}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" && e.shiftKey) {
|
||||
toggleEditMode();
|
||||
}
|
||||
}}
|
||||
onChange={(e) => updateTask(task.id, e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={setNodeRef}
|
||||
onClick={() => document.getElementById("task_detail_modal").showModal()}
|
||||
style={style}
|
||||
{...attributes}
|
||||
{...listeners}
|
||||
onClick={toggleEditMode}
|
||||
className="bg-mainBackgroundColor p-2.5 h-[100px] min-h-[100px] items-center flex text-left rounded-xl hover:ring-2 hover:ring-inset hover:ring-rose-500 cursor-grab relative task"
|
||||
className="justify-center items-center flex text-left rounded-xl cursor-grab relative hover:border-2 hover:border-blue-400 shadow bg-white"
|
||||
onMouseEnter={() => {
|
||||
setMouseIsOver(true);
|
||||
}}
|
||||
onMouseLeave={() => {
|
||||
setMouseIsOver(false);
|
||||
}}
|
||||
>
|
||||
<p className="my-auto h-[90%] w-full overflow-y-auto overflow-x-hidden whitespace-pre-wrap">
|
||||
}}>
|
||||
<p
|
||||
className="p-2.5 my-auto w-full overflow-y-auto overflow-x-hidden whitespace-pre-wrap rounded-xl shadow bg-white"
|
||||
onClick={() => document.getElementById("task_detail_modal").showModal()}>
|
||||
{task.content}
|
||||
</p>
|
||||
|
||||
@ -99,12 +63,12 @@ function TaskCard({ task, deleteTask, updateTask }) {
|
||||
onClick={() => {
|
||||
deleteTask(task.id);
|
||||
}}
|
||||
className="stroke-white absolute right-4 top-1/2 -translate-y-1/2 bg-columnBackgroundColor p-2 rounded opacity-60 hover:opacity-100"
|
||||
>
|
||||
<TrashIcon />
|
||||
className="stroke-white absolute right-0 top-1/2 rounded-full bg-white -translate-y-1/2 bg-columnBackgroundColor p-2 hover:opacity-100 ">
|
||||
<BsFillTrashFill />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
17
frontend/src/components/kanbanBoard/taskDetailModal.jsx
Normal file
17
frontend/src/components/kanbanBoard/taskDetailModal.jsx
Normal file
@ -0,0 +1,17 @@
|
||||
import React from "react";
|
||||
|
||||
function TaskDetailModal() {
|
||||
return (
|
||||
<dialog id="task_detail_modal" className="modal">
|
||||
<div className="modal-box">
|
||||
<form method="dialog">
|
||||
<button className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
|
||||
</form>
|
||||
<h3 className="font-bold text-lg">Hello!</h3>
|
||||
<p className="py-4">Press ESC key or click on ✕ button to close</p>
|
||||
</div>
|
||||
</dialog>
|
||||
);
|
||||
}
|
||||
|
||||
export default TaskDetailModal;
|
||||
@ -1,11 +1,6 @@
|
||||
import { useState } from "react";
|
||||
import {
|
||||
AiOutlineHome,
|
||||
AiOutlineSchedule,
|
||||
AiOutlineUnorderedList,
|
||||
AiOutlinePieChart,
|
||||
AiOutlinePlus,
|
||||
} from "react-icons/ai";
|
||||
import { AiOutlineHome, AiOutlineSchedule, AiOutlineUnorderedList, AiOutlinePieChart } from "react-icons/ai";
|
||||
import { PiStepsDuotone } from "react-icons/pi";
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
|
||||
@ -14,7 +9,7 @@ const menuItems = [
|
||||
{ id: 1, path: "/tasks", icon: <AiOutlineUnorderedList /> },
|
||||
{ id: 2, path: "/calendar", icon: <AiOutlineSchedule /> },
|
||||
{ id: 3, path: "/analytic", icon: <AiOutlinePieChart /> },
|
||||
{ id: 4, path: "/priority", icon: <AiOutlinePlus /> },
|
||||
{ id: 4, path: "/priority", icon: <PiStepsDuotone /> },
|
||||
];
|
||||
|
||||
const IconSideNav = () => {
|
||||
@ -29,7 +24,7 @@ const SideNav = () => {
|
||||
const [selected, setSelected] = useState(0);
|
||||
|
||||
return (
|
||||
<nav className="bg-slate-950 p-4 flex flex-col items-center gap-2 h-screen">
|
||||
<nav className="bg-slate-950 p-4 flex flex-col items-center gap-2 h-full fixed top-0 left-0">
|
||||
{menuItems.map(item => (
|
||||
<NavItem
|
||||
key={item.id}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import * as React from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import IsAuthenticated from "../authentication/IsAuthenticated";
|
||||
import axiosapi from "../../api/AuthenticationApi";
|
||||
import { useAuth } from "../../hooks/authentication/IsAuthenticated";
|
||||
|
||||
const settings = {
|
||||
Profile: '/profile',
|
||||
@ -11,10 +11,11 @@ const settings = {
|
||||
function NavBar() {
|
||||
const Navigate = useNavigate();
|
||||
|
||||
const isAuthenticated = IsAuthenticated();
|
||||
const { isAuthenticated, setIsAuthenticated } = useAuth();
|
||||
|
||||
const logout = () => {
|
||||
axiosapi.apiUserLogout();
|
||||
setIsAuthenticated(false);
|
||||
Navigate("/");
|
||||
};
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@ import ProfileUpdateComponent from "./ProfileUpdateComponent";
|
||||
function ProfileUpdatePage() {
|
||||
return (
|
||||
<div>
|
||||
<div className="stats shadow">
|
||||
<div className="stats shadow mt-3">
|
||||
<div className="stat">
|
||||
<div className="stat-title truncate">Username</div>
|
||||
<div className="stat-value truncate">Sirin</div>
|
||||
|
||||
@ -1,26 +1,26 @@
|
||||
import React, { useState } from 'react';
|
||||
import axiosapi from '../api/axiosapi';
|
||||
import TextField from '@material-ui/core/TextField';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import CssBaseline from '@material-ui/core/CssBaseline';
|
||||
import Container from '@material-ui/core/Container';
|
||||
import Button from '@material-ui/core/Button';
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import React, { useState } from "react";
|
||||
import axiosapi from "../api/axiosapi";
|
||||
import TextField from "@material-ui/core/TextField";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
import CssBaseline from "@material-ui/core/CssBaseline";
|
||||
import Container from "@material-ui/core/Container";
|
||||
import Button from "@material-ui/core/Button";
|
||||
import { makeStyles } from "@material-ui/core/styles";
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
const useStyles = makeStyles(theme => ({
|
||||
// Styles for various elements
|
||||
paper: {
|
||||
marginTop: theme.spacing(8),
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
},
|
||||
avatar: {
|
||||
margin: theme.spacing(1),
|
||||
backgroundColor: theme.palette.secondary.main,
|
||||
},
|
||||
form: {
|
||||
width: '100%',
|
||||
width: "100%",
|
||||
marginTop: theme.spacing(1),
|
||||
},
|
||||
submit: {
|
||||
@ -31,14 +31,14 @@ const useStyles = makeStyles((theme) => ({
|
||||
const Signup = () => {
|
||||
const classes = useStyles();
|
||||
const [formData, setFormData] = useState({
|
||||
email: '',
|
||||
username: '',
|
||||
password: '',
|
||||
email: "",
|
||||
username: "",
|
||||
password: "",
|
||||
});
|
||||
const [error, setError] = useState(null);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
const handleSubmit = async e => {
|
||||
e.preventDefault();
|
||||
setIsSubmitting(true);
|
||||
setError(null);
|
||||
@ -46,14 +46,14 @@ const Signup = () => {
|
||||
try {
|
||||
axiosapi.createUser(formData);
|
||||
} catch (error) {
|
||||
console.error('Error creating user:', error);
|
||||
setError('Registration failed. Please try again.'); // Set an error message
|
||||
console.error("Error creating user:", error);
|
||||
setError("Registration failed. Please try again."); // Set an error message
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleChange = (e) => {
|
||||
const handleChange = e => {
|
||||
const { name, value } = e.target;
|
||||
setFormData({ ...formData, [name]: value });
|
||||
};
|
||||
@ -102,9 +102,8 @@ const Signup = () => {
|
||||
variant="contained"
|
||||
color="primary"
|
||||
className={classes.submit}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
{isSubmitting ? 'Signing up...' : 'Sign Up'}
|
||||
disabled={isSubmitting}>
|
||||
{isSubmitting ? "Signing up..." : "Sign Up"}
|
||||
</Button>
|
||||
</form>
|
||||
{error && <Typography color="error">{error}</Typography>}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import axiosapi from '../api/AuthenticationApi';
|
||||
import { Button } from '@mui/material';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import React, { useState, useEffect } from "react";
|
||||
import axiosapi from "../api/AuthenticationApi";
|
||||
import { Button } from "@mui/material";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
function TestAuth() {
|
||||
let Navigate = useNavigate();
|
||||
@ -10,10 +10,13 @@ function TestAuth() {
|
||||
|
||||
useEffect(() => {
|
||||
// Fetch the "hello" data from the server when the component mounts
|
||||
axiosapi.getGreeting().then(res => {
|
||||
axiosapi
|
||||
.getGreeting()
|
||||
.then(res => {
|
||||
console.log(res.data);
|
||||
setMessage(res.data.user);
|
||||
}).catch(err => {
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
setMessage("");
|
||||
});
|
||||
@ -22,8 +25,8 @@ function TestAuth() {
|
||||
const logout = () => {
|
||||
// Log out the user, clear tokens, and navigate to the "/testAuth" route
|
||||
axiosapi.apiUserLogout();
|
||||
Navigate('/testAuth');
|
||||
}
|
||||
Navigate("/testAuth");
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
@ -31,7 +34,9 @@ function TestAuth() {
|
||||
<div>
|
||||
<h1 class="text-xl font-bold">Login! Hello!</h1>
|
||||
<h2>{message}</h2>
|
||||
<Button variant="contained" onClick={logout}>Logout</Button>
|
||||
<Button variant="contained" onClick={logout}>
|
||||
Logout
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
{message === "" && <h1 class="text-xl font-bold">Need to sign in, No authentication found</h1>}
|
||||
|
||||
39
frontend/src/hooks/authentication/IsAuthenticated.jsx
Normal file
39
frontend/src/hooks/authentication/IsAuthenticated.jsx
Normal file
@ -0,0 +1,39 @@
|
||||
import React, { createContext, useContext, useState, useEffect } from "react";
|
||||
|
||||
const AuthContext = createContext();
|
||||
|
||||
export const AuthProvider = ({ children }) => {
|
||||
const [isAuthenticated, setIsAuthenticated] = useState(() => {
|
||||
const access_token = localStorage.getItem("access_token");
|
||||
return !!access_token;
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const handleTokenChange = () => {
|
||||
const newAccessToken = localStorage.getItem("access_token");
|
||||
setIsAuthenticated(!!newAccessToken);
|
||||
};
|
||||
|
||||
handleTokenChange();
|
||||
|
||||
window.addEventListener("storage", handleTokenChange);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("storage", handleTokenChange);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<AuthContext.Provider value={{ isAuthenticated, setIsAuthenticated }}>
|
||||
{children}
|
||||
</AuthContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export const useAuth = () => {
|
||||
const context = useContext(AuthContext);
|
||||
if (!context) {
|
||||
throw new Error("useAuth must be used within an AuthProvider");
|
||||
}
|
||||
return context;
|
||||
};
|
||||
@ -8,16 +8,14 @@
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
|
||||
"Droid Sans", "Helvetica Neue", sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||
monospace;
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
|
||||
@ -1,15 +1,20 @@
|
||||
import React from "react";
|
||||
import React, { Fragment } from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import App from "./App";
|
||||
import { GoogleOAuthProvider} from '@react-oauth/google';
|
||||
import { BrowserRouter } from 'react-router-dom';
|
||||
import { GoogleOAuthProvider } from "@react-oauth/google";
|
||||
import { BrowserRouter } from "react-router-dom";
|
||||
import { AuthProvider } from "./hooks/authentication/IsAuthenticated";
|
||||
|
||||
const GOOGLE_CLIENT_ID = import.meta.env.VITE_GOOGLE_CLIENT_ID
|
||||
const GOOGLE_CLIENT_ID = import.meta.env.VITE_GOOGLE_CLIENT_ID;
|
||||
|
||||
ReactDOM.createRoot(document.getElementById("root")).render(
|
||||
<GoogleOAuthProvider clientId={GOOGLE_CLIENT_ID}>
|
||||
<BrowserRouter>
|
||||
<Fragment>
|
||||
<AuthProvider>
|
||||
<App />
|
||||
</AuthProvider>
|
||||
</Fragment>
|
||||
</BrowserRouter>
|
||||
</GoogleOAuthProvider>
|
||||
);
|
||||
@ -15,3 +15,4 @@ google-auth-httplib2>=0.1
|
||||
django-storages[s3]>=1.14
|
||||
Pillow>=10.1
|
||||
drf-spectacular>=0.26
|
||||
python-dateutil>=2.8
|
||||
Loading…
Reference in New Issue
Block a user