Displying response data into frontend

backend/controller/components.controller.js

@@ -156,8 +156,23 @@ const getComponentsBySearch = (req,res)=>{
 //Bring a particular components
 const getParticularComponent = async (req,res)=>{
   const {comp} = req.query;
-  componentDetails = await UserComponents.findOne({ folder_name: comp });
-  res.send(componentDetails);
+  try {
+    const data = await UserComponents.findOne({ folder_name: comp });
+    if(!data){
+        return res.send(jsonStatusError({ errorStatus : true, statusCode : "", message : 'Components not available', response : null, count : 0 }));
+    }
+    const user = await GitHubUser.findOne({ user_id: data.user_id.$oid });
+    if(!user){
+        return res.send(jsonStatusError({ errorStatus : true, statusCode : "", message : 'Fails in fetching components details Please contact admin Please visit contactus page for more details', response : null, count : 0 }));
+    }
+    const response = await readFilesInformations(data.categories, data.folder_name,{data, user}, (err, result) => {
+        err ? res.send(err):res.send(result);
+    });
+  } catch (error) {
+    res.send(error)
+  }
+
+
 }
 
 module.exports = {

backend/copy.env

@@ -0,0 +1,19 @@
+
+# //github secrets 
+GITHUB_CLIENT_ID=
+GITHUB_CLIENT_SECRET=
+
+#jtw secrets
+JWT_ACCESS_TOKEN = 
+REFRESH_TOKEN = 
+
+#Mongodb 
+MONGODB_CONNECTION_STRING=mongodb://172.28.0.2:27017/github_user
+
+# //discord
+DISCORD_ALERT = 
+DISCORD_MESSAGE = 
+DISCORD_APPROVAL = 
+
+#development
+ACCESS_TOKEN =""

backend/operations/errorhandlingOperations.js

@@ -17,7 +17,7 @@ function jsonStatusError({ errorStatus = true, statusCode = "", message = '', re
 // #TODO https://discordjs.guide/popular-topics/embeds.html#using-the-embed-constructor update discord messge style with this docs
     // Send the embed message via the provided function
 
-    sendDiscordWebhookMessage(message, "alert");
+    // sendDiscordWebhookMessage(message, "alert");
 
     return data;
 }

ui/src/App.jsx

@@ -8,6 +8,7 @@ import Componenets from './screens/Components';
 import Editor from './screens/Editor';
 import Profile from './screens/Profile';
 import ContributeNewComp from './screens/ContributeNew';
+import ViewComponent from './screens/ViewComponent';
 
 
 function App() {
@@ -42,6 +43,9 @@ function App() {
           {/* component routeing end  */}
           <Route path="/edit" element={<Editor />} />
           <Route path="/profile" element={<Profile />} />
+          {/* Dynamic routing for viewing a ciomponent details  */}
+          <Route path="/view" element={<ViewComponent />} />
+
         </Routes>
       </Router>
     </div>

ui/src/components/CodeEditor.jsx

@@ -86,11 +86,11 @@ const OutputScreen = ({ html, css, js }) => {
   );
 };
 
-const WebEditor = () => {
+const WebEditor = (props) => {
 
-  const [html, setHtml] = useState(`<div> we-lcome to agricreations</div>`);
-  const [css, setCss] = useState('div { color: blue; }');
-  const [js, setJs] = useState('console.log("Hello, CodePen Clone!");');
+  const [html, setHtml] = useState(props.html);
+  const [css, setCss] = useState(props.css);
+  const [js, setJs] = useState(props.js);
 
   const handleHtmlChange = (newValue) => {
     setHtml(newValue);

ui/src/screens/ContributeNew.jsx

@@ -7,8 +7,12 @@ const ContributeNewComp = ()=>{
     return(
         <>
       <Nav />
-           <CodeEditor />
-       <Footer />    
+           <CodeEditor
+           html = {"testing"}
+           css = {"css"}
+           js = {"js"}
+           />
+       <Footer /> 
         </>
     )
 }

ui/src/screens/ViewComponent.jsx

@@ -0,0 +1,51 @@
+
+import { useEffect, useState } from 'react';
+import CodeEditor from '../components/CodeEditor';
+import Nav from '../components/Nav';
+import Footer from '../components/Footer';
+
+
+const ViewComponent = ()=>{
+
+    const [componentDetails, setComponentDetails] = useState({});
+
+    async function fetchComponentDetails(){
+        try {
+            const response = await fetch('http://localhost:4000/components/view?comp=moovendhan_amazing_tooltip4');
+            if(!response.ok){
+                throw new Error("Error Fetching data");
+            }
+            const data = await response.json();
+            console.log(data);
+            setComponentDetails(data.post_details);
+            return data;
+        } catch (error) {
+            console.error(`Error Fetching Data ${error}`)
+        }
+    }
+
+    // alert(JSON.stringify(componentDetails.html));
+
+    useEffect(()=>{
+        fetchComponentDetails();
+    },[])
+
+    return(
+        <>
+      <Nav />
+
+        {/* //Validating and send props to components if data fetched */}
+         {Object.keys(componentDetails).length > 0 && (
+                <CodeEditor
+                    html={componentDetails.html}
+                    css={componentDetails.css}
+                    js={componentDetails.js}
+                />
+            )}
+      <Footer />
+
+        </>
+    )
+}
+
+export default ViewComponent;