import "@styles/form.css" import "@styles/global.css" import GoogleDrivePicker from "google-drive-picker"; import { useEffect, useState } from "react"; import { useSession } from "next-auth/react"; const ImgCard = ({imgId,imagesIdList, handleDeleteImage}) => { // let imageUrl= "https://drive.google.com/uc?export=view&id=" + imgId; let imageUrl= "https://drive.google.com/uc?export=view&id=" + imgId; return( <> <div className="imageCard"> <div className="delete-button" onClick={() => {handleDeleteImage(imgId, imagesIdList)}}> <div className="bin-button"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 69 14" className="svgIcon bin-top" > <g clipPath="url(#clip0_35_24)"> <path fill="black" d="M20.8232 2.62734L19.9948 4.21304C19.8224 4.54309 19.4808 4.75 19.1085 4.75H4.92857C2.20246 4.75 0 6.87266 0 9.5C0 12.1273 2.20246 14.25 4.92857 14.25H64.0714C66.7975 14.25 69 12.1273 69 9.5C69 6.87266 66.7975 4.75 64.0714 4.75H49.8915C49.5192 4.75 49.1776 4.54309 49.0052 4.21305L48.1768 2.62734C47.3451 1.00938 45.6355 0 43.7719 0H25.2281C23.3645 0 21.6549 1.00938 20.8232 2.62734ZM64.0023 20.0648C64.0397 19.4882 63.5822 19 63.0044 19H5.99556C5.4178 19 4.96025 19.4882 4.99766 20.0648L8.19375 69.3203C8.44018 73.0758 11.6746 76 15.5712 76H53.4288C57.3254 76 60.5598 73.0758 60.8062 69.3203L64.0023 20.0648Z" ></path> </g> <defs> <clipPath id="clip0_35_24"> <rect fill="white" height="14" width="69"></rect> </clipPath> </defs> </svg> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 69 57" className="svgIcon bin-bottom" > <g clipPath="url(#clip0_35_22)"> <path fill="black" d="M20.8232 -16.3727L19.9948 -14.787C19.8224 -14.4569 19.4808 -14.25 19.1085 -14.25H4.92857C2.20246 -14.25 0 -12.1273 0 -9.5C0 -6.8727 2.20246 -4.75 4.92857 -4.75H64.0714C66.7975 -4.75 69 -6.8727 69 -9.5C69 -12.1273 66.7975 -14.25 64.0714 -14.25H49.8915C49.5192 -14.25 49.1776 -14.4569 49.0052 -14.787L48.1768 -16.3727C47.3451 -17.9906 45.6355 -19 43.7719 -19H25.2281C23.3645 -19 21.6549 -17.9906 20.8232 -16.3727ZM64.0023 1.0648C64.0397 0.4882 63.5822 0 63.0044 0H5.99556C5.4178 0 4.96025 0.4882 4.99766 1.0648L8.19375 50.3203C8.44018 54.0758 11.6746 57 15.5712 57H53.4288C57.3254 57 60.5598 54.0758 60.8062 50.3203L64.0023 1.0648Z" ></path> </g> <defs> <clipPath id="clip0_35_22"> <rect fill="white" height="57" width="69"></rect> </clipPath> </defs> </svg> </div> </div> <img className="drive-imgCard" src={imageUrl} alt="No inmage" ></img> </div> </> ) }; const AddImage = ({handlePickerOpen}) => { return( <div className="add-img" onClick={()=> {handlePickerOpen()}}> <span className="button__icon"><svg className="svg" fill="none" height="24" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><line x1="12" x2="12" y1="5" y2="19"></line><line x1="5" x2="19" y1="12" y2="12"></line></svg></span> <span>Add Images</span> </div> ) } const ImgCardList = ({PostImage, setPostImage ,handlePickerOpen}) => { const [imagesIdList, setimagesIdList] = useState(['']); // const [flag , setFlag] = useState(false) useEffect(() => { setimagesIdList(PostImage.split('@')) },[PostImage]) useEffect(() => { let tempStr = '' for(let i=0;i<imagesIdList.length-1;i++){ tempStr+=imagesIdList[i]+'@'; } setPostImage(tempStr) console.log() },[imagesIdList]) const handleDeleteImage = (imgId, imagesIdList) => { setimagesIdList(imagesIdList.filter((id) => id!=imgId)); } return( <> <div className="drive-selected-imgContainer"> { imagesIdList.map((id,index) => { if (id != '') return <ImgCard key={index} imgId={id} imagesIdList= {imagesIdList} handleDeleteImage = {handleDeleteImage}/> else return <AddImage handlePickerOpen={handlePickerOpen} />; }) } </div> </> ) }; const Form = ({type, Post, setPost, Submitting, handleSubmit}) => { const [PostImage, setPostImage] = useState(''); const [openPicker] = GoogleDrivePicker(); const {data : session} = useSession(); const updatePermissions = async (fileId, accessToken) => { try { const permission = { type: 'anyone', // Grant permission to anyone with the link role: 'reader', }; const response = await fetch(`https://www.googleapis.com/drive/v3/files/${fileId}/permissions`, { method: 'POST', headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${accessToken}`, }, body: JSON.stringify(permission), }); if (!response.ok) { throw new Error(`HTTP error! Status: ${response.status}`); } } catch (error) { console.error('Error updating public link permissions:', error.message); } }; const handlePickerOpen = () => { try{ openPicker({ clientId: '1046390199840-ss8fr2stjae9khsem3ph5j226n19hhvc.apps.googleusercontent.com', developerKey: 'AIzaSyCX4g-jfw52G5erMRn2QRaKlxpgqOCC5D0', viewId: "DOCS", token: session.token.access_token, showUploadView: true, showUploadFolders: false, supportDrives: true, multiselect: true, callbackFunction: (data) => { if (data.action === "cancel") { console.log("User clicked cancel/close button"); } else if (data.docs && data.docs.length > 0) { // (e) => setPost({ ...Post, image: e.target.value}) if(data.action === 'picked'){ data.docs.map(async (selected) => { await updatePermissions(selected.id,session.token.access_token) }) let temp = PostImage; data.docs.map((selected) => { temp += selected.id+'@' }) setPostImage(temp) } } } }); }catch(err){ console.log(err); } }; useEffect(() => { setPostImage(Post.image) },[Post]) useEffect(() => { Post.image = PostImage; setPost(Post) },[PostImage]) return ( <div className="form-container"> <p> Don't throw away your books and stationery, swap them with others. 📚✏️ </p> <h1>{type} Product</h1> <div className="sell-form"> <form action="" onSubmit={ handleSubmit }> <div className="input-container" style={{flexDirection: "column", gap: "1rem"}}> <div className="uploaded-image" style={{padding :"1rem"}}> <ImgCardList PostImage={PostImage} setPostImage = {setPostImage} handlePickerOpen= {handlePickerOpen} /> </div> {/* <div className="img-button" onClick={()=>{handlePickerOpen()}}> <span className="button__text">Add Images</span> <span className="button__icon"><svg className="svg" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><line x1="12" x2="12" y1="5" y2="19"></line><line x1="5" x2="19" y1="12" y2="12"></line></svg></span> </div> */} {/* <input id="input-container-imgUpload" type="file" accept="image/*" /> */} </div> <div className="input-container"> <label >Name of the Product* </label> <input value={Post.NOP} onChange={(e) => setPost({ ...Post, NOP: e.target.value})} type="text" id="" placeholder="Name of Product" required/> </div> <div className="input-container"> <label >Select Type* </label> <select value={Post.type} onChange={(e) => setPost({ ...Post, type: e.target.value})} id="" required> <option value="">Select</option> <option value="Book">Book</option> <option value="Stationary">Stationary</option> <option value="Other">Other</option> </select> </div> <div className="input-container"> <label >Description* </label> <textarea value={Post.desc} onChange={(e) => setPost({ ...Post, desc: e.target.value})} type="text" id="" placeholder="Describe the Condition of the Product" required></textarea> </div> <div className="input-container"> <label >Expected Price* </label> <input value={Post.price} onChange={(e) => setPost({ ...Post, price: e.target.value})} type="number" id="" placeholder="Price" required/> </div> <div className="form-submit"> <div className="form-submit-cancel button"> Cancel </div> <button className="button sell-form-button" disabled={Submitting} type="submit">{Submitting? `${type}...`: type}</button> </div> </form> </div> </div> ) } export default Form