Created
November 23, 2022 09:21
-
-
Save Iheanacho-ai/afb5a008c69d01861bd9d6bbd3ecd3d0 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import Head from 'next/head' | |
import { useState } from 'react' | |
import { getXataClient } from '../src/xata'; | |
export default function Home({products}) { | |
const [productName, setProductName] = useState() | |
const [productPrice, setProductPrice] = useState() | |
const [productReview, setProductReview] = useState() | |
const [productImage, setproductImage] = useState() | |
const openupWidget = () => { | |
window.cloudinary.openUploadWidget( | |
{ cloud_name: 'amarachi-2812', | |
upload_preset: 'xoskczw2' | |
}, | |
(error, result) => { | |
if (!error && result && result.event === "success") { | |
//we save the image URL | |
setproductImage(result.info.url) | |
} | |
} | |
).open(); | |
} | |
const submitProduct = () => { | |
fetch('/api/add-product', { | |
method: 'POST', | |
headers: { | |
'Content-Type': 'application/json' | |
}, | |
body: JSON.stringify({ | |
productName, | |
productPrice, | |
productReview, | |
productImage | |
}) | |
}).then(() => { | |
window.location.reload(); | |
}).catch((error)=> { | |
console.log(error) | |
}); | |
} | |
const deleteProduct = (id) => { | |
fetch("/api/delete-product", { | |
method: "POST", | |
headers: { | |
"Content-Type": "application/json", | |
}, | |
body: JSON.stringify({ id }), | |
}).then(() => { | |
window.location.reload(); | |
}).catch((error)=> { | |
console.log(error) | |
}); | |
} | |
return ( | |
<div className= 'background-remover'> | |
<Head> | |
<title>Create Next App</title> | |
<meta name="description" content="Background-remover" /> | |
<script src="https://upload-widget.cloudinary.com/global/all.js" type="text/javascript"/> | |
</Head> | |
<div className="image-submit-container mt-5 md:mt-0 md:col-span-2"> | |
<form action="#" method="POST"> | |
<div className="shadow sm:rounded-md sm:overflow-hidden"> | |
<div className="px-4 py-5 bg-white space-y-6 sm:p-6"> | |
<div> | |
<label htmlFor="about" className="block text-sm font-medium text-gray-700"> | |
Name | |
</label> | |
<div className="mt-1"> | |
<textarea | |
id="productName" | |
name="productName" | |
rows={1} | |
value= {productName} | |
onChange = {(e)=> setProductName(e.target.value)} | |
className="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 mt-1 block w-full sm:text-sm border border-gray-300 rounded-md" | |
/> | |
</div> | |
</div> | |
<div> | |
<label htmlFor="about" className="block text-sm font-medium text-gray-700"> | |
Price | |
</label> | |
<div className="mt-1"> | |
<textarea | |
id="productPrice" | |
name="productPrice" | |
rows={1} | |
value= {productPrice} | |
onChange = {(e)=> setProductPrice(e.target.value)} | |
className="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 mt-1 block w-full sm:text-sm border border-gray-300 rounded-md" | |
/> | |
</div> | |
</div> | |
<div> | |
<label htmlFor="about" className="block text-sm font-medium text-gray-700"> | |
Review | |
</label> | |
<div className="mt-1"> | |
<textarea | |
id="productReview" | |
name="productReview" | |
rows={3} | |
value= {productReview} | |
onChange = {(e)=> setProductReview(e.target.value)} | |
className="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 mt-1 block w-full sm:text-sm border border-gray-300 rounded-md" | |
/> | |
</div> | |
</div> | |
<button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" type="button" onClick= {openupWidget}> | |
Upload files | |
</button> | |
<div className="px-4 py-3 bg-gray-50 text-right sm:px-6"> | |
<button | |
type="submit" | |
onClick={submitProduct} | |
className="cursor inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" | |
> | |
Save | |
</button> | |
</div> | |
</div> | |
</div> | |
</form> | |
</div> | |
</div> | |
) | |
} | |
export const getServerSideProps = async () => { | |
const xata = getXataClient(); | |
const products = await xata.db["Product-Review"].getAll() | |
return { props: { products } } | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment