Skip to content

Commit

Permalink
User Boards
Browse files Browse the repository at this point in the history
  • Loading branch information
rakib committed Feb 7, 2025
1 parent 2471e3f commit 55ace02
Show file tree
Hide file tree
Showing 19 changed files with 545 additions and 246 deletions.
6 changes: 4 additions & 2 deletions components/auth-state.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,12 @@ import { useContext } from 'react';
import { StateContext } from '../pages/_app';

export default function AuthState({ classes }: any) {
let { authState } = useContext<any>(StateContext);
let { user, authState } = useContext<any>(StateContext);
return (
<span className={`${classes} textOverflow extended`} style={{minWidth: `fit-content`}}>
{authState}
{user != null ? (
`Welcome, ${user?.name}`
) : authState}
</span>
)
}
15 changes: 13 additions & 2 deletions components/boards/board.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export default function Board(props) {
let [board, setBoard] = useState(props.board);
let [showSearch, setShowSearch] = useState(false);
let [showConfirm, setShowConfirm] = useState(false);
let { boards, setBoards, setLoading, setSystemStatus, completeFiltered, setCompleteFiltered, setPage, IDs, setIDs } = useContext<any>(StateContext);
let { user, boards, setBoards, setLoading, setSystemStatus, completeFiltered, setCompleteFiltered, setPage, IDs, setIDs } = useContext<any>(StateContext);

const filterSubtasks = (e?: any) => {
if (board.hideAllTasks) {
Expand Down Expand Up @@ -118,8 +118,19 @@ export default function Board(props) {
const newColumn = {
itemIds: [],
id: columnID,
boardID: board?.id,
itemType: ItemTypes.Item,
title: formFields[0].value,
created: formatDate(new Date()),
updated: formatDate(new Date()),
...(user != null && {
creator: {
id: user?.id,
uid: user?.uid,
name: user?.name,
email: user?.email,
}
}),
};

setBoard({
Expand All @@ -132,7 +143,7 @@ export default function Board(props) {
}
});

setIDs([...IDs, columnID])
setIDs([...IDs, columnID]);

e.target.reset();
setTimeout(() => {
Expand Down
76 changes: 43 additions & 33 deletions components/boards/boards.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import Board from './board';
import { toast } from 'react-toastify';
import { isValid } from '../../shared/constants';
import { updateUserFields } from '../../firebase';
import { useState, useEffect, useContext } from 'react';
import { Droppable, Draggable, DragDropContext } from 'react-beautiful-dnd';
import { capWords, dev, formatDate, generateUniqueID, replaceAll, StateContext } from '../../pages/_app';

export enum ItemTypes {
Item = `Item`,
Image = `Image`,
// Task = `Task`,
// Video = `Video`,
}

export enum BoardTypes {
Expand All @@ -22,7 +22,7 @@ export enum BoardTypes {

export default function Boards(props) {
let [updates, setUpdates] = useState(0);
const { rte, boards, setBoards, router, setLoading, setSystemStatus, IDs, setIDs, setRte } = useContext<any>(StateContext);
const { user, rte, boards, setBoards, router, setLoading, setSystemStatus, IDs, setIDs, setRte } = useContext<any>(StateContext);

const addNewBoard = (e) => {
e.preventDefault();
Expand All @@ -39,44 +39,43 @@ export default function Boards(props) {
let newColumn2ID = `column_2_${generateUniqueID(IDs)}`;

let newBoard = {
// rows: [].concat(...getBoardColumnsFromType(boardType).map(col => col.rows)),
// type: (boardType == BoardTypes.SelectBoardType ? BoardTypes.KanbanBoard : boardType) ?? BoardTypes.KanbanBoard,
created: formatDate(new Date()),
items: [],
titleWidth,
expanded: true,
id: newBoardID,
name: boardName,
...(user != null && {
creator: {
id: user?.id,
uid: user?.uid,
name: user?.name,
email: user?.email,
}
}),
created: formatDate(new Date()),
updated: formatDate(new Date()),
columnOrder: [
newColumn1ID,
newColumn2ID,
],
columns: {
[newColumn1ID]: {
itemIds: [],
title: `Active`,
id: newColumn1ID,
title: `active`,
itemIds: []
},
[newColumn2ID]: {
itemIds: [],
title: `Complete`,
id: newColumn2ID,
title: `complete`,
itemIds: []
}
},
id: newBoardID,
titleWidth,
items: [],
}

// if (dev()) {
// console.log(`addNewBoard`, newBoard);
// console.log(`boards`, boards);
// }

setBoards([newBoard, ...boards]);
setIDs([...IDs, newBoard.id, newColumn1ID, newColumn2ID]);

e.target.reset();
// window.requestAnimationFrame(() => {
// return boardsSection.scrollTop = boardsSection.scrollHeight;
// });
setTimeout(() => {
setLoading(false);
setSystemStatus(`Created Board ${newBoard.name}.`);
Expand All @@ -87,11 +86,6 @@ export default function Boards(props) {
dev() && console.log(`Boards Drag`, dragEndEvent);
const { destination, source, draggableId, type } = dragEndEvent;

// if (dev()) {
// console.log(`dragEndEvent`, dragEndEvent);
// console.log(`dragEndEvent Inner`, {source, destination, draggableId, type});
// }

if (!destination) {
return;
}
Expand All @@ -110,14 +104,30 @@ export default function Boards(props) {
setRte(replaceAll(router.route, `/`, `_`));

if (updates > 0) {
localStorage.setItem(`boards`, JSON.stringify(boards));
dev() && console.log(`Updated Boards`, boards);
let updatedBoards = boards;
let boardsHaveCreator = boards.every(brd => isValid(brd?.creator));

if (user != null) {
if (!boardsHaveCreator) {
updatedBoards = boards.map(brd => ({
...brd,
creator: {
id: user?.id,
uid: user?.uid,
name: user?.name,
email: user?.email,
},
}))
}
updateUserFields(user?.id, { boards: updatedBoards });
localStorage.setItem(`user`, JSON.stringify({ ...user, boards: updatedBoards }));
} else {
localStorage.setItem(`local_boards`, JSON.stringify(updatedBoards));
}

localStorage.setItem(`boards`, JSON.stringify(updatedBoards));
dev() && console.log(`Updated Boards`, updatedBoards);
}

// if (dev()) {
// console.log(`Updates`, updates);
// console.log(`Boards`, boards);
// }

setUpdates(updates + 1);
return () => {
Expand Down
35 changes: 13 additions & 22 deletions components/boards/column.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export default function Column(props) {
let { board, column, hideAllTasks } = props;
let [showConfirm, setShowConfirm] = useState(false);
let [itemTypeMenuOpen, setItemTypeMenuOpen] = useState(false);
let { boards, setBoards, setLoading, setSystemStatus, completeFiltered, IDs, setIDs, selected, menuPosition } = useContext<any>(StateContext);
let { user, boards, setBoards, setLoading, setSystemStatus, completeFiltered, IDs, setIDs, selected, menuPosition } = useContext<any>(StateContext);

const itemActiveFilters = (itm) => {
if (completeFiltered) {
Expand Down Expand Up @@ -76,27 +76,6 @@ export default function Column(props) {
localStorage.setItem(`boards`, JSON.stringify(boards));
}

// const adjustColumnsLayout = (column, columnsNum: number) => {
// if (columnsNum >= 0 && columnsNum <= 3 && column.layoutCols != columnsNum) {
// column.layoutCols = columnsNum;
// } else {
// column.layoutCols = 1;
// }

// props.setBoard(prevBoard => {
// return {
// ...prevBoard,
// updated: formatDate(new Date()),
// columns: {
// ...prevBoard?.columns,
// [column?.id]: column,
// },
// }
// });

// localStorage.setItem(`boards`, JSON.stringify(boards));
// }

const deleteColumn = (columnId, index, initialConfirm = true) => {
if (showConfirm == true) {
if (!initialConfirm) {
Expand Down Expand Up @@ -170,9 +149,20 @@ export default function Column(props) {
subtasks: [],
complete: false,
description: ``,
boardID: props?.board?.id,
listID: props?.column?.id,
type: props?.column?.itemType,
created: formatDate(new Date()),
updated: formatDate(new Date()),
content: capitalizeAllWords(content),
...(user != null && {
creator: {
id: user?.id,
uid: user?.uid,
name: user?.name,
email: user?.email,
}
}),
}

props.setBoard({
Expand Down Expand Up @@ -303,6 +293,7 @@ export default function Column(props) {
{!hideAllTasks && item.subtasks && (
<Tasks
item={item}
board={board}
column={props.column}
showForm={!board?.tasksFiltered}
/>
Expand Down
16 changes: 2 additions & 14 deletions components/boards/item.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,24 +26,12 @@ export const getSubTaskPercentage = (subtasks: any[], item, isActive = null) =>
return subtasksProgress;
}

export const getTypeIcon = (type, plain?) => {
export const getTypeIcon = (type) => {
switch (type) {
default:
return `+`;
// case ItemTypes.Task:
// if (plain) {
// return `✔`
// } else {
// return (
// <span style={{fontSize: 20, textAlign: `center`}}>
// ✔
// </span>
// );
// }
case ItemTypes.Image:
return <i style={{display: `contents`}} className={`fas fa-image`} />;
// case ItemTypes.Video:
// return <i style={{display: `contents`}} className={`fab fa-youtube`} />;
}
}

Expand Down Expand Up @@ -225,7 +213,7 @@ export default function Item({ item, count, column, itemIndex, board, setBoard }
<i className={`itemIndex ${item.complete ? `completedIndex` : `activeIndex`}`}>
{(item?.type == ItemTypes.Item) && (
<span className={`itemIconType ${item?.type}`}>
{getTypeIcon(item?.type, true)}
{getTypeIcon(item?.type)}
</span>
)} {itemIndex + 1}
</i>
Expand Down
28 changes: 20 additions & 8 deletions components/boards/tasks.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,8 +96,8 @@ const SortableSubtaskItem = ({ item, subtask, isLast, column, index, changeLabel
}

export default function Tasks(props) {
let { item, column, showForm = true } = props;
let { boards, setLoading, setSystemStatus } = useContext<any>(StateContext);
let { item, column, board, showForm = true } = props;
let { user, boards, setLoading, setSystemStatus } = useContext<any>(StateContext);

let [deletedTaskIDs, setDeletedTaskIDs] = useState<string[]>([]);
let [subtasks, setSubtasks] = useState(item?.subtasks?.length ? item.subtasks : []);
Expand Down Expand Up @@ -127,15 +127,15 @@ export default function Tasks(props) {
// Toggle complete
const completeSubtask = (e, subtask) => {
setLoading(true);
setSystemStatus(`Marking Task as ${subtask?.complete ? 'Reopened' : 'Complete'}.`);
setSystemStatus(`Marking Task as ${subtask?.complete ? `Reopened` : `Complete`}.`);

subtask.complete = !subtask?.complete;
subtask.updated = formatDate(new Date());
item.updated = formatDate(new Date());

localStorage.setItem('boards', JSON.stringify(boards));
localStorage.setItem(`boards`, JSON.stringify(boards));
setTimeout(() => {
setSystemStatus(`Marked Task as ${subtask?.complete ? 'Complete' : 'Reopened'}.`);
setSystemStatus(`Marked Task as ${subtask?.complete ? `Complete` : `Reopened`}.`);
setLoading(false);
}, 1000);
};
Expand All @@ -144,7 +144,7 @@ export default function Tasks(props) {
const addSubtask = (e) => {
e.preventDefault();
setLoading(true);
setSystemStatus('Creating Task.');
setSystemStatus(`Creating Task.`);

const formFields = e.target.children;
const newTaskText = formFields[0].value.trim();
Expand All @@ -158,8 +158,20 @@ export default function Tasks(props) {
const newSubtask = {
id: subtaskID,
complete: false,
task: capitalizeAllWords(newTaskText),
itemID: item?.id,
listID: column?.id,
boardID: board?.id,
created: formatDate(new Date()),
updated: formatDate(new Date()),
task: capitalizeAllWords(newTaskText),
...(user != null && {
creator: {
id: user?.id,
uid: user?.uid,
name: user?.name,
email: user?.email,
}
}),
};

const updatedTasks = [
Expand Down Expand Up @@ -198,7 +210,7 @@ export default function Tasks(props) {
// Delete subtask
const deleteSubtask = (e, subtask) => {
setLoading(true);
setSystemStatus('Deleting Task.');
setSystemStatus(`Deleting Task.`);

const subtaskIDToDelete = subtask.id;
setDeletedTaskIDs((prev) => [...prev, subtaskIDToDelete]);
Expand Down
Loading

0 comments on commit 55ace02

Please sign in to comment.