8 |
21 |
22 | )
23 | }
24 |
25 | export default Login
--------------------------------------------------------------------------------
/src/hooks/useAuth.js:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from 'react'
2 | import { firebase, db } from '../firebase/fbConfig'
3 |
4 | import {createBoardForAnons} from '../utils'
5 |
6 | const useAuth = () =>
7 | {
8 | const [user, setUser] = useState(null)
9 | const [error, setError] = useState(null)
10 |
11 | const loginWithGoogle = async () => {
12 | try {
13 | const provider = new firebase.auth.GoogleAuthProvider()
14 | await firebase.auth().signInWithRedirect(provider)
15 | setError(null)
16 | } catch (err) {
17 | console.log(err)
18 | setError(err.message)
19 | }
20 | }
21 |
22 | const loginAnonymously = () => {
23 | firebase.auth().signInAnonymously()
24 | .then((user) => {
25 | console.log('Welcome Anon')
26 | createBoardForAnons(user.user.uid)
27 | })
28 | }
29 |
30 | const logOut = () => {
31 | firebase.auth().signOut()
32 | }
33 |
34 | useEffect(() => {
35 | return firebase.auth().onAuthStateChanged(user => {
36 | if (user) {
37 | setUser(user)
38 | db.collection('users')
39 | .doc(user.uid)
40 | .set({ id: user.uid, name: user.displayName, email: user.email }, { merge: true })
41 | } else setUser(false)
42 | })
43 | }, [user])
44 |
45 | return [user, loginWithGoogle, logOut, error, loginAnonymously]
46 | }
47 |
48 |
49 | export default useAuth
--------------------------------------------------------------------------------
/src/screens/Home.jsx:
--------------------------------------------------------------------------------
1 |
2 | import {db} from '../firebase/fbConfig'
3 | import {BrowserRouter, Route} from 'react-router-dom'
4 | import useBoards from '../hooks/useBoards'
5 |
6 | import BoardList from '../components/BoardList'
7 |
8 | import Kanban from './Kanban'
9 |
10 | import {v4 as uuidv4} from 'uuid';
11 |
12 |
13 | const Home = ({logOut, userId, loginWithGoogle, name, isAnon}) =>
14 | {
15 |
16 | const boards = useBoards(userId)
17 |
18 | const addNewBoard = (e) => {
19 | e.preventDefault()
20 | const uid = uuidv4()
21 |
22 | db.collection(`users/${userId}/boards`)
23 | .doc(uid)
24 | .set({name: e.target.elements.boardName.value})
25 |
26 | const columnOrder = {id: 'columnOrder', order: []}
27 |
28 | db.collection(`users/${userId}/boards/${uid}/columns`)
29 | .doc('columnOrder')
30 | .set(columnOrder)
31 |
32 | e.target.elements.boardName.value = ''
33 |
34 | }
35 |
36 | const deleteBoard = (id) => {
37 | db.collection(`users/${userId}/boards`)
38 | .doc(id)
39 | .delete()
40 | }
41 |
42 | return boards !== null ? (
43 |
9 |
17 | Stay on top of the game called life with Agilix.
10 |Agilix is an opinionated, simplified Kanban planner for personal use that helps you organise your life and accomplish more.
11 |
12 |
13 |
14 |
15 | * Your data will be deleted once you log out.
16 |
18 | .default})
19 |
20 |
19 | 
29 |
30 | ### After the user logs in
31 |
32 | 
33 |
34 | ### The Kanban Board
35 |
36 | 
37 |
38 | ### Task Details
39 |
40 | 
41 |
42 |
43 | ## Todo
44 |
45 | - Implement WIP limitation.
46 | - Dark Mode.
47 |
48 |
49 | ## Author
50 | [Prince Kumar Singh](http://twitter.com/drkPrns)
51 |
52 |
--------------------------------------------------------------------------------
/src/hooks/useKanbanData.js:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from 'react'
2 | import { db } from '../firebase/fbConfig'
3 |
4 | const useKanban = (userId, boardId) => {
5 | const [tasks, setTasks] = useState(null)
6 | const [columns, setColumns] = useState(null)
7 | const [final, setFinal] = useState(null)
8 | const [boardName, setBoardName] = useState('')
9 |
10 |
11 | useEffect(() => {
12 | return db.collection(`users/${userId}/boards/${boardId}/tasks`)
13 | .onSnapshot(snap => {
14 | const documents = []
15 | snap.forEach(d => {
16 | documents.push({ id: d.id, ...d.data() })
17 | })
18 | setTasks(documents)
19 | })
20 | }, [userId, boardId])
21 |
22 |
23 | useEffect(() => {
24 | return db.collection(`users/${userId}/boards`)
25 | .doc(boardId)
26 | .get()
27 | .then(d => setBoardName(d.data().name))
28 | }, [userId, boardId])
29 |
30 |
31 | useEffect(() => {
32 | return db.collection(`users/${userId}/boards/${boardId}/columns`)
33 | .onSnapshot(snap => {
34 | const documents = []
35 | snap.forEach(d => {
36 | documents.push({ id: d.id, ...d.data() })
37 | })
38 | setColumns(documents)
39 | })
40 | }, [userId, boardId])
41 |
42 |
43 | useEffect(() => {
44 | if (tasks && columns) {
45 | const finalObject = {}
46 |
47 | const co = columns.find(c => c.id === 'columnOrder')
48 | const cols = columns.filter(c => c.id !== 'columnOrder')
49 |
50 | finalObject.columnOrder = co?.order
51 | finalObject.columns = {}
52 | finalObject.tasks = {}
53 |
54 | tasks.forEach(t => finalObject.tasks[t.id] = t)
55 | cols.forEach(c => finalObject.columns[c.id] = c)
56 |
57 | setFinal(finalObject)
58 | }
59 | }, [tasks, columns])
60 |
61 |
62 | return { initialData: final, setInitialData: setFinal, boardName }
63 |
64 | }
65 |
66 | export default useKanban
--------------------------------------------------------------------------------
/src/components/Task.jsx:
--------------------------------------------------------------------------------
1 |
2 | import { Draggable } from 'react-beautiful-dnd'
3 | import ChecklistProgress from './ChecklistProgress'
4 | import { extractPriority } from '../utils'
5 |
6 | import Modal from './Modal'
7 | import TaskDetails from '../screens/TaskDetails'
8 | import {Description} from './Icons'
9 | import {useState} from 'react'
10 |
11 |
12 | const Task = ({ allData, id, index, boardId, userId, columnDetails, filterBy }) => {
13 |
14 |
15 | const [modal, setModal] = useState(false)
16 |
17 | const theTask = allData.tasks[id]
18 |
19 | let matched = ''
20 |
21 | if (filterBy === null) {
22 | matched = 'all'
23 | } else {
24 | matched = theTask.priority === filterBy
25 | }
26 |
27 | return (
28 |
29 |
30 |
31 | setModal(false)} boardId={boardId} userId={userId} columnDetails={columnDetails} />
32 |
33 |
34 |
35 | {(provided, snapshot) =>
36 |
48 |
49 |
50 | )
51 | }
52 |
53 |
54 |
55 | export default Task
--------------------------------------------------------------------------------
/src/screens/AddTask.jsx:
--------------------------------------------------------------------------------
1 |
2 | import {useState} from 'react'
3 | import {db, firebase} from '../firebase/fbConfig'
4 | import {v4 as uuidv4} from 'uuid';
5 |
6 | const AddTask = ({boardId, userId, close, allCols}) =>
7 | {
8 | const [description, setDescription] = useState(null)
9 |
10 | const addTask = (e) => {
11 | e.preventDefault()
12 |
13 | const uid = uuidv4()
14 | const title = e.target.elements.newTaskTitle.value
15 | const priority = e.target.elements.priority.value
16 | const column = e.target.elements.column.value
17 |
18 | db.collection(`users/${userId}/boards/${boardId}/tasks`)
19 | .doc(uid)
20 | .set({title, priority , description, todos: [], dateAdded: firebase.firestore.FieldValue.serverTimestamp() })
21 |
22 | db.collection(`users/${userId}/boards/${boardId}/columns`)
23 | .doc(column)
24 | .update({taskIds: firebase.firestore.FieldValue.arrayUnion(uid)})
25 |
26 | close()
27 | }
28 |
29 |
30 | return (
31 | setModal(true)} {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef} className={`shadow-lg transition-shadow duration-300 hover:shadow-xl mb-4 rounded px-1.5 py-2.5 ${snapshot.isDragging ? 'bg-gradient-to-r from-red-100 to-blue-100 text-gray-900' : 'bg-white text-gray-800'}`}>
37 |
46 | }
47 |
38 |
45 | {theTask.title}
39 |
40 | {extractPriority(theTask.priority)}
41 | {theTask.todos.length >= 1 &&
44 |
32 |