diff --git a/package.json b/package.json index 31bdda6..1f12caa 100644 --- a/package.json +++ b/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", diff --git a/src/components/Content/style.scss b/src/components/Content/style.scss index 154f98b..ac94ae3 100644 --- a/src/components/Content/style.scss +++ b/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; } } diff --git a/src/components/Feed/FeedCommentSection/index.jsx b/src/components/Feed/FeedCommentSection/index.jsx index b4936f7..06289e6 100644 --- a/src/components/Feed/FeedCommentSection/index.jsx +++ b/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.name} - {this.getDate(comment.created_at)} + + {getFriendlyDate(new Date(comment.created_at.replace(/-/g, '/')))} + diff --git a/src/components/Feed/FeedPostItem/index.jsx b/src/components/Feed/FeedPostItem/index.jsx index 7c20e74..dc86ebb 100644 --- a/src/components/Feed/FeedPostItem/index.jsx +++ b/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) { {props.post.group_id !== 0 && } {props.post.name} - {getFriendlyDate(new Date(props.post.created_at.replace(/-/g, '/')))} + + {getFriendlyDate(new Date(props.post.created_at.replace(/-/g, '/')))} + 465 ? 'collapsed' : ''} text>
diff --git a/src/components/Feed/FeedPostItem/style.scss b/src/components/Feed/FeedPostItem/style.scss index 5efe49f..61787e6 100644 --- a/src/components/Feed/FeedPostItem/style.scss +++ b/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; -} \ No newline at end of file +} diff --git a/src/components/Feed/FeedPostsList/index.jsx b/src/components/Feed/FeedPostsList/index.jsx index 2fe62e5..67f00bd 100644 --- a/src/components/Feed/FeedPostsList/index.jsx +++ b/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('') diff --git a/src/components/Group/GroupBanner/index.jsx b/src/components/Group/GroupBanner/index.jsx index ec94ff8..2b04791 100644 --- a/src/components/Group/GroupBanner/index.jsx +++ b/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) { {request.name} - {getDate(request.created_at.replace(/-/g, '/'))} + + {getFriendlyDate(new Date(request.created_at.replace(/-/g, '/')))} + @@ -534,7 +514,9 @@ function GroupBanner(props) { /> {member.user.name} - Joined {getDate(member.created_at)} + + Joined {getFriendlyDate(new Date(member.created_at.replace(/-/g, '/')))} + diff --git a/src/components/KnowledgeBase/KnowledgeBaseFileHistory/index.jsx b/src/components/KnowledgeBase/KnowledgeBaseFileHistory/index.jsx index b537af2..f1ab8b6 100644 --- a/src/components/KnowledgeBase/KnowledgeBaseFileHistory/index.jsx +++ b/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) { > - {getDate(fileHistoryItem.created_at.replace(/-/g, '/'))} + + Joined {getFriendlyDate(new Date(fileHistoryItem.created_at.replace(/-/g, '/')))} + File overwritten by {fileHistoryItem.user_name}. diff --git a/src/views/Settings/Users/index.jsx b/src/views/Settings/Users/index.jsx index 355667c..32f8317 100644 --- a/src/views/Settings/Users/index.jsx +++ b/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() { {member.name} #{member.id} - {getDate(member.created_at)} + + Joined {getFriendlyDate(new Date(member.created_at.replace(/-/g, '/')))} + diff --git a/yarn.lock b/yarn.lock index c0d597b..ff38f65 100644 --- a/yarn.lock +++ b/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== + debug@2.6.9, 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"