Feat: Admin managing posts feature added successfully issue 339

admin/package.json

@@ -11,14 +11,17 @@
   },
   "dependencies": {
     "axios": "^1.7.2",
+    "dompurify": "^3.1.6",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hot-toast": "^2.4.1",
     "react-icons": "^5.2.1",
     "react-router-dom": "^6.24.0",
+    "react-switch": "^7.0.0",
     "recoil": "^0.7.7"
   },
   "devDependencies": {
+    "@types/dompurify": "^3.0.5",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^7.13.1",

admin/src/App.tsx

@@ -10,6 +10,7 @@ import Profile from "./pages/Profile";
 import Users from "./pages/Users";
 import Posts from "./pages/Posts";
 import { Toaster } from "react-hot-toast";
+import UpdatePost from "./components/UpdatePost";
 // import axios from "axios";
 // axios.defaults.baseURL = "http://localhost:3001/";
 
@@ -59,6 +60,14 @@ function App() {
                 </AuthenticatedRoute>
               }
             />
+            <Route
+              path="/admin/update-post/:postId"
+              element={
+                <AuthenticatedRoute>
+                  <UpdatePost />
+                </AuthenticatedRoute>
+              }
+            />
             <Route path="*" element={<PageNotFound />} />
           </Routes>
           <Toaster/>

admin/src/components/CodeEditorAndPreview.tsx

@@ -0,0 +1,95 @@
+import { useState } from 'react';
+import PostPreview from "../components/PostPreview";
+import Switch from "react-switch";
+import toast from "react-hot-toast";
+
+type Props = {
+  codeSnippet: string;
+  jsCodeSnippet: string;
+  setCodeSnippet: (codeSnippet: string) => void;
+  setJsCodeSnippet: (jsCodeSnippet: string) => void;
+};
+
+function CodeEditorAndPreview({
+  codeSnippet,
+  jsCodeSnippet,
+  setCodeSnippet,
+  setJsCodeSnippet
+}: Props) {
+  const [isPreviewMode, setIsPreviewMode] = useState(false);
+
+  const handleToggle = () => {
+    setIsPreviewMode(!isPreviewMode);
+  };
+
+  const handleTextAreaClick = () => {
+    if (isPreviewMode) {
+      toast('Please disable preview mode to edit the code snippet', {
+        icon: '🚫',
+      });
+    }
+  };
+
+
+  return (
+    <div>
+      <div>
+        <label htmlFor="codeSnippet" className="block text-gray-700 text-sm font-semibold">
+          HTML
+        </label>
+        <textarea
+          id="codeSnippet"
+          value={codeSnippet}
+          onChange={(e) => setCodeSnippet(e.target.value)}
+          className="mt-1 shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+          readOnly={isPreviewMode}
+          onClick={handleTextAreaClick}
+          rows={5}
+        ></textarea>
+      </div>
+      <div>
+        <label htmlFor="jsCodeSnippet" className="block text-gray-700 text-sm font-semibold">
+          Javascript
+        </label>
+        <textarea
+          id="jsCodeSnippet"
+          value={jsCodeSnippet}
+          onChange={(e) => setJsCodeSnippet(e.target.value)}
+          className="mt-1 shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+          readOnly={isPreviewMode}
+          onClick={handleTextAreaClick}
+          rows={4}
+        ></textarea>
+      </div>
+      <div className="flex items-center mt-2 mb-2">
+        <label className="flex items-center">
+          <Switch
+            onChange={handleToggle}
+            checked={isPreviewMode}
+            offColor="#888"
+            onColor="#080"
+            uncheckedIcon={false}
+            checkedIcon={false}
+            disabled={codeSnippet == ""}
+            height={16}
+            width={32}
+            className="mr-2"
+          />
+          <span className="text-gray-700 text-sm font-semibold">
+            {isPreviewMode ? 'Edit Code' : 'Preview Component'}
+          </span>
+        </label>
+      </div>
+      {isPreviewMode ? (
+        <PostPreview
+          jsCodeSnippet={jsCodeSnippet}
+          codeSnippet={codeSnippet}
+        />
+      ) : null}
+
+    </div>
+  );
+
+}
+
+export default CodeEditorAndPreview;

admin/src/components/PostPreview.tsx

@@ -0,0 +1,88 @@
+import { useEffect, useRef, useState } from "react";
+import DOMPurify from "dompurify"
+
+function PostPreview({
+  codeSnippet,
+  jsCodeSnippet,
+}: {
+  codeSnippet: string;
+  jsCodeSnippet: string;
+}) {
+  const ref = useRef<HTMLIFrameElement>(null);
+  const [height, setHeight] = useState("100px");
+
+  useEffect(() => {
+    const handleResize = (event: MessageEvent) => {
+      if (event.data.type === "setHeight") {
+        setHeight(event.data.height + "px");
+      }
+    };
+
+    window.addEventListener("message", handleResize);
+    return () => {
+      window.removeEventListener("message", handleResize);
+    };
+  }, []);
+
+  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);
+      }
+    }
+  });
+
+  const sanitizedSnippet = DOMPurify.sanitize(codeSnippet || "", {
+    ADD_ATTR: ["style", "background"],
+  });
+
+  return (
+    <div className="p-4 text-[#000435] bg-white dark:text-white dark:bg-[#fff] z-0 overflow-hidden rounded border-2 border-sky-400">
+      <iframe
+        ref={ref}
+        className="w-full border-0"
+        srcDoc={getPreviewTemplate(sanitizedSnippet, jsCodeSnippet)}
+        title="Preview"
+        sandbox="allow-scripts allow-modals"
+        style={{ minHeight: height, maxWidth: "100%" }}
+      />
+    </div>
+  );
+}
+
+function getPreviewTemplate(sanitizedSnippet: string, jsCodeSnippet: string) {
+  return `
+      <!DOCTYPE html>
+      <html class='flex w-full h-full'>
+        <head>
+          <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
+          <script>
+            document.addEventListener('DOMContentLoaded', function() {
+              const setHeight = () => {
+                const height = document.body.scrollHeight;
+                window.parent.postMessage({ type: 'setHeight', height }, '*');
+              };
+
+              setHeight();
+
+              const observer = new MutationObserver(setHeight);
+              observer.observe(document.body, { childList: true, subtree: true });
+
+              window.addEventListener('beforeunload', () => observer.disconnect());
+            });
+          </script>
+        </head>
+        <body class='w-full h-full flex items-center justify-center min-w-full min-h-full'>
+          <div class='w-full h-full p-6'>${sanitizedSnippet}</div>
+          ${jsCodeSnippet ? `<script defer>${jsCodeSnippet}</script>` : ""}
+        </body>
+      </html>
+    `;
+}
+
+export default PostPreview;