Merge pull request #129 from BerkeAras/Update-0.5.1

Update 0.5.1

package.json

@@ -1,6 +1,6 @@
 {
     "name": "workgroup",
-    "version": "0.5.0",
+    "version": "0.5.1",
     "private": true,
     "dependencies": {
         "@fortawesome/fontawesome-svg-core": "^1.2.34",

public/index.html

@@ -8,7 +8,7 @@
         <link rel="manifest" href="%PUBLIC_URL%/assets/site.webmanifest" />
         <link rel="icon" href="%PUBLIC_URL%/assets/favicon.ico" />
         <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Initializing – WorkGroup</title>
     </head>
 

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 (
-        <div className="sidebar_right">
-            <Card>
-                <Card.Content extra>About WorkGroup {packageJson.version}</Card.Content>
-                <Card.Content className="about-card-content">
-                    <a className="about-link" target="_blank" rel="noreferrer" href="https://github.com/BerkeAras/WorkGroup">
-                        Project
-                    </a>
-                    &nbsp;–&nbsp;
-                    <a className="about-link" target="_blank" rel="noreferrer" href="https://github.com/BerkeAras/WorkGroup/blob/main/LICENSE">
-                        License
-                    </a>
-                    &nbsp;–&nbsp;
-                    <a className="about-link" target="_blank" rel="noreferrer" href="https://github.com/BerkeAras/WorkGroup/blob/main/CONTRIBUTING.md">
-                        Contributing
-                    </a>
-                    &nbsp;–&nbsp;
-                    <a className="about-link" target="_blank" rel="noreferrer" href="https://github.com/BerkeAras/WorkGroup#contact">
-                        Contact
-                    </a>
-                </Card.Content>
-                <Card.Content className="about-card-content">
-                    <a target="_blank" rel="noreferrer" href="https://github.com/BerkeAras/WorkGroup" className="about-logo">
-                        <img src={logo} />
-                        <br />
-                        an open source project.
-                    </a>
-                </Card.Content>
-            </Card>
-        </div>
+        <>
+            <div className="sidebar_right">
+                <Card>
+                    <Card.Content extra>About WorkGroup {packageJson.version}</Card.Content>
+                    <Card.Content className="about-card-content">
+                        <a className="about-link" target="_blank" rel="noreferrer" href="https://workgroup.berkearas.de/">
+                            Project
+                        </a>
+                        <a className="about-link" target="_blank" rel="noreferrer" href="https://github.com/BerkeAras/WorkGroup/blob/main/LICENSE">
+                            License
+                        </a>
+                        <a className="about-link" target="_blank" rel="noreferrer" href="https://github.com/BerkeAras/WorkGroup/blob/main/CONTRIBUTING.md">
+                            Contributing
+                        </a>
+                        <a className="about-link" target="_blank" rel="noreferrer" href="https://github.com/BerkeAras/WorkGroup#contact">
+                            Contact
+                        </a>
+                        <a className="about-link" target="_blank" rel="noreferrer" href="https://workgroup.berkearas.de/imprint">
+                            Imprint
+                        </a>
+                        <a className="about-link" target="_blank" rel="noreferrer" href="https://workgroup.berkearas.de/data-policy">
+                            Data Policy
+                        </a>
+                        <a
+                            className="about-link"
+                            href="#"
+                            onClick={(e) => {
+                                e.preventDefault()
+                                localStorage.removeItem('cookies_accepted')
+                                setShowCookieBanner(true)
+                            }}
+                        >
+                            Cookie Consent
+                        </a>
+                    </Card.Content>
+                    <Card.Content className="about-card-content">
+                        <a target="_blank" rel="noreferrer" href="https://workgroup.berkearas.de/" className="about-logo">
+                            <img src={logo} />
+                            <br />
+                            an open source project.
+                        </a>
+                    </Card.Content>
+                </Card>
+            </div>
+
+            {showCookieBanner && <CookieBanner isLoggedIn={true} />}
+        </>
     )
 }
 

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) {

src/components/_App_PostsList/index.jsx

@@ -8,63 +8,61 @@ 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'
 
 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) {
                                                 )}
                                             </Feed.Extra>
                                             <Feed.Meta>
-                                                <Feed.Like href="#" onClick={(e) => {likePost(e)}} id={'post_like_id_' + item.id} className={item.hasLiked}>
+                                                <Feed.Like
+                                                    href="#"
+                                                    onClick={(e) => {
+                                                        likePost(e)
+                                                    }}
+                                                    id={'post_like_id_' + item.id}
+                                                    className={item.hasLiked}
+                                                >
                                                     <ThumbsUp size={16} strokeWidth={2.5} />
                                                     <span>{getLikes(item.likes)}</span>
                                                 </Feed.Like>
-                                                <a href="#" className="comment-button" onClick={(e) => {commentOpener(e)}} id={'post_comment_id_' + item.id}>
+                                                <a
+                                                    href="#"
+                                                    className="comment-button"
+                                                    onClick={(e) => {
+                                                        commentOpener(e)
+                                                    }}
+                                                    id={'post_comment_id_' + item.id}
+                                                >
                                                     <MessageCircle size={16} strokeWidth={2.5} />
                                                     <span>{getComments(item.comments)}</span>
                                                 </a>
@@ -228,10 +240,9 @@ export default function PostsList(props) {
                                 </React.Fragment>
                             ))}
 
-                            <div style={{textAlign:'center',width:'100%'}}>
-                                <Pagination style={{marginTop:'20px'}} activePage={paginationPage} onPageChange={(event) => handlePaginationChange(event)} totalPages={totalPaginationPages} />
+                            <div style={{ textAlign: 'center', width: '100%' }}>
+                                <Pagination style={{ marginTop: '20px' }} activePage={paginationPage} onPageChange={(event) => handlePaginationChange(event)} totalPages={totalPaginationPages} />
                             </div>
-
                         </React.Fragment>
                     ) : (
                         <Feed.Event>
@@ -272,19 +283,11 @@ export default function PostsList(props) {
                 />
             )}
 
-            <Modal
-                onClose={() => setReportSuccessVisible(false)}
-                onOpen={() => setReportSuccessVisible(true)}
-                open={reportSuccessVisible}
-                size="mini"
-            >
+            <Modal onClose={() => setReportSuccessVisible(false)} onOpen={() => setReportSuccessVisible(true)} open={reportSuccessVisible} size="mini">
                 <Modal.Header>Post reported!</Modal.Header>
                 <Modal.Content>Thank you for your feedback about this post. We will review it immediately.</Modal.Content>
                 <Modal.Actions>
-                    <Button
-                        color="black"
-                        onClick={() => setReportSuccessVisible(false)}
-                    >
+                    <Button color="black" onClick={() => setReportSuccessVisible(false)}>
                         Dismiss
                     </Button>
                 </Modal.Actions>
@@ -300,10 +303,9 @@ export default function PostsList(props) {
             </Modal>
         </div>
     )
-
 }
 
 PostsList.propTypes = {
     user: PropTypes.string,
     group: PropTypes.any,
-}
+}

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)
             })
     }