Added url support

Somnath-Chattaraj · Oct 29, 2024 · 146f326 · 146f326
1 parent 65fe60a
commit 146f326
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 6 deletions.
diff --git a/frontend/src/components/Posts.jsx b/frontend/src/components/Posts.jsx
@@ -17,13 +17,12 @@ import InfiniteScroll from "react-infinite-scroll-component";
 import { Navigate, useNavigate } from "react-router-dom";
 import SearchBar from "./SearchBar";
 import { useUser } from "../hook/useUser";
-import Loader from "./loading";
-import { InfinitySpin } from "react-loader-spinner";
 import { gsap } from "gsap";
 import { useRef } from "react";
 import parse from "html-react-parser";
 import DOMPurify from "dompurify";
 import Linkify from "linkify-react";
+import "../styles/link.css";
 
 const Posts = () => {
   const [posts, setPosts] = useState([]);
@@ -38,6 +37,19 @@ const Posts = () => {
   const toast = useToast();
   const fetchInitialized = useRef(false);
 
+  const options = {
+    attributes: {
+      target: "_blank",
+      rel: "noopener noreferrer",
+    },
+    className: "custom-link",
+    defaultProtocol: "https",
+    format: (value) => value,
+    formatHref: (href) => href,
+    tagName: "a",
+    validate: true,
+  };
+
   const fetchPosts = async (pageParam = page) => {
     try {
       let collegeId = selectedCommunity === "all" ? null : selectedCommunity;
@@ -226,7 +238,9 @@ const Posts = () => {
                 {post.User.username}
               </Text>
               <Text>
-                <Linkify>{parse(DOMPurify.sanitize(post.content))}</Linkify>
+                <Linkify options={options}>
+                  {parse(DOMPurify.sanitize(post.content))}
+                </Linkify>
               </Text>
 
               <Flex justify="space-between" align="center" mt={4}>

diff --git a/frontend/src/components/SinglePost.jsx b/frontend/src/components/SinglePost.jsx
@@ -23,9 +23,9 @@ import { gsap } from "gsap";
 import axios from "axios";
 import CreateComment from "./CreateComment";
 import { useUser } from "../hook/useUser";
-import { InfinitySpin } from "react-loader-spinner";
 import DeleteConfirmation from "./DeleteConfirmation";
 import { FaTrash } from "react-icons/fa";
+import "../styles/link.css";
 
 const SinglePost = () => {
   const { id } = useParams();
@@ -43,6 +43,19 @@ const SinglePost = () => {
   const toast = useToast();
   const navigate = useNavigate();
 
+  const options = {
+    attributes: {
+      target: "_blank",
+      rel: "noopener noreferrer",
+    },
+    className: "custom-link",
+    defaultProtocol: "https",
+    format: (value) => value,
+    formatHref: (href) => href,
+    tagName: "a",
+    validate: true,
+  };
+
   useEffect(() => {
     const fetchPost = async () => {
       try {
@@ -244,7 +257,9 @@ const SinglePost = () => {
           </Box>
         </Flex>
         <Text fontSize="md" mt={4} color="gray.300">
-          <Linkify>{parse(DOMPurify.sanitize(post.content))}</Linkify>
+          <Linkify options={options}>
+            {parse(DOMPurify.sanitize(post.content))}
+          </Linkify>
         </Text>
         <Flex w="full" justify="space-between" align="center" mt={4}>
           <Flex align="center">
@@ -328,7 +343,7 @@ const SinglePost = () => {
                   </Text>
                 </Flex>
                 <Text fontSize="large" color="gray.300" mb={2} paddingTop={2.5}>
-                  <Linkify>{comment.content}</Linkify>
+                  <Linkify options={options}>{comment.content}</Linkify>
                 </Text>
                 {comment.User.user_id === userDetails.user_id && (
                   <Flex justify="flex-end" mt={2}>

diff --git a/frontend/src/styles/link.css b/frontend/src/styles/link.css
@@ -0,0 +1,8 @@
+.custom-link {
+  color: #4a90e2;
+  text-decoration: none;
+}
+
+.custom-link:hover {
+  text-decoration: underline;
+}