Implemented blur hash for slow connection, GUEST and USER mode for fu…

…ture usage, default UI and fixed bugs
BryanWZC · Nov 13, 2020 · 98eb855 · 98eb855
1 parent 320657b
commit 98eb855
Show file tree

Hide file tree

Showing 16 changed files with 11,896 additions and 70 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,21 @@
+# Yello: A Kaban-style task tracking board
+
+[![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://yello-guest.herokuapp.com/)
+&nbsp;
+
+Yello is a Kaban-style task tracking board. It has the following functionalities:
+- Drag and drop of card and list items.
+- Content updates within list items.
+- Background selection with Unsplash API.
+
+## Versions
+- **1.0.0**
+  - Base-board, guest-board('GUEST' mode) and Unsplash background features implemented.
+  - DB functionality included with 'USER' mode.
+
+
+## Future implementations
+- [ ] User authentication page.
+- [ ] Add boards feature and page.
+- [ ] Enable 'USER' mode for the user to save board data to database while keeping 'GUEST' mode for those whom do not want to sign-up.
+- [ ] Markdown support for content within lists.
diff --git a/assets/css/index.css b/assets/css/index.css
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Maven+Pro&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Maven+Pro&family=Open+Sans&display=swap');
 
 * {
     margin: 0;

diff --git a/dist/bundle-front.js b/dist/bundle-front.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
     "mongodb": "^3.6.2",
     "mongoose": "^5.10.11",
     "morgan": "^1.10.0",
+    "nanoid": "^3.1.16",
     "react": "^17.0.1",
     "react-beautiful-dnd": "^13.0.0",
     "react-dom": "^16.13.1",

diff --git a/src/base-board/components/board.js b/src/base-board/components/board.js
@@ -15,7 +15,7 @@ import { closeCardInput } from '../slices/board-slice';
 
 // Internal modules - base-background feature
 import * as select from '../selectors/selectors';
-import { Heading } from './Heading';
+import { Heading } from './heading';
 import { Cards, AddNewCard } from './card';
 import { ListItemExpand } from './list-item-expand';
 import { CardActions } from './card-actions';

diff --git a/src/base-board/components/card-actions.js b/src/base-board/components/card-actions.js
@@ -32,6 +32,7 @@ const Title = styled.p`
     padding-bottom: 4px;
     border-bottom: 1px solid rgba(9,30,66,.13);
     pointer-events: none;
+    font-weight: bold;
 `;
 
 const Delete = styled.button`
@@ -52,10 +53,7 @@ const CardActions = (props) => {
     const offsets = useSelector(select.CardMenuOffsets);
 
     return(
-        <Container 
-            id='card-action-menu'
-            offsets={offsets}
-        >
+        <Container id='card-action-menu' offsets={offsets}>
             <Title>Card actions</Title>
             <Delete id='card-action-menu' onClick={() => dispatch(handleCardDelete())}>
                 Delete

diff --git a/src/base-board/components/card.js b/src/base-board/components/card.js
@@ -118,6 +118,8 @@ const Input = styled.input`
     outline: none;
     background-color: ${ props => props['data-expand'] ? '#ffffff': 'rgba(0,0,0,.04)' };
     color: #42526e ;
+    font-family: 'Open Sans', sans-serif;
+    font-size: 13px;
 `;
 
 const Submit = styled.input`
@@ -127,7 +129,8 @@ const Submit = styled.input`
     border: none;
     padding: 4px;
     outline: none;
-    background-color: #5aac44;
+    background-color: #16C172;
+    color: #ffffff;
     cursor: pointer;
 `;
 

diff --git a/src/base-board/components/list-item-expand.js b/src/base-board/components/list-item-expand.js
@@ -46,12 +46,14 @@ const ContentContainer = styled.div`
     width: 100%;
     min-height: ${props => props['data-expand'] ? '104px' : '62px'};
     margin-bottom: ${props => props['data-expand'] ? '8px' : '41px'};;
-    border: ${props => props['data-expand'] ? '1px solid red' : 'none'};
+    border: none;
     background-color: ${props => props['data-expand'] ? '#ffffff': 'rgba(9,30,66,.04)'};
     padding: 4px;
     width: 100%;
     cursor: text;
     overflow-wrap: break-word;
+    font-family: 'Open Sans', sans-serif;
+    font-size: 13px;
 
     & > pre:empty::before {
         content: 'Add more details here...';
@@ -64,9 +66,11 @@ const Submit = styled.input`
     height: 25px;
     border: none;
     border-radius: 5px;
-    padding: 4px;
-    background-color: #5aac44;
+    padding: 4px 8px;
+    color: #fff;
+    background-color: #16C172;
     cursor: pointer;
+    outline: none;
 `;
 
 const Delete = styled.input`
@@ -77,8 +81,10 @@ const Delete = styled.input`
     border: none;
     border-radius: 5px;
     padding: 4px;
-    background-color: red;
+    color: #fff;
+    background-color: #DD403A;
     cursor: pointer;
+    outline: none;
 `;
 
 const CloseButton = styled.button`

diff --git a/src/base-board/components/list.js b/src/base-board/components/list.js
@@ -13,7 +13,6 @@ import { handleItemClick } from '../slices/item-menu-slice';
  * Styled components for List
  */
 const ListItemContainer = styled.div`
-    display: flex;
     width: 100%;
     height: auto;
     border-radius: 5px;
@@ -22,13 +21,17 @@ const ListItemContainer = styled.div`
     background: #ffffff;
 `;
 
-const ItemTitle = styled.h4`
+const ItemTitle = styled.p`
+    display: flex;
+    align-items: center;
     width: 100%;
     overflow-wrap: break-word;
     padding: 4px;
     border-radius: 5px;
     min-height: 32px;
     pointer-events: none;
+    font-family: 'Open Sans', sans-serif;
+    font-size: 13px;
 `;
 
 /**
@@ -53,6 +56,8 @@ const NewInput = styled.textarea`
     outline: none;
     overflow: none;
     background-color: ${ props => props['data-expand'] ? '#ffffff': 'rgba(0,0,0,.04)' };
+    font-family: 'Open Sans', sans-serif;
+    font-size: 13px;
 `;
 
 const Submit = styled.input`
@@ -61,7 +66,8 @@ const Submit = styled.input`
     border: none;
     padding: 4px;
     outline: none;
-    background-color: #5aac44;
+    color: #fff;
+    background-color: #16C172;
     cursor: pointer;
 `;
 
@@ -130,12 +136,16 @@ const AddNewListItem = (props) => {
                 onChange={(e) => dispatch(setListTitle(e))}
                 onClick={(e) => dispatch(setExpandListInput(e))}
                 onBlur={(e) => {
+                    e.persist();
                     dispatch(handleAddList({ e, cardId }));
                     dispatch(closeListInput());
                 }}
                 onKeyDown={(e) => {
                     e.persist();
-                    return e.key === 'Enter' ? dispatch(handleAddList({ e, cardId })) : ''
+                    if(e.key === 'Enter') {
+                        dispatch(handleAddList({ e, cardId }));
+                        dispatch(setListTitle(''));
+                    }
                 }
                 }
                 maxLength={120}
@@ -144,7 +154,7 @@ const AddNewListItem = (props) => {
                 <Submit 
                     type='submit'
                     name='submit'
-                    value='+ Add item'
+                    value='Add item'
                     onClick={(e) => {
                         dispatch(handleAddList({ e, cardId }));
                         dispatch(closeListInput());

diff --git a/src/base-board/slices/board-slice.js b/src/base-board/slices/board-slice.js
@@ -6,6 +6,7 @@ import getAllBoardData from '../utility/get-state';
 import addNewCard from '../utility/add-card';
 import { addNewListItem, inputFieldReset } from '../utility/add-list';
 import * as dragUtil from '../utility/drag-end';
+import * as guest from '../../guest-board-mode/guest-mode';
 
 // Internal modules - slices
 import { handleCardDelete } from './card-menu-slice';
@@ -15,9 +16,10 @@ import { changeBackground } from '../../unsplash-image-picker/slices/background-
 // Async state functions 
 const getBoardData = createAsyncThunk(
     'board/getData',
-    async(boardId) => {
+    async(boardId, { getState }) => {
         try {
-            return await getAllBoardData(boardId);
+            const { mode } = getState().boardData;
+            return (mode === 'GUEST') ? guest.guestBoard : await getAllBoardData(boardId);
         } catch (err) {
             return err;
         }
@@ -30,10 +32,10 @@ const handleAddCard = createAsyncThunk(
     'board/handleAddCard',
     async(e, { getState }) => {
         try {
-            const { boardData, cardTitle } = getState().boardData;
+            const { mode, boardData, cardTitle } = getState().boardData;
             if(cardTitle && boardData) {
                 const title = cardTitle.trim();
-                return await addNewCard(boardData._id, title);
+                return (mode === 'GUEST') ? guest.addNewCard(title) : await addNewCard(boardData._id, title);
             }
         } catch (err) {
             return err;
@@ -48,9 +50,13 @@ const handleAddList = createAsyncThunk(
     'board/handleAddList',
     async({ e, cardId }, { getState }) => {
         try {
-            const { boardData, listTitle } = getState().boardData;
+            const { mode, boardData, listTitle } = getState().boardData;
+            if(listTitle.trim() === '') {
+                inputFieldReset();
+                return;
+            }
             if(listTitle && boardData) {
-                const newItem = await addNewListItem(cardId, listTitle);
+                const newItem = (mode === 'GUEST') ? guest.addNewListItem(listTitle) : await addNewListItem(cardId, listTitle);
                 inputFieldReset();
                 return { cardId, newItem };
             }
@@ -68,18 +74,22 @@ const onDragEnd = createAsyncThunk(
     async(res, { getState }) => {
         try {
             const { type, source, destination } = res;
+
             if(!destination) return false;
+
+            const { mode } = getState().boardData;
             const { cardIds, _id: boardId } = getState().boardData.boardData;
+
             if(dragUtil.checkIdIndexSame(source, destination)) return false;
+
             if(type === 'card'){
                 const newCardIds = dragUtil.getUpdatedCardIds(cardIds, source, destination);
-                dragUtil.updateDBCardOrder(boardId, newCardIds)
+                if(mode === 'USER') dragUtil.updateDBCardOrder(boardId, newCardIds);
                 return { type, newCardIds };
             }
             if(type === 'list'){
                 const { startCard, endCard, startIndex, endIndex } = dragUtil.newCardIdsOnListDrag(cardIds, source, destination);
-                dragUtil.updateDBListOrder(startCard, endCard);
-
+                if(mode === 'USER')dragUtil.updateDBListOrder(startCard, endCard);
                 return { type, startCard, endCard, startIndex, endIndex };
         }
         } catch (err) {
@@ -101,6 +111,7 @@ export const boardData = createSlice({
         expandListInput: '',
         listTitle: '',
         renderAddCard: false,
+        mode: 'GUEST', // Change to 'USER' if you want to include DB saves per change.
     },
     reducers: { 
         setCardTitle: {
@@ -162,6 +173,8 @@ export const boardData = createSlice({
             }
         },
         [handleAddList.fulfilled]: (state, { payload }) => {
+            if(!payload) return;
+
             const { cardId, newItem } = payload;
             const index = state.boardData.cardIds.map(card => card._id).indexOf(cardId);
             const card = state.boardData.cardIds[index];

diff --git a/src/base-board/slices/card-menu-slice.js b/src/base-board/slices/card-menu-slice.js
@@ -30,10 +30,10 @@ const handleCardDelete = createAsyncThunk(
     async(_, { getState }) => {
         try {
             const { cardId } = getState().cardMenuData;
-            const { boardData } = getState().boardData;
+            const { mode, boardData } = getState().boardData;
 
             const newCardIds = newCardIdsOnCardDel(boardData, cardId);
-            await updateDBDeleteCard(boardData._id, cardId);
+            if(mode === 'USER') await updateDBDeleteCard(boardData._id, cardId);
             return newCardIds;
         } catch (err) {
             return err

diff --git a/src/base-board/slices/item-menu-slice.js b/src/base-board/slices/item-menu-slice.js
@@ -12,7 +12,7 @@ const handleItemContent = createAsyncThunk(
     'itemMenu/handleItemContent',
     async(e, { getState }) => {
         e.persist();
-        const { boardData } = getState().boardData;
+        const { mode, boardData } = getState().boardData;
         const { cardId, itemId } = getState().itemMenuData;
         const cardIndex = boardData.cardIds.map(card => card._id).indexOf(cardId);
         const card = boardData.cardIds[cardIndex];
@@ -24,7 +24,7 @@ const handleItemContent = createAsyncThunk(
 
         if(content === '') target.innerHTML = "<pre id='item-content-input'></pre>";
         if(item.content !== content) {
-            await updateDBItemContent(item, content);
+            if(mode === 'USER') await updateDBItemContent(item, content);
             return { cardIndex, itemIndex, content };
         }
         return;
@@ -36,12 +36,12 @@ const handleItemContent = createAsyncThunk(
 const handleItemDelete = createAsyncThunk(
     'itemMenu/handleItemDelete',
     async(_, { getState }) => {
-        const { boardData } = getState().boardData;
+        const { mode, boardData } = getState().boardData;
         const { cardId, itemId } = getState().itemMenuData;
 
         const card = boardData.cardIds.filter(card => card._id === cardId)[0];
         const listIds = card.listIds.filter(item => item._id !== itemId);
-        await updateDBItemDelete(cardId, itemId);
+        if(mode === 'USER') await updateDBItemDelete(cardId, itemId);
         return { cardId, listIds };
     }
 )