integrated memory creation api

app/api/users/route.ts

@@ -0,0 +1,18 @@
+import { NextRequest, NextResponse } from "next/server";
+import connectDb from "@/app/util/connectDb";
+import { checkValidityOfToken } from "@/app/util/checkValidityOfToken";
+import USER from "@/app/models/userSchema";
+export async function GET(req:NextRequest) {
+    try {
+        const decodedToken = checkValidityOfToken(req);
+        if (!decodedToken.success) return NextResponse.json(decodedToken, { status: 401 });
+        const email = decodedToken?.email;
+        await connectDb();
+        const getUsers=await USER.find({isVerified:true}).select('-password -verifyOtp -verifyOtpExpiry')
+        const filterTheRequestedUser=getUsers.filter(user=>user.email!==email)
+        return NextResponse.json({success:true,message:'Fetched users successfully',users:filterTheRequestedUser},{status:200})
+    } catch (error) {
+        console.log(error)
+        return NextResponse.json({success:false,message:'Could not fetch users, try again!'},{status:500})
+    }
+}

app/register/page.tsx

@@ -26,14 +26,14 @@ async function registerUser(){
     toast.success(data.message)
     router.push('/verifyOtp')
     }
-    else if(data.error){
-      toast.error(data.error.issues[0].message)
+    else if(data.validation){
+      toast.error(data.validation.error.issues.map((issue:any)=>issue.message).join(', '))
     }
+
     else{
       toast.error(data.message)
     }
     setLoading(false)
-    console.log(data)
 }
   return (
     <section>

app/ui/CreateMemoryDialog.tsx

@@ -0,0 +1,142 @@
+'use client'
+import { Fragment, useRef, useState } from 'react'
+import { Dialog, Transition } from '@headlessui/react'
+import { ExclamationTriangleIcon } from '@heroicons/react/24/outline'
+import { CldUploadWidget } from 'next-cloudinary'
+import toast from 'react-hot-toast'
+import Image from 'next/image'
+export default function CreateMemoryDialog({open,setOpen}:any) {
+  const [title,setTitle]=useState('')
+  const [description,setDescription]=useState('')
+  const [coverPicUrl,setCoverPicUrl]=useState('')  
+
+  const cancelButtonRef = useRef(null)
+async function createMemory(){
+    const response=await fetch('/api/memories/createMemories',{
+        method:'POST',
+        headers:{
+            'Content-Type':'application/json'
+        },
+        body:JSON.stringify({
+            title,
+            description,
+            memoryCoverPic:coverPicUrl,
+            memoryParticipants:[],
+        })
+    })
+    const data=await response.json()
+    if(data.success){
+        toast.success(data.message)
+        setOpen(false)
+    }
+    else{
+        toast.error(data.message)
+    }
+}
+
+  return (
+    <Transition.Root show={open} as={Fragment}>
+      <Dialog className="relative z-10" initialFocus={cancelButtonRef} onClose={setOpen}>
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-10 w-screen overflow-y-auto">
+          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
+               <div className='p-5 text-black'>
+                <h1 className='font-bold text-2xl'>Create a Memory.</h1>
+                <form className='mt-4' onSubmit={(e)=>{
+                    e.preventDefault();
+                    createMemory()
+                }}>
+                <div className="w-full mb-2">
+      <label
+        className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+        htmlFor="title"
+      >
+        Title
+      </label>
+      <input
+        className="flex h-10 w-full rounded-md border border-black/30 bg-transparent px-3 py-2 text-sm placeholder:text-gray-600 focus:outline-none focus:ring-1 focus:ring-black/30 focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50"
+        type="text"
+        placeholder="Enter the memory title"
+        id="title"
+        value={title}
+        onChange={(e)=>setTitle(e.target.value)}
+      ></input>
+    </div>
+    <div className="w-full mb-2">
+      <label
+        className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+        htmlFor="description"
+      >
+        Description
+      </label>
+      <textarea
+        className="flex h-40 w-full rounded-md border border-black/30 bg-transparent px-3 py-2 text-sm placeholder:text-gray-600 focus:outline-none focus:ring-1 focus:ring-black/30 focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50"
+        placeholder="Enter the memory description"
+        id="description"
+        value={description}
+        onChange={(e)=>setDescription(e.target.value)}
+      ></textarea>
+    </div>
+    <div className="w-full mb-2">
+      <label
+        className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+        htmlFor="memoryCoverPic"
+      >
+        Upload Memory Cover Pic
+      </label>
+      <br />
+      <CldUploadWidget uploadPreset="memories" onSuccess={(results)=>{
+        setCoverPicUrl(results?.info?.secure_url)
+      }}>
+  {({ open,isLoading }) => {
+    return (
+        <>
+       {isLoading?
+          <button type='button' className='bg-blue-400 p-2 text-white rounded-md'>Loading...</button>
+       :
+       <button type='button' className='bg-blue-500 p-2 text-white rounded-md' onClick={()=>open()}>Upload Cover Photo</button>}
+        </>
+    );
+  }}
+</CldUploadWidget>
+    <div className='mt-2'>
+       {coverPicUrl && <Image src={coverPicUrl} height={50} width={100} alt={title}/>}
+    </div>
+    </div>
+
+    <div className='mt-4 text-end'>
+        <button type='button' onClick={()=>setOpen(false)} className='bg-transparent border-2 border-blue-500 p-2 text-black rounded-md mr-2'>Cancel</button>
+  <button type='submit' className='bg-blue-600 p-2 text-white rounded-md'>Create Memory</button>
+    </div>
+                </form>
+               </div>
+
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  )
+}

app/ui/Navbar.tsx

@@ -5,6 +5,7 @@ import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'
 import Image from 'next/image'
 import { useRouter } from "next/navigation";
 import toast from 'react-hot-toast'
+import CreateMemoryDialog from './CreateMemoryDialog'
 // import { CldUploadWidget } from 'next-cloudinary'
 function classNames(...classes:string[]) {
   return classes.filter(Boolean).join(' ')
@@ -14,6 +15,7 @@ function classNames(...classes:string[]) {
 export default function Navbar() {
     const router=useRouter()
     const [imageUrl,setImageUrl]=useState([])
+    const [open, setOpen] = useState(false)
 
   async function logout(){
     const response=await fetch('/api/auth/logout',{
@@ -29,6 +31,7 @@ export default function Navbar() {
     }
   }
   return (
+    <>
     <Disclosure as="nav" className="bg-gray-800">
       {({ open }) => (
         <>
@@ -73,7 +76,7 @@ export default function Navbar() {
       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
 <path strokeLinecap="round" strokeLinejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5" />
 </svg>
-<span className='font-bold ml-2'>Create a Memory</span>
+<span className='font-bold ml-2' onClick={()=>setOpen(true)}>Create a Memory</span>
 </button>        
 {/* <CldUploadWidget uploadPreset="memories" onSuccess={(results) => {
     setImageUrl((prevImages)=>[...prevImages,{fileName:results?.info?.original_filename, fileUrl:results?.info?.secure_url}])
@@ -166,5 +169,7 @@ export default function Navbar() {
         </>
       )}
     </Disclosure>
+    <CreateMemoryDialog open={open} setOpen={setOpen}/>
+    </>
   )
 }

app/verifyOtp/page.tsx

@@ -70,7 +70,6 @@ function Page() {
     } else {
       toast.error(data.message);
     }
-    console.log(data);
   };
 
   return (

next.config.mjs

@@ -1,7 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
     images:{
-        domains:['tailwindui.com','images.unsplash.com']
+        domains:['tailwindui.com','images.unsplash.com','res.cloudinary.com']
     }
 };
 

package.json

@@ -17,6 +17,7 @@
     "mongoose": "^8.4.0",
     "next": "14.2.3",
     "next-cloudinary": "^6.5.2",
+    "nodemailer": "^6.9.13",
     "react": "^18",
     "react-dom": "^18",
     "react-hot-toast": "^2.4.1"