✨ Add Title, change style of content

package.json

@@ -1,6 +1,6 @@
 {
     "name": "workgroup",
-    "version": "0.5.4",
+    "version": "0.5.5",
     "private": true,
     "dependencies": {
         "@fortawesome/fontawesome-svg-core": "^1.2.34",
@@ -14,6 +14,7 @@
         "@testing-library/user-event": "^12.6.0",
         "autolinker": "^3.14.2",
         "axios": "^0.21.1",
+        "date-fns": "^2.28.0",
         "dotenv": "^10.0.0",
         "firebase": "^8.2.0",
         "focus-trap-react": "^8.9.1",

src/components/Content/style.scss

@@ -10,7 +10,7 @@ body {
     width: calc(100% - 290px - 290px);
     padding: 0 30px 30px 30px;
     .text.extra * {
-        word-break: break-all;
+        word-break: break-word;
     }
 }
 

src/components/Feed/FeedCommentSection/index.jsx

@@ -6,6 +6,8 @@ import { Header, Loader, Button, Comment, Form, Feed } from 'semantic-ui-react'
 import PropTypes from 'prop-types'
 import mentionStyles from './mentionStyles'
 import { ThumbsUp } from 'react-feather'
+import getFriendlyDate from '../../../utils/getFriendlyDate'
+import { format } from 'date-fns'
 
 import unknownAvatar from '../../../static/unknown.png'
 import likeComment from '../../../utils/likeComment'
@@ -97,29 +99,6 @@ class CommentSection extends React.Component {
         }
     }
 
-    getDate(date) {
-        let newDate = new Date(date.replace(/-/g, '/'))
-
-        const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }
-
-        let todaysDate = new Date()
-
-        let dateString = ''
-
-        if (newDate.setHours(0, 0, 0, 0) == todaysDate.setHours(0, 0, 0, 0)) {
-            todaysDate = new Date()
-            newDate = new Date(date.replace(/-/g, '/'))
-            let currentHours = newDate.getHours()
-            currentHours = ('0' + currentHours).slice(-2)
-
-            dateString = 'Today, ' + currentHours + ':' + (newDate.getMinutes() < 10 ? '0' : '') + newDate.getMinutes()
-        } else {
-            dateString = newDate.toLocaleDateString(process.env.REACT_APP_LOCALE, options)
-        }
-
-        return dateString
-    }
-
     decodeHTMLEntities(text) {
         let textArea = document.createElement('textarea')
         textArea.innerHTML = text
@@ -205,7 +184,9 @@ class CommentSection extends React.Component {
                                             <Comment.Content>
                                                 <Comment.Author href={'/app/user/' + comment.email}>{comment.name}</Comment.Author>
                                                 <Comment.Metadata>
-                                                    <span>{this.getDate(comment.created_at)}</span>
+                                                    <span title={format(new Date(comment.created_at.replace(/-/g, '/')), 'dd.MM.yyyy - HH:mm:ss')}>
+                                                        {getFriendlyDate(new Date(comment.created_at.replace(/-/g, '/')))}
+                                                    </span>
                                                 </Comment.Metadata>
                                                 <Comment.Text dangerouslySetInnerHTML={{ __html: this.decodeHTMLEntities(comment.comment_content) }}></Comment.Text>
                                                 <Comment.Actions>

src/components/Feed/FeedPostItem/index.jsx

@@ -4,10 +4,11 @@ import { Feed, Dropdown, Modal, Button } from 'semantic-ui-react'
 import { BrowserRouter as Router, Switch, Route, Link, Redirect } from 'react-router-dom'
 import { ThumbsUp, MessageCircle, FileText, Flag, CornerDownRight, Share2, Tool } from 'react-feather'
 import PropTypes from 'prop-types'
-import getFriendlyDate from '../../../utils/getFriendlyDate'
 import W_Modal from '../../W_Modal'
 import likePost from '../../../utils/likePost'
 import toggleComment from '../../../utils/toggleComment'
+import getFriendlyDate from '../../../utils/getFriendlyDate'
+import { format } from 'date-fns'
 
 import unknownAvatar from '../../../static/unknown.png'
 
@@ -193,7 +194,9 @@ export default function PostItem(props) {
                         <Link className={`${props.post.group_id !== 0 && `user--group-member `}user`} to={'/app/user/' + props.post.email}>
                             {props.post.group_id !== 0 && <CornerDownRight size={12} strokeWidth={2.5} />} {props.post.name}
                         </Link>
-                        <Feed.Date>{getFriendlyDate(new Date(props.post.created_at.replace(/-/g, '/')))}</Feed.Date>
+                        <Feed.Date title={format(new Date(props.post.created_at.replace(/-/g, '/')), 'dd.MM.yyyy - HH:mm:ss')}>
+                            {getFriendlyDate(new Date(props.post.created_at.replace(/-/g, '/')))}
+                        </Feed.Date>
                     </Feed.Summary>
                     <Feed.Extra className={props.post.post_content.length > 465 ? 'collapsed' : ''} text>
                         <div dangerouslySetInnerHTML={{ __html: props.post.post_content }}></div>

src/components/Feed/FeedPostItem/style.scss

@@ -45,7 +45,7 @@
             padding: 10px !important;
             .item {
                 border-radius: 10px;
-                transition: all .1s;
+                transition: all 0.1s;
             }
         }
     }
@@ -236,7 +236,7 @@
     max-width: 100% !important;
 }
 
-.ui.feed>.event>.label {
+.ui.feed > .event > .label {
     height: 2.5em !important;
 }
 
@@ -277,6 +277,6 @@
     }
 }
 
-.ui.feed>.event>.content .extra.text {
+.ui.feed > .event > .content .extra.text {
     max-width: 100% !important;
-}
+}

src/components/Feed/FeedPostsList/index.jsx

@@ -1,19 +1,11 @@
 import React, { useEffect, useState } from 'react'
 import './style.scss'
 import { Feed, Modal, Loader, Button, Pagination } from 'semantic-ui-react'
-import { BrowserRouter as Router, Switch, Route, Link, Redirect } from 'react-router-dom'
-import { ThumbsUp, MessageCircle, Zap, FileText, Flag, CornerDownRight } from 'react-feather'
+import { Zap } from 'react-feather'
 import PropTypes from 'prop-types'
-import getFriendlyDate from '../../../utils/getFriendlyDate'
 import loadPosts from '../../../utils/loadPosts'
-import likePost from '../../../utils/likePost'
-import toggleComment from '../../../utils/toggleComment'
-import VirtualScroll from 'react-dynamic-virtual-scroll'
 import W_Modal from '../../W_Modal'
 
-import unknownAvatar from '../../../static/unknown.png'
-
-import CommentSection from '../FeedCommentSection'
 import ReportPost from '../FeedReportPost'
 import PostItem from '../FeedPostItem'
 
@@ -22,8 +14,6 @@ export default function PostsList(props) {
     const [isLoading, setIsLoading] = useState(true)
     const [paginationPage, setPaginationPage] = useState(1)
     const [totalPaginationPages, setTotalPagionationPages] = useState(1)
-    const [isLoadingMore, setIsLoadingMore] = useState(false)
-    const [visibleCommentSections, setVisibleCommentSections] = useState([])
     const [emptyStates, setEmptyStates] = useState(["It's empty here. Start sharing something about your thoughts!", 'Your friends are shy. Get started and write your first post.'])
     const [imageModalVisible, setImageModalVisible] = useState(false)
     const [imageModalUrl, setImageModalUrl] = useState('')

src/components/Group/GroupBanner/index.jsx

@@ -4,7 +4,8 @@ import './style.scss'
 import { Button, Loader, Modal, Input, Checkbox, List } from 'semantic-ui-react'
 import PropTypes from 'prop-types'
 import { MoreVertical, Users, Zap } from 'react-feather'
-import { Link } from 'react-router-dom'
+import getFriendlyDate from '../../../utils/getFriendlyDate'
+import { format } from 'date-fns'
 import W_Modal from '../../W_Modal'
 
 import unknownBanner from '../../../static/banner.jpg'
@@ -85,29 +86,6 @@ function GroupBanner(props) {
         reader.readAsDataURL(file)
     }
 
-    const getDate = (date) => {
-        let newDate = new Date(date)
-
-        const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }
-
-        let todaysDate = new Date()
-
-        let dateString = ''
-
-        if (newDate.setHours(0, 0, 0, 0) == todaysDate.setHours(0, 0, 0, 0)) {
-            todaysDate = new Date()
-            newDate = new Date(date)
-            let currentHours = newDate.getHours()
-            currentHours = ('0' + currentHours).slice(-2)
-
-            dateString = 'Today, ' + currentHours + ':' + (newDate.getMinutes() < 10 ? '0' : '') + newDate.getMinutes()
-        } else {
-            dateString = newDate.toLocaleDateString(process.env.REACT_APP_LOCALE, options)
-        }
-
-        return dateString
-    }
-
     const avatarChange = (e) => {
         setGroupAvatarUpload(e.target.files[0])
 
@@ -424,7 +402,9 @@ function GroupBanner(props) {
                                         <List.Item>
                                             <List.Content>
                                                 <List.Header as="a">{request.name}</List.Header>
-                                                <List.Description as="a">{getDate(request.created_at.replace(/-/g, '/'))}</List.Description>
+                                                <List.Description as="a" title={format(new Date(request.created_at.replace(/-/g, '/')), 'dd.MM.yyyy - HH:mm:ss')}>
+                                                    {getFriendlyDate(new Date(request.created_at.replace(/-/g, '/')))}
+                                                </List.Description>
                                             </List.Content>
                                         </List.Item>
                                     </List>
@@ -534,7 +514,9 @@ function GroupBanner(props) {
                                                         />
                                                     </div>
                                                     <List.Header as="a">{member.user.name}</List.Header>
-                                                    <List.Description as="a">Joined {getDate(member.created_at)}</List.Description>
+                                                    <List.Description as="a" title={format(new Date(member.created_at.replace(/-/g, '/')), 'dd.MM.yyyy - HH:mm:ss')}>
+                                                        Joined {getFriendlyDate(new Date(member.created_at.replace(/-/g, '/')))}
+                                                    </List.Description>
                                                 </List.Content>
                                             </List.Item>
                                         </List>

src/components/KnowledgeBase/KnowledgeBaseFileHistory/index.jsx

@@ -5,6 +5,8 @@ import PropTypes from 'prop-types'
 import { Modal, Button, Loader, List } from 'semantic-ui-react'
 import { Zap } from 'react-feather'
 import W_Modal from '../../W_Modal'
+import getFriendlyDate from '../../../utils/getFriendlyDate'
+import { format } from 'date-fns'
 
 function KnowledgeBaseFileHistory(props) {
     const { folderId, fileId } = useParams()
@@ -37,29 +39,6 @@ function KnowledgeBaseFileHistory(props) {
             })
     }, [fileId])
 
-    const getDate = (date) => {
-        let newDate = new Date(date)
-
-        const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }
-
-        let todaysDate = new Date()
-
-        let dateString = ''
-
-        if (newDate.setHours(0, 0, 0, 0) == todaysDate.setHours(0, 0, 0, 0)) {
-            todaysDate = new Date()
-            newDate = new Date(date)
-            let currentHours = newDate.getHours()
-            currentHours = ('0' + currentHours).slice(-2)
-
-            dateString = 'Today, ' + currentHours + ':' + (newDate.getMinutes() < 10 ? '0' : '') + newDate.getMinutes()
-        } else {
-            dateString = newDate.toLocaleDateString(process.env.REACT_APP_LOCALE, options)
-        }
-
-        return dateString
-    }
-
     const restoreFromHistory = () => {
         setIsLoading(true)
 
@@ -115,7 +94,9 @@ function KnowledgeBaseFileHistory(props) {
                                     >
                                         <List.Item>
                                             <List.Content>
-                                                <List.Header as="a">{getDate(fileHistoryItem.created_at.replace(/-/g, '/'))}</List.Header>
+                                                <List.Header as="a" title={format(new Date(fileHistoryItem.created_at.replace(/-/g, '/')), 'dd.MM.yyyy - HH:mm:ss')}>
+                                                    Joined {getFriendlyDate(new Date(fileHistoryItem.created_at.replace(/-/g, '/')))}
+                                                </List.Header>
                                                 <List.Description as="a">
                                                     File overwritten by <b>{fileHistoryItem.user_name}</b>.
                                                 </List.Description>

src/views/Settings/Users/index.jsx

@@ -4,6 +4,8 @@ import { BrowserRouter as Router, Switch, Route, Link, Redirect } from 'react-ro
 import { List, Loader, Pagination, Dropdown, Icon } from 'semantic-ui-react'
 import './style.scss'
 import unknownAvatar from '../../../static/unknown.png'
+import getFriendlyDate from '../../../utils/getFriendlyDate'
+import { format } from 'date-fns'
 
 import { Eye, Zap, Settings, Info } from 'react-feather'
 import UserInformation from '../../../components/Settings/SettingsUserInformation'
@@ -67,32 +69,6 @@ function SettingsUsers() {
         loadUsers(1, value)
     }
 
-    const getDate = (date) => {
-        if (date !== null) {
-            date = date.replace(/-/g, '/')
-        }
-        let newDate = new Date(date)
-
-        const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }
-
-        let todaysDate = new Date()
-
-        let dateString = ''
-
-        if (newDate.setHours(0, 0, 0, 0) == todaysDate.setHours(0, 0, 0, 0)) {
-            todaysDate = new Date()
-            newDate = new Date(date)
-            let currentHours = newDate.getHours()
-            currentHours = ('0' + currentHours).slice(-2)
-
-            dateString = 'Today, ' + currentHours + ':' + (newDate.getMinutes() < 10 ? '0' : '') + newDate.getMinutes()
-        } else {
-            dateString = newDate.toLocaleDateString(process.env.REACT_APP_LOCALE, options)
-        }
-
-        return dateString
-    }
-
     const showUserInformation = (member) => {
         setShowInformationModal(true)
         setSelectedMember(member)
@@ -164,7 +140,9 @@ function SettingsUsers() {
                                                     <List.Header>
                                                         {member.name} <i>#{member.id}</i>
                                                     </List.Header>
-                                                    <List.Description>{getDate(member.created_at)}</List.Description>
+                                                    <List.Description title={format(new Date(member.created_at.replace(/-/g, '/')), 'dd.MM.yyyy - HH:mm:ss')}>
+                                                        Joined {getFriendlyDate(new Date(member.created_at.replace(/-/g, '/')))}
+                                                    </List.Description>
                                                 </List.Content>
                                             </List.Item>
                                         </List>

yarn.lock

@@ -4623,6 +4623,11 @@ data-urls@^2.0.0:
     whatwg-mimetype "^2.3.0"
     whatwg-url "^8.0.0"
 
+date-fns@^2.28.0:
+  version "2.28.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.28.0.tgz#9570d656f5fc13143e50c975a3b6bbeb46cd08b2"
+  integrity sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==
+
 [email protected], debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz"