Merge pull request #32 from RafaelBahiense/feature-website-preview

Feature website preview
RafaelBahiense · Jun 4, 2021 · cba950b · cba950b · vercel · Jun 4, 2021
2 parents 8a91683 + f185545
commit cba950b
Show file tree

Hide file tree

Showing 10 changed files with 148 additions and 16 deletions.
diff --git a/src/components/Hashtag/index.js b/src/components/Hashtag/index.js
@@ -1,6 +1,6 @@
 import axios from "axios";
 import { useHistory, useParams } from "react-router-dom";
-import React, { useEffect, useContext, useState } from "react";
+import React, { useRef, useEffect, useContext, useState } from "react";
 import useInterval from '@use-it/interval';
 
 import TimelineLayout from "../Timeline/TimelineLayout";
@@ -12,8 +12,9 @@ const Hashtag = () => {
     const { hashtag } = useParams();
 
     const history = useHistory();
-    const [refresh, setRefresh] = React.useState([]);
+    const [refresh, setRefresh] = useState([]);
     const [hasMore, setHasMore] = useState(true);
+    const initialRender = useRef(true);
 
     function refreshPosts() {
         setRefresh([...refresh]);
@@ -42,7 +43,7 @@ const Hashtag = () => {
             const request = axios.get(`https://mock-api.bootcamp.respondeai.com.br/api/v2/linkr/hashtags/${hashtag}/posts`, config)
             request.then((response) => {
                 posts
-                ? setPosts([...new Set([...response.data.posts, ...posts])])
+                ? setPosts([...response.data.posts, ...posts].filter((v,i,a)=>a.findIndex(t=>(t.id === v.id))===i))
                 : setPosts([...response.data.posts])
             }).catch(() => {
                 alert("Faça login novamente!");
@@ -55,6 +56,15 @@ const Hashtag = () => {
         loadPosts();
     }, [refresh]);
 
+    useEffect(() => {
+        if (initialRender.current) {
+          initialRender.current = false;
+        } else {
+            setPosts(null);
+            refreshPosts();
+        }
+    }, [hashtag]);
+
     useInterval(() => {
         refreshPosts();
     }, 15000)

diff --git a/src/components/Post/Modal.js b/src/components/Post/Modal.js
@@ -50,4 +50,4 @@ export default function ModalScreen(props) {
 			</Modal>
 		</div>
 	);
-}
+}
diff --git a/src/components/Post/Post.js b/src/components/Post/Post.js
@@ -16,6 +16,7 @@ import Comments from './Comments';
 import Message from '../general/Message';
 import LocationButton from "./LocationButton";
 import getYouTubeID from 'get-youtube-id';
+import Preview from "./Preview";
 
 export default function Post(props) {
 	const { text, link, refreshPosts, mylikes } = props;
@@ -26,6 +27,7 @@ export default function Post(props) {
 	const [newText, setNewText] = useState('');
 	const myPost = props.user.id === user.id;
 	const [modalIsOpen, setIsOpen] = useState(false);
+	const [previewIsOpen, setPreviewIsOpen] = useState(false);
 	const [comments, setComments] = useState(false);
 	const inputElement = useRef(null);
 	const reposted = props.repostedBy;
@@ -127,6 +129,14 @@ export default function Post(props) {
 				) : (
 					''
 				)}
+				{previewIsOpen 
+					? 	<Preview
+							width={props.width}
+							link={link}
+							setPreviewIsOpen={setPreviewIsOpen}
+							previewIsOpen={previewIsOpen}
+						/>
+					: null}
 				<div>
 					<Avatar id={props.user.id} avatar={props.user.avatar} />
 					<Likes {...props} mylikes={mylikes} />
@@ -192,7 +202,7 @@ export default function Post(props) {
 							</ReactHashtag>
 						)}
 					</PostContent>
-					<a href={link} target="_blank">
+					<a onClick={() => setPreviewIsOpen(true)}>
 						<PostLink youtubeId={youtubeId} {...props} />
 					</a>
 				</PostContentContainer>

diff --git a/src/components/Post/Preview.js b/src/components/Post/Preview.js
@@ -0,0 +1,79 @@
+import React from 'react';
+import Modal from 'react-modal';
+import styled from 'styled-components';
+import { AiOutlineClose } from 'react-icons/ai';
+
+export default function Preview(props) {
+
+    const { previewIsOpen, setPreviewIsOpen, link, width } = props;
+
+    const customStyles = {
+        content: {
+            background: "#333333",
+            position: "absolute",
+            top: `${width > 620 ? "5%" : 0}`,
+            left: `${width > 620 ? "5%" : 0}`,
+            width: `${width > 620 ? "90%" : "100%"}`,
+            height: `${width > 620 ? "90%" : "100%"}`,
+            background: "#333333",
+            "border-radius": "20px",
+            display: "flex",
+            "align-items": "center",
+            "flex-direction": "column",
+            "justify-content": "space-evenly",
+            "font-weight": "bold",
+            color: "#FFFFFF",
+            padding: "15px 20px 20px 21px",
+            outline: "none"
+        },
+        overlay: {zIndex: 1000}
+	};
+
+    Modal.setAppElement('.root');
+
+    function closeModal() {
+        setPreviewIsOpen(false);
+    }
+
+
+    return (
+        <div>
+            <Modal
+                isOpen={previewIsOpen}
+                onRequestClose={closeModal}
+                style={customStyles}
+            >
+                        <Buttons>
+                            <Open onClick={() => {
+                                                    window.open(link,'_blank'); closeModal();
+                                                 }
+                                          }
+                            >
+                                Open in new tab
+                            </Open>
+                            <AiOutlineClose style={{"font-size": "20px"}} onClick={closeModal}/>
+                        </Buttons>
+                        <iframe type={"text/html"} width={"100%"} height={"100%"} src={link}></iframe>
+            </Modal>
+        </div>
+    );
+}
+
+const Buttons = styled.div`
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+`;
+
+const Open = styled.button`
+    width: 138px;
+    height: 31px;
+    background: #1877F2;
+    border-radius: 5px;
+    border: none;
+    font-size: 14px;
+    color: #FFFFFF
+`;
+
diff --git a/src/components/Timeline/MyLikes.js b/src/components/Timeline/MyLikes.js
@@ -41,7 +41,7 @@ export default function MyLikes () {
             const request = axios.get(`https://mock-api.bootcamp.respondeai.com.br/api/v2/linkr/posts/liked`, config)
             request.then((response) => {
                 posts
-                ? setPosts([...new Set([...response.data.posts, ...posts])])
+                ? setPosts([...response.data.posts, ...posts].filter((v,i,a)=>a.findIndex(t=>(t.id === v.id))===i))
                 : setPosts([...response.data.posts])
             }).catch(() => {
                 alert("Faça login novamente!");

diff --git a/src/components/Timeline/MyPosts.js b/src/components/Timeline/MyPosts.js
@@ -41,7 +41,7 @@ export default function MyPosts() {
             const request = axios.get(`https://mock-api.bootcamp.respondeai.com.br/api/v2/linkr/users/${user.id}/posts`, config)
             request.then((response) => {
                 posts
-                ? setPosts([...new Set([...response.data.posts, ...posts])])
+                ? setPosts([...response.data.posts, ...posts].filter((v,i,a)=>a.findIndex(t=>(t.id === v.id))===i))
                 : setPosts([...response.data.posts])
             }).catch(() => {
                 alert("Faça login novamente!");

diff --git a/src/components/Timeline/Timeline.js b/src/components/Timeline/Timeline.js
@@ -40,7 +40,7 @@ export default function Timeline() {
             const request = axios.get(`https://mock-api.bootcamp.respondeai.com.br/api/v2/linkr/following/posts`, config)
             request.then((response) => {
                 otherUsersPosts
-                ? setOtherUsersPosts([...new Set([...response.data.posts.filter(post => post.user.id !== user.id), ...otherUsersPosts])])
+                ? setOtherUsersPosts([...response.data.posts.filter(post => post.user.id !== user.id), ...otherUsersPosts].filter((v,i,a)=>a.findIndex(t=>(t.id === v.id))===i))
                 : setOtherUsersPosts([...response.data.posts.filter(post => post.user.id !== user.id)])
             }).catch(() => {
                 alert("Faça login novamente!");

diff --git a/src/components/Timeline/TimelineLayout.js b/src/components/Timeline/TimelineLayout.js
@@ -127,11 +127,12 @@ export default function TimelineLayout(props) {
                 }
                 hasMore={props.hasMore}
                 pageStart={0}
-                threshold={50}
+                threshold={150}
               >
                 {posts.map((post, index) => (
                   <Post
                     key={index}
+                    width={width}
                     {...post}
                     refreshPosts={props.refreshPosts}
                     mylikes={props.mylikes}

diff --git a/src/components/Timeline/Trending.js b/src/components/Timeline/Trending.js
@@ -1,12 +1,13 @@
 import axios from "axios";
 import React, { useEffect, useContext } from "react";
 import { Link, useHistory } from "react-router-dom";
+import Loader from "react-loader-spinner";
 
 import styled from "styled-components";
 import UserContext from "../../contexts/UserContext";
 
 export default function Trending () {
-    const [trending, setTrending] = React.useState([]);
+    const [trending, setTrending] = React.useState(null);
     const {token} = useContext(UserContext);
     const [hashtag, setHashtag] = React.useState(null);
 
@@ -28,7 +29,7 @@ export default function Trending () {
         })
     },[]);
 
-    function editPost(e) {
+    function goToHashtag(e) {
         e.preventDefault();
         if (hashtag) {
             history.push(`/hashtag/${hashtag}`)
@@ -39,8 +40,21 @@ export default function Trending () {
         <TrendingWrapper>
             <Title>trending</Title>
             <Bar/>
-            {trending.map((hashtag, index) => <Link key={index} to={`/hashtag/${hashtag.name}`}><Hashtag>{`# ${hashtag.name}`}</Hashtag></Link> )}
-            <form onSubmit={(e) => editPost(e)}>
+            {trending 
+            ? trending.map((hashtag, index) =>  <Link key={index} to={`/hashtag/${hashtag.name}`}>
+                                                    <Hashtag>{`# ${hashtag.name}`}</Hashtag>
+                                                </Link> 
+                          )
+            :   <LoaderWrapper>
+                    <Loader
+                    type="Rings"
+                    color="#00BFFF"
+                    height={290}
+                    width={301}
+                    />
+                </LoaderWrapper>
+            }
+            <form onSubmit={(e) => goToHashtag(e)}>
                 <input placeholder={"type a hashtag"} 
                     value={hashtag}
                     onChange={(e) => setHashtag(e.target.value)}
@@ -121,4 +135,11 @@ const Hashtag = styled.p`
     font-weight: bold;
     font-size: 19px;
     color: #FFFFFF;
+`;
+
+const LoaderWrapper = styled.div`
+  width: 100%;
+  height: 290px;
+  text-align: center;
+
 `;
diff --git a/src/components/UserPosts/index.js b/src/components/UserPosts/index.js
@@ -1,6 +1,6 @@
 import axios from "axios";
 import { useHistory, useParams } from "react-router-dom";
-import React, { useEffect, useContext, useState } from "react";
+import React, { useEffect, useContext, useState, useRef } from "react";
 import useInterval from '@use-it/interval';
 
 import TimelineLayout from "../Timeline/TimelineLayout";
@@ -15,6 +15,7 @@ const UserPosts = () => {
     const history = useHistory();
     const [refresh, setRefresh] = React.useState([]);
     const [hasMore, setHasMore] = useState(true);
+    const initialRender = useRef(true);
 
     function refreshPosts() {
         setRefresh([...refresh]);
@@ -48,7 +49,7 @@ const UserPosts = () => {
                 const request = axios.get(`https://mock-api.bootcamp.respondeai.com.br/api/v2/linkr/users/${id}/posts`, config)
                 request.then((response) => {
                     posts
-                    ? setPosts([...new Set(...response.data.posts, ...posts)])
+                    ? setPosts([...response.data.posts, ...posts].filter((v,i,a)=>a.findIndex(t=>(t.id === v.id))===i))
                     : setPosts([...response.data.posts])
                 }).catch((res) => {
                     alert("Faça login novamente!");
@@ -63,7 +64,16 @@ const UserPosts = () => {
 
     useEffect(() => {
         loadPosts();
-    }, [id, refresh]);
+    }, [refresh]);
+
+    useEffect(() => {
+        if (initialRender.current) {
+          initialRender.current = false;
+        } else {
+            setPosts(null);
+            refreshPosts();
+        }
+    }, [id]);
 
     useInterval(() => {
         refreshPosts();
@@ -74,6 +84,7 @@ const UserPosts = () => {
                         user={user}
                         title={user ? `${user.username}'s posts` : "Loading user"}
                         userPost={true}
+                        refreshPosts={refreshPosts}
                         loadPosts={loadPosts}
                         hasMore={hasMore}
         />
-Original file line number
+Diff line change
@@ Expand Up / @@ -50,4 +50,4 @@ export default function ModalScreen(props) { @@
     			</Modal>
     		</div>
     	);
-    }
+    }