From 0f521847ce3afacdf35981ec2974420555146825 Mon Sep 17 00:00:00 2001 From: devHarshShah Date: Wed, 9 Oct 2024 18:52:02 +0530 Subject: [PATCH 1/2] feat: implemeted proper url copying --- frontend/app/components/Navbar.tsx | 249 ++++++++++++++++++--------- frontend/app/components/Pastebin.tsx | 4 +- frontend/app/globals.css | 26 +-- 3 files changed, 170 insertions(+), 109 deletions(-) diff --git a/frontend/app/components/Navbar.tsx b/frontend/app/components/Navbar.tsx index e87e2f0..3587e71 100644 --- a/frontend/app/components/Navbar.tsx +++ b/frontend/app/components/Navbar.tsx @@ -1,22 +1,24 @@ -'use client'; -import { useState, useEffect } from 'react'; -import Image from 'next/image'; -import axios from 'axios'; +"use client"; +import { useState, useEffect } from "react"; +import Image from "next/image"; +import axios from "axios"; +import { toast, ToastContainer } from "react-toastify"; +import "react-toastify/dist/ReactToastify.css"; -const Navbar = ({ content, titleN }: { content: string, titleN:string }) => { +const Navbar = ({ content, titleN }: { content: string; titleN: string }) => { const [isOpen, setIsOpen] = useState(false); const [title, setTitle] = useState(titleN); const [isLoggedIn, setIsLoggedIn] = useState(false); - const [oAuthToken, setOAuthToken] = useState(''); + const [oAuthToken, setOAuthToken] = useState(""); const toggleMenu = () => { setIsOpen(!isOpen); }; useEffect(() => { - const token = localStorage.getItem('token') ?? ''; + const token = localStorage.getItem("token") ?? ""; setOAuthToken(token); - setIsLoggedIn(!!token); + setIsLoggedIn(!token); }, []); const handleTitleChange = (event: React.ChangeEvent) => { @@ -24,107 +26,190 @@ const Navbar = ({ content, titleN }: { content: string, titleN:string }) => { }; const handleSave = async () => { - const [fileName, extension] = title.split('.'); + const [fileName, extension] = title.split("."); const payload = { title: fileName, content, - extension: extension || '.txt', - url: fileName.replace(/\s+/g, '-').toLocaleLowerCase(), + extension: extension || ".txt", + url: fileName.replace(/\s+/g, "-").toLocaleLowerCase(), }; console.log(payload); try { - const response = await axios.post('http://localhost:8080/v1/pastebin/create', payload, { - headers: { - Authorization: `Bearer ${oAuthToken}`, - }, - }); - const generatedUrl = `http://localhost:8080/${fileName.replace(/\s+/g, '-').toLocaleLowerCase()}`; - console.log('Saved successfully:', response.data); - console.log('Generated URL:', generatedUrl); + const response = await axios.post( + "http://localhost:8080/v1/pastebin/create", + payload, + { + headers: { + Authorization: `Bearer ${oAuthToken}`, + }, + } + ); + const generatedUrl = `http://localhost:3000/pastebin/${fileName + .replace(/\s+/g, "-") + .toLocaleLowerCase()}`; + navigator.clipboard + .writeText(generatedUrl) + .then(() => { + toast.success("URL copied to clipboard"); + }) + .catch((err) => { + toast.error( +
+ Failed to copy URL: {generatedUrl} + +
+ ); + }); } catch (error) { - console.error('Error saving content:', error); + console.error("Error saving content:", error); } }; const handleLogout = async () => { try { - await axios.post('http://localhost:8080/v1/auth/logout', {}, { - headers: { - Authorization: `Bearer ${oAuthToken}`, - }, - }); - localStorage.removeItem('token'); + await axios.post( + "http://localhost:8080/v1/auth/logout", + {}, + { + headers: { + Authorization: `Bearer ${oAuthToken}`, + }, + } + ); + localStorage.removeItem("token"); setIsLoggedIn(false); - setOAuthToken(''); - console.log('Logged out successfully'); + setOAuthToken(""); + console.log("Logged out successfully"); } catch (error) { - console.error('Error logging out:', error); + console.error("Error logging out:", error); } }; return ( - + ) : ( +
+ +
+ )} + + )} + + ); }; -export default Navbar; \ No newline at end of file +export default Navbar; diff --git a/frontend/app/components/Pastebin.tsx b/frontend/app/components/Pastebin.tsx index f04ef98..6be920d 100644 --- a/frontend/app/components/Pastebin.tsx +++ b/frontend/app/components/Pastebin.tsx @@ -19,14 +19,14 @@ const Pastebin: React.FC = ({ initialContent = '', initialTitle =
- + {isMarkdown || extension == "md" ? ( +
+ {content} +
+ ) : ( + + )}