Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

loader improved #89

Merged
merged 2 commits into from
Jun 3, 2024
Merged

loader improved #89

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
907dcd5
loader improved
NalinDalal Jun 2, 2024
bd74f21
Merge branch 'main' into main
NalinDalal Jun 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions frontend/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,18 +13,18 @@ import NonAuthenticatedRoute from "./components/NonAuthenticatedRoute";
import AuthenticatedRoute from "./components/AuthenticatedRoute";
import Profile from "./pages/Profile";
import React from "react";
import Loader from "./components/Loader";
import Loader from "./components/Loader"; //loader called here
// import axios from "axios";
// axios.defaults.baseURL = "http://localhost:3001/";

function App() {
return (
<BrowserRouter>
<RecoilRoot>
<React.Suspense fallback={<Loader/>}>
<React.Suspense fallback={<Loader />}>
<Navbar />

<div className="min-h-[80vh] mt-12 pt-12" >
<div className="min-h-[80vh] mt-12 pt-12">
<Routes>
<Route path="/app" element={<Home />} />
<Route path="/app/posts/:id" element={<Post />} />
Expand Down
68 changes: 38 additions & 30 deletions frontend/src/pages/Post.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import { useEffect, useState, useRef } from 'react';
import { useParams } from 'react-router-dom';
import axios, { AxiosError } from 'axios';
import { IPost } from '../types';
import DOMPurify from 'dompurify';
import { useEffect, useState, useRef } from "react";
import { useParams } from "react-router-dom";
import axios, { AxiosError } from "axios";
import { IPost } from "../types";
import DOMPurify from "dompurify";
import Loader from "../components/Loader";

const Post = () => {
const { id } = useParams<{ id: string }>();
Expand All @@ -15,17 +16,17 @@ const Post = () => {
author: {
id: "",
username: "",
email: ""
}
email: "",
},
});
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [isPreview, setIsPreview] = useState(false);
const ref = useRef<HTMLIFrameElement>(null);
const [height, setHeight] = useState('0px');
const [height, setHeight] = useState("0px");

const onLoad = () => {
setHeight(ref.current?.contentWindow?.document.body.scrollHeight + 'px');
setHeight(ref.current?.contentWindow?.document.body.scrollHeight + "px");
console.log(ref.current?.contentWindow?.document.body.scrollHeight);
};

Expand All @@ -40,7 +41,7 @@ const Post = () => {
error: string;
}>;

setError(axiosError.response?.data.error || 'Failed to fetch the post');
setError(axiosError.response?.data.error || "Failed to fetch the post");
setLoading(false);
}
};
Expand All @@ -54,36 +55,40 @@ const Post = () => {

const handleCopy = () => {
navigator.clipboard.writeText(post.codeSnippet);
alert('Code snippet copied to clipboard');
alert("Code snippet copied to clipboard");
};

const togglePreview = () => {
setIsPreview(!isPreview);
};

if (loading) {
return <div className="text-white">Loading...</div>;
return <Loader />;
}

if (error) {
return <div className="text-red-500 text-lg w-full text-center mt-5">{error}</div>;
return (
<div className="text-red-500 text-lg w-full text-center mt-5">
{error}
</div>
);
}

DOMPurify.addHook('uponSanitizeElement', (node, data) => {
if (data.tagName === 'img' || data.tagName === 'div') {
const src = node.getAttribute('src');
const style = node.getAttribute('style');
if (src && src.startsWith('http')) {
node.setAttribute('src', src);
DOMPurify.addHook("uponSanitizeElement", (node, data) => {
if (data.tagName === "img" || data.tagName === "div") {
const src = node.getAttribute("src");
const style = node.getAttribute("style");
if (src && src.startsWith("http")) {
node.setAttribute("src", src);
}
if (style && style.includes('url(')) {
node.setAttribute('style', style);
if (style && style.includes("url(")) {
node.setAttribute("style", style);
}
}
});

const sanitizedSnippet = DOMPurify.sanitize(post?.codeSnippet || '', {
ADD_ATTR: ['style', 'background'],
const sanitizedSnippet = DOMPurify.sanitize(post?.codeSnippet || "", {
ADD_ATTR: ["style", "background"],
});

return (
Expand All @@ -99,8 +104,7 @@ const Post = () => {
ref={ref}
onLoad={onLoad}
className="w-full h-full border-0"
srcDoc={
`<html class='flex w-full h-full'>
srcDoc={`<html class='flex w-full h-full'>
<head>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<script>
Expand All @@ -120,7 +124,7 @@ const Post = () => {
</html>`}
title="Preview"
sandbox="allow-scripts allow-same-origin"
style={{ minHeight: height, maxWidth: '100%' }}
style={{ minHeight: height, maxWidth: "100%" }}
/>
</div>
) : (
Expand All @@ -129,26 +133,30 @@ const Post = () => {
</pre>
)}
<div className="absolute top-2 right-3 flex space-x-2">
{isPreview ? null :
{isPreview ? null : (
<button
onClick={handleCopy}
className="px-2 py-1 bg-blue-600 hover:bg-blue-700 text-white text-sm rounded"
>
Copy
</button>}
</button>
)}
<button
onClick={togglePreview}
className="px-2 py-1 bg-blue-600 hover:bg-blue-700 text-white text-sm rounded"
>
{isPreview ? 'Show Code' : 'Preview'}
{isPreview ? "Show Code" : "Preview"}
</button>
</div>
</div>
<div className="mb-4">
<h3 className="text-xl font-semibold mb-2">Tags</h3>
<div className="flex flex-wrap gap-2">
{post.tags.map((tag, index) => (
<span key={index} className="inline-flex items-center px-2 py-1 bg-gray-700 text-sm rounded">
<span
key={index}
className="inline-flex items-center px-2 py-1 bg-gray-700 text-sm rounded"
>
{tag}
</span>
))}
Expand Down