Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

completed tasks #14

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

completed tasks #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 44 additions & 7 deletions components/AddTask.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,54 @@
export default function AddTask() {
import { useState } from 'react'
import axios from '../utils/axios'
import { useAuth } from '../context/auth'
import notif from '../components/Notif';

export default function AddTask({tasks,setTasks}) {

const { token } = useAuth()
const [ text, setText] = useState('')
const addTask = () => {
/**
* @todo Complete this function.
* @todo 1. Send the request to add the task to the backend server.
* @todo 2. Add the task in the dom.
*/
}

if(!text){
notif('Error','Field is empty','danger')
return
}

const dataForApiRequest = {
title: text
}

axios.post('todo/create/',
dataForApiRequest,{
headers: {
Authorization: 'Token ' + token,
},
})
.then((response) => {
notif('Success','Task added successfully','success')
axios.get('todo/', {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of again writing logic for getting tasks, you can make a function and use it wherever required

headers: {
Authorization: 'Token '+ token,
},
}).then(function({data,status}){
const newdata= data[data.length-1]
setTasks([...tasks,newdata])
setText('')
})
})
.catch((error) => {
notif('Error','Task could not be added','danger')
})
}

return (
<div className='flex items-center max-w-sm mt-24'>
<input
type='text'
className='todo-add-task-input px-4 py-2 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm border border-blueGray-300 outline-none focus:outline-none focus:ring w-full'
placeholder='Enter Task'
value = {text}
onChange = { (e) => setText(e.target.value)}
/>
<button
type='button'
Expand Down
63 changes: 55 additions & 8 deletions components/LoginForm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,54 @@
export default function RegisterForm() {
const login = () => {
/***
* @todo Complete this function.
* @todo 1. Write code for form validation.
* @todo 2. Fetch the auth token from backend and login the user.
* @todo 3. Set the token in the context (See context/auth.js)
*/
import React, { useEffect, useState } from 'react'
import axios from '../utils/axios'
import { useAuth } from '../context/auth'
import { useRouter } from 'next/router'
import notif from '../components/Notif';
import noAuthReq from '../middlewares/no_auth_required'

export default function LoginForm() {
const { setToken } = useAuth()
const router = useRouter()

const [password, setPassword] = useState('')
const [username, setUsername] = useState('')

noAuthReq()

const loginFieldsAreValid = (
username,
password
) => {
if (username === '' || password === '') {
notif('Error','Please fill all the fields correctly','danger')
return false
}
return true
}

const login = (e) => {

if (
loginFieldsAreValid(username, password)
) {
notif('Info','Please wait...','info')

const dataForApiRequest = {
username: username,
password: password,
}

axios.post(
'auth/login/',
dataForApiRequest,
)
.then(function ({ data, status }) {
setToken(data.token)
router.push('/')
})
.catch(function (err) {
notif('Error','Invalid Username or password','danger')
})
}
}

return (
Expand All @@ -18,6 +61,8 @@ export default function RegisterForm() {
className='block border border-grey-light w-full p-3 rounded mb-4'
name='inputUsername'
id='inputUsername'
value={username}
onChange={(e) => setUsername(e.target.value)}
placeholder='Username'
/>

Expand All @@ -26,6 +71,8 @@ export default function RegisterForm() {
className='block border border-grey-light w-full p-3 rounded mb-4'
name='inputPassword'
id='inputPassword'
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder='Password'
/>

Expand Down
11 changes: 5 additions & 6 deletions components/Nav.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,9 @@
/* eslint-disable @next/next/no-img-element */
import Link from 'next/link'
import { useAuth } from '../context/auth'
/**
*
* @todo Condtionally render login/register and Profile name in NavBar
*/

export default function Nav() {
const { logout, profileName, avatarImage } = useAuth()
const {token, logout, profileName, avatarImage } = useAuth()

return (
<nav className='bg-blue-600'>
Expand All @@ -22,6 +18,7 @@ export default function Nav() {
</Link>
</li>
</ul>
{ !token?
<ul className='flex'>
<li className='text-white mr-2'>
<Link href='/login'>Login</Link>
Expand All @@ -30,6 +27,7 @@ export default function Nav() {
<Link href='/register'>Register</Link>
</li>
</ul>
:
<div className='inline-block relative w-28'>
<div className='group inline-block relative'>
<button className='bg-gray-300 text-gray-700 font-semibold py-2 px-4 rounded inline-flex items-center'>
Expand All @@ -55,7 +53,8 @@ export default function Nav() {
</li>
</ul>
</div>
</div>
</div>
}
</ul>
</nav>
)
Expand Down
18 changes: 18 additions & 0 deletions components/Notif.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { store } from 'react-notifications-component';
import 'animate.css/animate.min.css';

export default function notif(ititle,imessage,itype){
store.addNotification({
title: ititle,
message: imessage,
type: itype,
insert: "top",
container: "top-center",
animationIn: ["animate__animated", "animate__zoomInDown"],
animationOut: ["animate__animated", "animate__zoomOutUp"],
dismiss: {
duration: 3000,
onScreen: true
}
});
}
14 changes: 8 additions & 6 deletions components/RegisterForm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,15 @@ import React, { useState } from 'react'
import axios from '../utils/axios'
import { useAuth } from '../context/auth'
import { useRouter } from 'next/router'
import notif from '../components/Notif';
import noAuthReq from '../middlewares/no_auth_required'

export default function Register() {
const { setToken } = useAuth()
const router = useRouter()

noAuthReq()

const [firstName, setFirstName] = useState('')
const [lastName, setLastName] = useState('')
const [email, setEmail] = useState('')
Expand All @@ -27,11 +31,11 @@ export default function Register() {
username === '' ||
password === ''
) {
console.log('Please fill all the fields correctly.')
notif('Error','Please fill all the fields correctly','danger')
return false
}
if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)) {
console.log('Please enter a valid email address.')
notif('Error','Please enter a valid email address','danger')
return false
}
return true
Expand All @@ -43,7 +47,7 @@ export default function Register() {
if (
registerFieldsAreValid(firstName, lastName, email, username, password)
) {
console.log('Please wait...')
notif('Info','Please wait...','info')

const dataForApiRequest = {
name: firstName + ' ' + lastName,
Expand All @@ -61,9 +65,7 @@ export default function Register() {
router.push('/')
})
.catch(function (err) {
console.log(
'An account using same email or username is already created'
)
notif('Error','An account using same email or username is already created','danger')
})
}
}
Expand Down
94 changes: 68 additions & 26 deletions components/TodoListItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,55 +1,95 @@
/* eslint-disable @next/next/no-img-element */
import axios from '../utils/axios'
import { useAuth } from '../context/auth'
import { useState } from 'react'
import notif from '../components/Notif';

export default function TodoListItem( { tasks, setTasks }) {
const {token } = useAuth()
const [text, setText] = useState('')
const [curId, setCurId] = useState('')
const [toshow, setToshow] = useState(true)

export default function TodoListItem() {
const editTask = (id) => {
/**
* @todo Complete this function.
* @todo 1. Update the dom accordingly
*/
setCurId(id)
setToshow(false)
}

const deleteTask = (id) => {
/**
* @todo Complete this function.
* @todo 1. Send the request to delete the task to the backend server.
* @todo 2. Remove the task from the dom.
*/
axios.delete('todo/'+id+'/',{
headers: {Authorization: 'Token '+ token}
})
.then(function({data,status}){
notif('Success','Task deleted successfully','success')
})
.catch(function(err) {
notif('Error','Task could not be deleted','danger')
})

setTasks(tasks.filter((task) => task.id!==id))
}

const updateTask = (id) => {
/**
* @todo Complete this function.
* @todo 1. Send the request to update the task to the backend server.
* @todo 2. Update the task in the dom.
*/
}
if(!text){
notif('Error','Field is empty','danger')
return
}

const dataForApiRequest = {
title: text
}

axios.patch('todo/'+id+'/', dataForApiRequest, {
headers: {Authorization: 'Token '+ token}
})
.then(function({data,status}){
notif('Success','Task updated successfully','success')
setTasks(tasks.map((task) => task.id===id ? {...task, title: text} : task))
})
.catch(function(err) {
notif('Error','Task could not be updated','danger')
})
setToshow(true)
setCurId('')
setText('')
}

return (
<>
<li className='border flex border-gray-500 rounded px-2 py-2 justify-between items-center mb-2'>
{ tasks.map((task) => (
<li key= {task.id} className='border flex border-gray-500 rounded px-2 py-2 justify-between items-center mb-2'>
{ curId===task.id &&
<input
id='input-button-1'
id={'input-button-'+task.id}
type='text'
className='hideme appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring todo-edit-task-input'
className='appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring todo-edit-task-input'
placeholder='Edit The Task'
value= {text}
onChange = { (e) => { setText(e.target.value) }}
/>
<div id='done-button-1' className='hideme'>
}
{ curId===task.id &&
<div id={'done-button-'+task.id} className=''>
<button
className='bg-transparent hover:bg-gray-500 text-gray-700 text-sm hover:text-white py-2 px-3 border border-gray-500 hover:border-transparent rounded todo-update-task'
type='button'
onClick={updateTask(1)}
onClick={() => updateTask(task.id)}
>
Done
</button>
</div>
<div id='task-1' className='todo-task text-gray-600'>
Sample Task 1
}
{ (toshow || curId!==task.id) &&
<div id={'task-1'+task.id} className='todo-task text-gray-600'>
{task.title}
</div>
<span id='task-actions-1' className=''>
}
{ (toshow || curId!==task.id) &&
<span id={'task-actions-'+task.id} className=''>
<button
style={{ marginRight: '5px' }}
type='button'
onClick={editTask(1)}
onClick={() => editTask(task.id)}
className='bg-transparent hover:bg-yellow-500 hover:text-white border border-yellow-500 hover:border-transparent rounded px-2 py-2'
>
<img
Expand All @@ -62,7 +102,7 @@ export default function TodoListItem() {
<button
type='button'
className='bg-transparent hover:bg-red-500 hover:text-white border border-red-500 hover:border-transparent rounded px-2 py-2'
onClick={deleteTask(1)}
onClick={() => deleteTask(task.id)}
>
<img
src='https://res.cloudinary.com/nishantwrp/image/upload/v1587486661/CSOC/delete.svg'
Expand All @@ -72,7 +112,9 @@ export default function TodoListItem() {
/>
</button>
</span>
}
</li>
))}
</>
)
}
Loading