Merge pull request #45 from lumi-tip/development-lumi

♻️ refactor of some of the code regarding to the fetch (made it async) and 🐛 fix bug with linkedin cache saving url

Author: tommygonzaleza

pages/[token].js

@@ -16,9 +16,16 @@ const Share = ({ cert }) => {
     const { query } = router;
     const [strings,setStrings] = useState(translations[query.lang || "en"]);
     const [path, setPath] = useState("")
+
     useEffect(() => {
         setPath(window.location.href);
     },[])
+
+    const generateShareUrl = () => {
+        const timestamp = new Date().getTime();
+        return `${path}?cacheBuster=${timestamp}`;
+    };
+
     return (
         <>
 
@@ -51,7 +58,7 @@ const Share = ({ cert }) => {
                                     <Button className="w-100"
                                             icon="arrow"
                                             variant="primary"
-                                            href={`https://www.linkedin.com/sharing/share-offsite/?url=${path}`}
+                                            href={`https://www.linkedin.com/sharing/share-offsite/?url=${generateShareUrl()}`}
                                             target={"_blank"}>
                                         <Icon name="linked-in" size="md" />
                                         <Button.Label>{strings["Share on LinkedIn"]}</Button.Label>

pages/find/index.js

@@ -2,44 +2,44 @@ import React, { useEffect } from "react"
 import { Input } from "../../components/ui/form";
 import Button from "../../components/ui/Button";
 import Router from "next/router";
-import {Alert} from "react-bootstrap";
+import { Alert } from "react-bootstrap";
 
 const Find = () => {
     const [token, setToken] = React.useState("");
-    const [to, setTo] = React.useState("");
     const [loading, setLoading] = React.useState(false);
-    const [notify, setNotify] = React.useState({msg: "", type: ""});
+    const [notify, setNotify] = React.useState({ msg: "", type: "" });
     const [show, setShow] = React.useState(true);
 
-    const onSubmit = (e) =>{
-        e.preventDefault();
-        fetch(`${process.env.NEXT_PUBLIC_BC_HOST}/${token}`)
-        .then(res =>  res.json())
-        .then(data => {
-            if(token.length < 1 || data.status_code === 404 ) {
-            setNotify({msg:"Invalid Token or Certificate not found", type:"error"})
-            } else{
-                setLoading(true);
-                Router.push(`/${to}/${token}`)}
-            }
-        )
-        .catch(err => err)
+    const onSubmit = async (previewFormat) => {
+        try {
+            if(!token) return;
+            setLoading(true)
+
+            const res = await fetch(`${process.env.NEXT_PUBLIC_BC_HOST}/${token}`)
+            const data = res.json()
+
+            if(!res.ok || !data) throw new Error(data.detail)
+            Router.push(`/${previewFormat}/${token}`)
+        } catch (err) {
+            console.error("Error fetching data:", err);
+            setNotify({ msg: "An error occurred while fetching data", type: "error" });
+        } finally {
+            setLoading(false)
+        }
     }
 
     return <div className="container">
         <div className="row text-center">
             <div className="col-12">
                 <h1>Looking for a certificate?</h1>
             </div>
-            <div className="col-12">
-            <form  className="d-flex" onSubmit={(e) => onSubmit(e)}>
-                <Input type="text" required onChange={(e) => setToken(e.target.value)} placeholder="Certificate token" className="mr-1 ml-auto"/>
-                <Button disabled={loading} className="mr-1" type="submit" onClick={() => setTo("pdf")}>{ loading ? "Loading" : "Get certificate"}</Button>
-                <Button disabled={loading}  type="submit" onClick={() => setTo("preview")} className="mr-auto">{ loading ? "Loading" : "Get HTML"}</Button>
-            </form>
+            <div className="row mx-auto">
+                <Input type="text" required onChange={(e) => setToken(e.target.value)} placeholder="Certificate token" className="mr-1 ml-auto" />
+                <Button disabled={loading} className="mr-1" type="submit" onClick={() => onSubmit("pdf")}>{loading ? "Loading" : "Get certificate"}</Button>
+                <Button disabled={loading} type="submit" onClick={() => onSubmit("preview")} className="mr-auto">{loading ? "Loading" : "Get HTML"}</Button>
             </div>
         </div>
-        {notify.type == "error" ? <Alert onClose={setTimeout(()=> setShow(false),3000)} show={show} variant={"danger"} className="shadow-one mt-4 alert-position">{notify.msg}</Alert> : ""}
+        {notify.type == "error" ? <Alert onClose={setTimeout(() => setShow(false), 3000)} show={show} variant={"danger"} className="shadow-one mt-4 alert-position">{notify.msg}</Alert> : ""}
     </div>
 }
 export default Find;