Add default create board values, required fileds (#519)

cybergizer-hq · Jan 17, 2022 · 41a3ae8 · 41a3ae8
1 parent d061a6f
commit 41a3ae8
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 8 deletions.
diff --git a/app/javascript/components/create-board/create-board.jsx b/app/javascript/components/create-board/create-board.jsx
@@ -2,6 +2,7 @@ import React, {useState} from 'react';
 import Picker from 'emoji-picker-react';
 import {faSmile} from '@fortawesome/free-regular-svg-icons';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {getBoardDateName} from '../../utils/get-date';
 import style from './style.module.css';
 
 const EmojiIcon = ({emojiColumnName, formData, setEmojiData}) => {
@@ -26,13 +27,19 @@ const EmojiIcon = ({emojiColumnName, formData, setEmojiData}) => {
 
 export const CreateBoard = ({isCreateBoardOpen, setCreateBoardOpen}) => {
   const [formData, setformData] = useState({
-    boardName: '',
-    firstColumnName: '',
-    firstColumnEmoji: null,
-    secondColumnName: '',
-    secondColumnEmoji: null,
-    thirdColumnName: '',
-    thirdColumnEmoji: null
+    boardName: getBoardDateName(Date.now()),
+    firstColumnName: 'Mad',
+    firstColumnEmoji: {
+      emoji: '😔',
+    },
+    secondColumnName: 'Sad',
+    secondColumnEmoji: {
+      emoji: '😡'
+    },
+    thirdColumnName: 'Glad',
+    thirdColumnEmoji: {
+      emoji: '🤗'
+    }
   });
 
   const [emojiData, setEmojiData] = useState({
@@ -78,6 +85,7 @@ export const CreateBoard = ({isCreateBoardOpen, setCreateBoardOpen}) => {
                   boardName: element.currentTarget.value
                 })
               }
+              required
             />
           </div>
           <div className="form-element">
@@ -92,6 +100,7 @@ export const CreateBoard = ({isCreateBoardOpen, setCreateBoardOpen}) => {
                   firstColumnName: element.currentTarget.value
                 })
               }
+              required
             />
             <EmojiIcon
               emojiColumnName="firstColumnEmoji"
@@ -111,6 +120,7 @@ export const CreateBoard = ({isCreateBoardOpen, setCreateBoardOpen}) => {
                   secondColumnName: element.currentTarget.value
                 })
               }
+              required
             />
             <EmojiIcon
               emojiColumnName="secondColumnEmoji"
@@ -130,6 +140,7 @@ export const CreateBoard = ({isCreateBoardOpen, setCreateBoardOpen}) => {
                   thirdColumnName: element.currentTarget.value
                 })
               }
+              required
             />
             <EmojiIcon
               emojiColumnName="thirdColumnEmoji"

diff --git a/app/javascript/components/style.less b/app/javascript/components/style.less
@@ -194,6 +194,7 @@ a.active {
   border: 1px solid #b1b1b1;
   box-sizing: border-box;
   border-radius: 4px;
+  padding-left: 10px;
 }
 .input:hover {
   border: 1px solid #797474;

diff --git a/app/javascript/utils/get-date.js b/app/javascript/utils/get-date.js
@@ -1,5 +1,5 @@
 import {enGB} from 'date-fns/locale';
-import {formatRelative, subDays} from 'date-fns';
+import {formatRelative, subDays, format} from 'date-fns';
 
 const formatRelativeLocale = {
   lastWeek: " 'Last' eeee, 'at' HH:mm",
@@ -20,3 +20,8 @@ export const getDate = (createdAt) => {
     locale
   });
 };
+
+export const getBoardDateName = (date) => {
+  if (!date) return date;
+  return format(date, "dd-MM-yyyy");
+};