From b45a59f1fe8b7ac46f641af11ccfdb60be58a370 Mon Sep 17 00:00:00 2001 From: Berke Aras Date: Sat, 22 Jan 2022 19:05:28 +0100 Subject: [PATCH] Updates --- public/index.html | 2 +- src/components/SidebarRight/index.jsx | 81 ++++++++----- src/components/SidebarRight/style.scss | 14 +++ src/components/_App_PostsList/index.jsx | 110 +++++++++--------- src/components/_Group_GroupBanner/index.jsx | 2 - src/components/_Header_Searchfield/index.jsx | 108 +++++++++-------- .../_KnowledgeBase_FileHistory/index.jsx | 1 - .../_KnowledgeBase_Header/index.jsx | 5 +- src/utils/getFriendlyDate.jsx | 2 +- src/utils/likePost.jsx | 4 +- src/utils/loadPosts.jsx | 32 +++-- src/utils/toggleComment.jsx | 6 +- src/views/KnowledgeBase/index.jsx | 1 - 13 files changed, 197 insertions(+), 171 deletions(-) diff --git a/public/index.html b/public/index.html index b0427c0..0ca49c0 100644 --- a/public/index.html +++ b/public/index.html @@ -8,7 +8,7 @@ - + Initializing – WorkGroup diff --git a/src/components/SidebarRight/index.jsx b/src/components/SidebarRight/index.jsx index 39e580b..9b70934 100644 --- a/src/components/SidebarRight/index.jsx +++ b/src/components/SidebarRight/index.jsx @@ -1,4 +1,4 @@ -import React from 'react' +import React, { useState } from 'react' import './style.scss' import { Card, Icon } from 'semantic-ui-react' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' @@ -8,40 +8,61 @@ import { BrowserRouter as Router, Switch, Route, Link, Redirect, useParams } fro import { User, Users, Calendar } from 'react-feather' import packageJson from '../../../package.json' import logo from '../../static/logo.svg' +import CookieBanner from '../_App_CookieBanner' library.add(faUser, faUserFriends, faCalendarWeek) const SidebarRight = () => { + const [showCookieBanner, setShowCookieBanner] = useState(false) + return ( -
- - About WorkGroup {packageJson.version} - - - Project - -  –  - - License - -  –  - - Contributing - -  –  - - Contact - - - - - -
- an open source project. - - - -
+ <> +
+ + About WorkGroup {packageJson.version} + + + Project + + + License + + + Contributing + + + Contact + + + Imprint + + + Data Policy + + { + e.preventDefault() + localStorage.removeItem('cookies_accepted') + setShowCookieBanner(true) + }} + > + Cookie Consent + + + + + +
+ an open source project. + + + +
+ + {showCookieBanner && } + ) } diff --git a/src/components/SidebarRight/style.scss b/src/components/SidebarRight/style.scss index 9e00251..78b95d5 100644 --- a/src/components/SidebarRight/style.scss +++ b/src/components/SidebarRight/style.scss @@ -60,6 +60,20 @@ body { } } } + + .about-card-content { + a.about-link { + padding: 0px 1px; + margin: 2px 5px; + opacity: 0.8; + + &:hover, + &:focus-visible, + &:active { + opacity: 1; + } + } + } } @media (max-width: 1130px) { diff --git a/src/components/_App_PostsList/index.jsx b/src/components/_App_PostsList/index.jsx index afaa840..371be04 100644 --- a/src/components/_App_PostsList/index.jsx +++ b/src/components/_App_PostsList/index.jsx @@ -8,7 +8,7 @@ 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 VirtualScroll from 'react-dynamic-virtual-scroll' import unknownAvatar from '../../static/unknown.png' @@ -16,55 +16,53 @@ import CommentSection from '../_App_CommentSection/' import ReportPost from '../_App_ReportPost/' export default function PostsList(props) { - - const [items, setItems] = useState([]); - const [isLoading, setIsLoading] = useState(true); + const [items, setItems] = useState([]) + 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(''); - const [reportModalVisible, setReportModalVisible] = useState(false); - const [reportModalPostId, setReportModalPostId] = useState(0); - const [reportSuccessVisible, setReportSuccessVisible] = useState(false); - const [reportErrorVisible, setReportErrorVisible] = useState(false); + 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('') + const [reportModalVisible, setReportModalVisible] = useState(false) + const [reportModalPostId, setReportModalPostId] = useState(0) + const [reportSuccessVisible, setReportSuccessVisible] = useState(false) + const [reportErrorVisible, setReportErrorVisible] = useState(false) useEffect(() => { - loadMore(); - console.log(props.group, props.user); + loadMore() }, []) const loadMore = (page = 1) => { - setIsLoading(true); + setIsLoading(true) document.querySelector('.app').scrollTo(0, 0) - let postLoader; + let postLoader if (props.group !== undefined) { - postLoader = loadPosts({page: page, filterBy: 'group', filter: props.group}); + postLoader = loadPosts({ page: page, filterBy: 'group', filter: props.group }) } else { - - if (props.user !== "*") { - postLoader = loadPosts({page: page, filterBy: 'user', filter: props.user}); + if (props.user !== '*') { + postLoader = loadPosts({ page: page, filterBy: 'user', filter: props.user }) } else { - postLoader = loadPosts({page: page}); + postLoader = loadPosts({ page: page }) } - } - setPaginationPage(page); - - postLoader.then(res => { - setIsLoading(false); - setItems(Object.values(res.posts)); - setTotalPagionationPages(res.totalPages); - }).catch(err => { - console.error(err); - setIsLoading(false); - setItems([]); - }) + setPaginationPage(page) + + postLoader + .then((res) => { + setIsLoading(false) + setItems(Object.values(res.posts)) + setTotalPagionationPages(res.totalPages) + }) + .catch((err) => { + console.error(err) + setIsLoading(false) + setItems([]) + }) } const handlePaginationChange = (event) => { @@ -109,12 +107,12 @@ export default function PostsList(props) { const reportPost = (e, postId) => { e.preventDefault() - setReportModalVisible(true); - setReportModalPostId(postId); + setReportModalVisible(true) + setReportModalPostId(postId) } const commentOpener = (e) => { - setVisibleCommentSections(toggleComment(e, visibleCommentSections)); + setVisibleCommentSections(toggleComment(e, visibleCommentSections)) } return ( @@ -202,11 +200,25 @@ export default function PostsList(props) { )} - {likePost(e)}} id={'post_like_id_' + item.id} className={item.hasLiked}> + { + likePost(e) + }} + id={'post_like_id_' + item.id} + className={item.hasLiked} + > {getLikes(item.likes)} - {commentOpener(e)}} id={'post_comment_id_' + item.id}> + { + commentOpener(e) + }} + id={'post_comment_id_' + item.id} + > {getComments(item.comments)} @@ -228,10 +240,9 @@ export default function PostsList(props) { ))} -
- handlePaginationChange(event)} totalPages={totalPaginationPages} /> +
+ handlePaginationChange(event)} totalPages={totalPaginationPages} />
- ) : ( @@ -272,19 +283,11 @@ export default function PostsList(props) { /> )} - setReportSuccessVisible(false)} - onOpen={() => setReportSuccessVisible(true)} - open={reportSuccessVisible} - size="mini" - > + setReportSuccessVisible(false)} onOpen={() => setReportSuccessVisible(true)} open={reportSuccessVisible} size="mini"> Post reported! Thank you for your feedback about this post. We will review it immediately. - @@ -300,10 +303,9 @@ export default function PostsList(props) {
) - } PostsList.propTypes = { user: PropTypes.string, group: PropTypes.any, -} \ No newline at end of file +} diff --git a/src/components/_Group_GroupBanner/index.jsx b/src/components/_Group_GroupBanner/index.jsx index a6bb625..dfc47bd 100644 --- a/src/components/_Group_GroupBanner/index.jsx +++ b/src/components/_Group_GroupBanner/index.jsx @@ -232,9 +232,7 @@ function GroupBanner(props) { fetch(process.env.REACT_APP_API_URL + '/api/group/getAllMembers?group_id=' + props.groupInformation['id'], requestOptions) .then((response) => response.json()) .then((result) => { - console.log(result['users']) setGroupMembers(result['users']) - setIsLoadingRequests(false) }) } diff --git a/src/components/_Header_Searchfield/index.jsx b/src/components/_Header_Searchfield/index.jsx index 1b11ab5..ab20338 100644 --- a/src/components/_Header_Searchfield/index.jsx +++ b/src/components/_Header_Searchfield/index.jsx @@ -22,7 +22,7 @@ const SearchField = () => { const [topicResult, setTopicResult] = useState([]) const [popularTopics, setPopularTopics] = useState([]) const [isLoadingResults, setIsLoadingResults] = useState(false) - const [minimumSearchLength, setMinimumSearchLength] = useState(3); + const [minimumSearchLength, setMinimumSearchLength] = useState(3) useEffect(() => { let tokenHeaders = new Headers() @@ -40,13 +40,11 @@ const SearchField = () => { }) if (contextValue != undefined) { - - let minimumSearchLengthContext = contextValue.app.minimum_search_length; + let minimumSearchLengthContext = contextValue.app.minimum_search_length minimumSearchLengthContext = Number.parseInt(minimumSearchLengthContext) setMinimumSearchLength(minimumSearchLengthContext) } - }, []) const showMobileSearch = (event) => { @@ -140,74 +138,72 @@ const SearchField = () => {
    - {userResult && ( - userResult.length > 0 && ( - <> - Users - {userResult.map((user) => { - return ( -
  • - document.activeElement.blur()} to={'/app/user/' + user.email}> - {user.name}{' '} - {(user.user_department !== null || user.user_department !== '') && {user.user_department}} - -
    • - ) - })} - - ) + {userResult && userResult.length > 0 && ( + <> + Users + {userResult.map((user) => { + return ( +
  • + document.activeElement.blur()} to={'/app/user/' + user.email}> + {user.name}{' '} + {(user.user_department !== null || user.user_department !== '') && {user.user_department}} + +
    • + ) + })} + )} - {groupResult && ( - groupResult.length > 0 && ( - <> - Groups - {groupResult.map((group) => { - return ( -
  • - document.activeElement.blur()} to={'/app/group/' + group.id}> - {group.group_title} - -
    • - ) - })} - - ) + {groupResult && groupResult.length > 0 && ( + <> + Groups + {groupResult.map((group) => { + return ( +
  • + document.activeElement.blur()} to={'/app/group/' + group.id}> + {group.group_title} + +
    • + ) + })} + )} - {topicResult && ( - topicResult.length > 0 && ( - <> - Popular topics - {topicResult.map((topic) => { - return ( -
  • - document.activeElement.blur()} to={'/app/topics/' + topic.topic}> - {topic.topic} - -
    • - ) - })} - - ) + {topicResult && topicResult.length > 0 && ( + <> + Popular topics + {topicResult.map((topic) => { + return ( +
  • + document.activeElement.blur()} to={'/app/topics/' + topic.topic}> + {topic.topic} + +
    • + ) + })} + )} - {(userResult && groupResult && topicResult && searchQuery) && ( - userResult.length == 0 && groupResult.length == 0 && topicResult.length == 0 && searchQuery.length >= minimumSearchLength && ( + {userResult && + groupResult && + topicResult && + searchQuery && + userResult.length == 0 && + groupResult.length == 0 && + topicResult.length == 0 && + searchQuery.length >= minimumSearchLength && (

    No Search Results found!
    - ) - )} + )} - {(userResult.length == 0 && groupResult.length == 0 && topicResult.length == 0 && searchQuery.length < minimumSearchLength || searchQuery.length == 0) && ( + {((userResult.length == 0 && groupResult.length == 0 && topicResult.length == 0 && searchQuery.length < minimumSearchLength) || searchQuery.length == 0) && (

    Search for colleagues, groups, events and more...
    )} -
diff --git a/src/components/_KnowledgeBase_FileHistory/index.jsx b/src/components/_KnowledgeBase_FileHistory/index.jsx index 6cded1d..47930a4 100644 --- a/src/components/_KnowledgeBase_FileHistory/index.jsx +++ b/src/components/_KnowledgeBase_FileHistory/index.jsx @@ -28,7 +28,6 @@ function KnowledgeBaseFileHistory(props) { fetch(process.env.REACT_APP_API_URL + '/api/knowledgebase/getFileHistory?file_id=' + fileId, requestOptions) .then((response) => response.json()) .then((result) => { - console.log(result) setFileHistoryItems(result.file_history) setIsLoading(false) }) diff --git a/src/components/_KnowledgeBase_Header/index.jsx b/src/components/_KnowledgeBase_Header/index.jsx index ee4af04..0de6eba 100644 --- a/src/components/_KnowledgeBase_Header/index.jsx +++ b/src/components/_KnowledgeBase_Header/index.jsx @@ -141,7 +141,6 @@ function KnowledgeBaseHeader(props) { const fileChange = (e) => { setUploadFile(e.target.files[0]) - console.log(e.target.files[0]) } const uploadNewFile = () => { @@ -164,7 +163,6 @@ function KnowledgeBaseHeader(props) { fetch(process.env.REACT_APP_API_URL + '/api/knowledgebase/uploadFile', requestOptions) .then((response) => response.json()) .then((result) => { - console.log(result) setIsLoading(false) }) .catch((error) => { @@ -289,7 +287,8 @@ function KnowledgeBaseHeader(props) { size="small" placeholder="File Name" /> -
+ +
response.text()) .then((result) => { element.parentNode.style.pointerEvents = 'all' - return 1; + return 1 }) -} \ No newline at end of file +} diff --git a/src/utils/loadPosts.jsx b/src/utils/loadPosts.jsx index ac500b1..1a5ab53 100644 --- a/src/utils/loadPosts.jsx +++ b/src/utils/loadPosts.jsx @@ -1,18 +1,17 @@ -export default function loadPosts(config = { - filterBy: null, // NULL, 'user', 'group' - filter: null, // NULL, 'userId', 'groupId' - page: 1 -}) { - +export default function loadPosts( + config = { + filterBy: null, // NULL, 'user', 'group' + filter: null, // NULL, 'userId', 'groupId' + page: 1, + } +) { config = { filterBy: config.filterBy, filter: config.filter, - page: config.page || 1 + page: config.page || 1, } - - return new Promise(function(resolve, reject) { - + return new Promise(function (resolve, reject) { let postsHeader = new Headers() postsHeader.append('Authorization', 'Bearer ' + localStorage.getItem('token')) @@ -45,21 +44,20 @@ export default function loadPosts(config = { } } else { if (res.status == 'not_member') { - reject('This group is private. You have to be a member of this group to be able to read posts.'); + reject('This group is private. You have to be a member of this group to be able to read posts.') } else { resolve({ posts: res.posts, totalPages: res.total_pages, - currentPage: res.current_page + currentPage: res.current_page, }) } } }, (error) => { - console.error(error); - reject("An unknown error occurred. Please try again later."); + console.error(error) + reject('An unknown error occurred. Please try again later.') } ) - - }); -} \ No newline at end of file + }) +} diff --git a/src/utils/toggleComment.jsx b/src/utils/toggleComment.jsx index 9b11ece..3720446 100644 --- a/src/utils/toggleComment.jsx +++ b/src/utils/toggleComment.jsx @@ -37,13 +37,13 @@ export default function toggleComment(event, visibleCommentSectionsState) { visibleCommentSections.push(val) // Set state - return visibleCommentSections; + return visibleCommentSections } else { newStatus = false let visibleCommentSections = [...visibleCommentSectionsState] visibleCommentSections.remove(val) - return visibleCommentSections; + return visibleCommentSections } -} \ No newline at end of file +} diff --git a/src/views/KnowledgeBase/index.jsx b/src/views/KnowledgeBase/index.jsx index d40d97c..d96423d 100644 --- a/src/views/KnowledgeBase/index.jsx +++ b/src/views/KnowledgeBase/index.jsx @@ -107,7 +107,6 @@ function KnowledgeBase() { return response.json() }) .then((response) => { - console.log(response) setIsLoading(false) }) }