diff --git a/package.json b/package.json index 69dd341..c5f6307 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "version": "0.5.3", "private": true, "dependencies": { + "@dhaiwat10/react-link-preview": "^1.12.2", "@fortawesome/fontawesome-svg-core": "^1.2.34", "@fortawesome/free-solid-svg-icons": "^5.15.2", "@fortawesome/react-fontawesome": "^0.1.14", diff --git a/src/components/Feed/FeedCreatePostForm/index.jsx b/src/components/Feed/FeedCreatePostForm/index.jsx index fecfe74..0ad2eec 100644 --- a/src/components/Feed/FeedCreatePostForm/index.jsx +++ b/src/components/Feed/FeedCreatePostForm/index.jsx @@ -3,7 +3,7 @@ import './style.scss' import { Card, Input, Modal, Button, TextArea, Form, Popup } from 'semantic-ui-react' import PropTypes from 'prop-types' let linkify = require('linkifyjs') -require('linkifyjs/plugins/hashtag')(linkify) // optional +require('linkifyjs/plugins/hashtag')(linkify) let linkifyHtml = require('linkifyjs/html') import convertToMarkup from './convertToMarkup' diff --git a/src/components/Feed/FeedPostItem/index.jsx b/src/components/Feed/FeedPostItem/index.jsx index 88e32c5..53e58f2 100644 --- a/src/components/Feed/FeedPostItem/index.jsx +++ b/src/components/Feed/FeedPostItem/index.jsx @@ -1,33 +1,43 @@ import React, { useEffect, useState } from 'react' import './style.scss' -import { Feed, Modal, Loader, Button, Pagination } from 'semantic-ui-react' +import { Feed } from 'semantic-ui-react' import { BrowserRouter as Router, Switch, Route, Link, Redirect } from 'react-router-dom' import { ThumbsUp, MessageCircle, FileText, Flag, CornerDownRight, Share2 } 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 { LinkPreview } from '@dhaiwat10/react-link-preview'; +let linkify = require('linkifyjs') +require('linkifyjs/plugins/hashtag')(linkify) +let linkifyHtml = require('linkifyjs/html') import unknownAvatar from '../../../static/unknown.png' import CommentSection from '../FeedCommentSection' export default function PostItem(props) { - 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 [postUrls, setPostUrls] = useState([]); + + useEffect(() => { + let links = linkify.find(props.post.post_content.replace(/<[^>]+>/g, '')); + + let urls = []; + + links.forEach(link => { + if(link.type == "url") { + urls.push(link.href) + } + }); + + let uniqueUrls = [...new Set(urls)]; + + console.log(uniqueUrls); + setPostUrls(uniqueUrls); + }, []) const toggleLongText = (postId) => { document.querySelector('#post_' + postId + ' div.text').classList.toggle('collapsed') @@ -75,8 +85,15 @@ export default function PostItem(props) { setVisibleCommentSections(toggleComment(e, visibleCommentSections)) } + const linkFetcher = async (url) => { + const response = await fetch(`https://rlp-proxy.herokuapp.com/v2?url=${url}&test=true`); + const json = await response.json(); + console.log(json); + return json.metadata; + }; + return ( - + @@ -100,6 +117,9 @@ export default function PostItem(props) { 465 ? 'collapsed' : ''} text>
+ {postUrls.map((postUrl, index) => + + )} {props.post.post_content.length > 465 && (