Remove unnessary imports

components/AddAnimation.tsx

@@ -6,10 +6,11 @@ import { useDropzone } from 'react-dropzone';
 import TextField from './common/textFields/TextField'
 import { MultiSelect } from "react-multi-select-component";
 import { GET_USERS } from '../graphql/query/GetUsers'
-import { useLazyQuery } from '@apollo/client'
+import { useLazyQuery, useMutation } from '@apollo/client'
 import { GET_TAGS } from '../graphql/query/GetTags'
 import axios from 'axios'
 import { useRouter } from 'next/router';
+import { CREATETAG } from '../graphql/mutation/CreateTag';
 
 interface Props {
     setOpen: () => void,
@@ -19,6 +20,7 @@ interface Props {
 const AddAnimation = ({ setOpen, refetch }: Props) => {
     const [getUsers, { data: queryData, loading: queryLoading }] = useLazyQuery(GET_USERS)
     const [getTags, { data: tagsData, loading: tagsLoading }] = useLazyQuery(GET_TAGS)
+    const [createTag, { data }] = useMutation(CREATETAG)
     const [tags, setTags] = useState([]);
     const [tagOptions, setTagOptions] = useState([])
     const { acceptedFiles, getRootProps, getInputProps } = useDropzone({ multiple: false, accept: '.json', maxFiles: 1 });
@@ -77,6 +79,14 @@ const AddAnimation = ({ setOpen, refetch }: Props) => {
 
     }
 
+    const onCreateTag = async (value: any) => {
+        const res = await createTag({ variables: { name: value } })
+        return {
+            label: res?.data?.createTag?.name,
+            value: res?.data?.createTag?.id
+        }
+    }
+
     return (
         <div>
             <h2 className='mb-10'>Add Lottie</h2>
@@ -90,6 +100,8 @@ const AddAnimation = ({ setOpen, refetch }: Props) => {
                         value={tags}
                         onChange={setTags}
                         labelledBy={"Tags"}
+                        isCreatable={true}
+                        onCreateOption={onCreateTag}
                     />
                 </div>
                 <TextField

components/EditAnimation.tsx

@@ -0,0 +1,136 @@
+/* eslint-disable react/no-unescaped-entities */
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, { ChangeEvent, SyntheticEvent, useEffect, useState } from 'react'
+import Button from './common/buttons/Button'
+import { useDropzone } from 'react-dropzone';
+import TextField from './common/textFields/TextField'
+import { MultiSelect } from "react-multi-select-component";
+import { GET_USERS } from '../graphql/query/GetUsers'
+import { useLazyQuery } from '@apollo/client'
+import { GET_TAGS } from '../graphql/query/GetTags'
+import axios from 'axios'
+import { useRouter } from 'next/router';
+
+
+interface Props {
+    setOpen: () => void,
+    animation: any
+}
+
+const EditAnimation = ({ animation, setOpen }: Props) => {
+    const [getUsers, { data: queryData, loading: queryLoading }] = useLazyQuery(GET_USERS)
+    const [getTags, { data: tagsData, loading: tagsLoading }] = useLazyQuery(GET_TAGS)
+    const [tags, setTags] = useState([]);
+    const [tagOptions, setTagOptions] = useState([])
+    const [file, setFile] = useState()
+    const { acceptedFiles, getRootProps, getInputProps } = useDropzone({ multiple: false, accept: '.json', maxFiles: 1 });
+    const router = useRouter()
+    const id = router?.query?.id
+
+    const [state, setState] = useState({
+        title: '',
+        description: '',
+    })
+
+    const onChange = (e: ChangeEvent<HTMLInputElement & HTMLSelectElement>) => {
+        const { name, value } = e.target
+        setState({ ...state, [name]: value })
+    }
+
+    useEffect(() => {
+
+        getTags()
+        getUsers()
+    }, [])
+
+    useEffect(() => {
+        if (tagsData?.getTags?.length) {
+            setTagOptions(tagsData?.getTags?.map((tag: any) => { return { label: tag.name, value: tag.id } }))
+        }
+    }, [tagsData?.getTags])
+
+    useEffect(() => {
+        if (animation) {
+            const tgOptions = animation.TagOnAnimation.map((tg: any) => { return { label: tg.tag.name, value: tg.tag.id } })
+            setTags(tgOptions)
+            setState({
+                description: animation.description,
+                title: animation.title
+            })
+            setFile(animation.path);
+
+        }
+    }, [animation])
+
+
+    const onSubmit = async (e: SyntheticEvent) => {
+        e.preventDefault()
+        if (!tags.length || (!acceptedFiles.length && !file)) return alert("Tags or file are required")
+
+        const formatedTags = tags.map((tg: any) => Number(tg.value))
+
+        const formData = new FormData()
+        if (acceptedFiles.length)
+            formData.append("file", acceptedFiles[0])
+        formData.append("title", state.title)
+        formData.append("description", state.description)
+        formData.append("animationId", animation.id)
+        formData.append("tags", JSON.stringify(formatedTags))
+
+        axios.put("/api/animation", formData)
+            .then(res => {
+                console.log('res', res.data)
+                setTimeout(() => {
+                    window.location.reload()
+                }, 300)
+                alert('Animation updated successfully')
+                setOpen()
+
+            })
+            .catch(err => console.log(err))
+
+    }
+
+    return (
+        <div>
+            <h2 className='mb-10'>Edit Lottie</h2>
+            <form className='space-y-5' onSubmit={onSubmit}>
+                <div>
+                    <label htmlFor={"tags"} className="block text-sm font-medium text-gray-700 mb-1">
+                        Tags
+                    </label>
+                    <MultiSelect
+                        options={tagOptions}
+                        value={tags}
+                        onChange={setTags}
+                        labelledBy={"Tags"}
+                    />
+                </div>
+                <TextField
+                    label="Title"
+                    name="title"
+                    required={true}
+                    value={state.title}
+                    onChange={onChange}
+                />
+                <TextField
+                    label="Description"
+                    name="description"
+                    multiline={true}
+                    value={state.description}
+                    rows={5}
+                    onChange={onChange}
+                />
+                <div {...getRootProps({ className: `w-full h-[5rem] flex items-center justify-center mb-2 rounded-[7px] border-dashed border-2 cursor-pointer  border-[#D9D9D9] hover:border-blue-300` })}>
+                    <input {...getInputProps()} />
+                    <p className="subtitle-clr px-3">Drag 'n' drop file here, or click to select file</p>
+                </div>
+
+                <Button type="submit">Update</Button>
+
+            </form>
+        </div>
+    )
+}
+
+export default EditAnimation

components/Navbar/Navbar.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable @next/next/no-img-element */
+import Link from 'next/link'
 import React from 'react'
 
 export default function Navbar() {
@@ -8,38 +10,44 @@ export default function Navbar() {
 
         <div className="flex justify-between lg:w-auto w-full lg:border-b-0 pl-6 pr-2 border-solid border-b-2 border-gray-300 pb-5 lg:pb-0">
           <div className="flex items-center flex-shrink-0 text-gray-800 mr-16">
-            <span className="font-semibold text-xl tracking-tight"><a
-              className="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase text-white"
+            <span className="font-semibold text-xl tracking-tight"><Link
               href="/"
             >
-              <img src={'/images/lottie.svg'} width={30} height={30} />
-            </a></span>
+              <a className="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase text-white">
+                <img src={'/images/lottie.svg'} width={30} height={30} alt="lottie" />
+              </a>
+            </Link></span>
           </div>
           <div className="block lg:hidden ">
             <button
               id="nav"
               className="flex items-center px-3 py-2 border-2 rounded text-blue-700 border-blue-700 hover:text-blue-700 hover:border-blue-700">
-                Menu
+              Menu
             </button>
           </div>
         </div>
 
-        <div className="menu w-full lg:block flex-grow lg:flex lg:items-center lg:w-auto lg:px-3 px-8">
+        <div className="menu w-full lg:flex flex-grow lg:items-center lg:w-auto lg:px-3 px-8">
           <div className="text-md font-bold text-blue-700 lg:flex-grow">
-            <a href="/"
-              className="block mt-4 lg:inline-block lg:mt-0 hover:text-white px-4 py-2 rounded hover:bg-blue-700 mr-2">
-              Home
-            </a>
-            <a href="/about"
-              className=" block mt-4 lg:inline-block lg:mt-0 hover:text-white px-4 py-2 rounded hover:bg-blue-700 mr-2">
-              About
-            </a>
+            <Link href="/">
+              <a className="block mt-4 lg:inline-block lg:mt-0 hover:text-white px-4 py-2 rounded hover:bg-blue-700 mr-2">
+                Home
+              </a>
+            </Link>
+            <Link href="/about">
+              <a className="block mt-4 lg:inline-block lg:mt-0 hover:text-white px-4 py-2 rounded hover:bg-blue-700 mr-2">
+                About
+              </a>
+            </Link>
           </div>
-
-          <div className="flex ">
-            <a href="/users"
-              className=" block text-md px-4  ml-2 py-2 rounded text-blue-700 font-bold hover:text-white mt-4 hover:bg-blue-700 lg:mt-0">Users</a>
+          <div className="flex">
+            <Link href="/users">
+              <a className=" block text-md px-4  ml-2 py-2 rounded text-blue-700 font-bold hover:text-white mt-4 hover:bg-blue-700 lg:mt-0">
+                Users
+              </a>
+            </Link>
           </div>
+
         </div>
       </nav>
     </>

components/UserAnimations.tsx

@@ -1,21 +1,18 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import React, { useEffect, useState } from 'react'
-import { Player, Controls } from '@lottiefiles/react-lottie-player';
-import TextField from './common/textFields/TextField';
 import { useLazyQuery } from '@apollo/client';
-import { GET_ANIMATIONS_BY_TAG } from '../graphql/query/GetAnimationsByTag';
 import Button from './common/buttons/Button';
-import { GET_ANIMATIONS } from '../graphql/query/GetAnimatons';
 import Modal from './common/Modal';
 import AddAnimation from './AddAnimation';
 import AnimationCards from './common/AnimationCards';
 import { GET_ANIMATIONS_BY_USER } from '../graphql/query/GetAnimaitonsByUser';
 import { useRouter } from 'next/router';
+import { GET_ANIMATIONS_BY_TAG_USER } from '../graphql/query/GetAnimationsByTagUser';
 import SearchField from './common/textFields/SearchField';
 
 const UserAnimations = () => {
     const [getAnimations, { data, loading, refetch }] = useLazyQuery(GET_ANIMATIONS_BY_USER)
-    const [getAnimationsByTag, { data: searchData, loading: searchLoading }] = useLazyQuery(GET_ANIMATIONS_BY_TAG)
+    const [getAnimationsByTagUser, { data: searchData, loading: searchLoading }] = useLazyQuery(GET_ANIMATIONS_BY_TAG_USER)
     const [animations, setAnimations] = useState([])
     const [search, setSearch] = useState('')
     const [open, setOpen] = useState(false)
@@ -28,8 +25,8 @@ const UserAnimations = () => {
     }, [id])
 
     useEffect(() => {
-        if (searchData?.getAnimationsByTag?.length || search) {
-            setAnimations(searchData?.getAnimationsByTag || [])
+        if (searchData?.getAnimationsByTagUser?.length || search) {
+            setAnimations(searchData?.getAnimationsByTagUser || [])
         } else if (data?.getAnimationsByUser?.length) {
             setAnimations(data?.getAnimationsByUser || [])
         }
@@ -38,7 +35,7 @@ const UserAnimations = () => {
     useEffect(() => {
         const debounce = setTimeout(() => {
             if (search) {
-                getAnimationsByTag({ variables: { name: search } })
+                getAnimationsByTagUser({ variables: { name: search, userId: id } })
             } else {
                 if (data?.getAnimationsByUser?.length) setAnimations(data?.getAnimationsByUser)
             }
@@ -56,6 +53,9 @@ const UserAnimations = () => {
         <div className='mb-20'>
             <div className="flex justify-between items-end mb-7">
                 <h1>User Lotties</h1>
+                <div className="flex justify-between items-end mb-7">
+                    <SearchField label='Search by tag' name="search" onChange={(e) => setSearch(e.target.value)} />
+                </div>
                 <div className="w-[200px] text-right mt-5">
                     <Button onClick={() => setOpen(true)}>Upload a new lottie</Button>
                 </div>

components/Users.tsx

@@ -17,7 +17,6 @@ const Users = () => {
         getUsers()
     }, [])
 
-    console.log('users', data)
     const users = data?.getUsers
 
     return (

components/common/AnimationCards.tsx

@@ -1,13 +1,16 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { Player, Controls } from '@lottiefiles/react-lottie-player';
-import Button from './buttons/Button';
 import DangerButton from './buttons/DangerButton';
 import { useRouter } from 'next/router';
 import axios from 'axios';
 import Link from 'next/link';
+import Modal from './Modal';
+import EditAnimation from '../EditAnimation';
 
 const AnimationCards = ({ animations }: any) => {
     const router = useRouter()
+    const [open, setOpen] = useState(false)
+    const [editData, setEditData] = useState()
 
     const deleteAnimaiton = async (id: number) => {
 
@@ -20,6 +23,11 @@ const AnimationCards = ({ animations }: any) => {
 
     }
 
+    const editClick = (animation: any) => {
+        setEditData(animation)
+        setOpen(true)
+    }
+
     return (
         <div className='grid grid-cols-4 gap-3 ml-5'>
             {animations?.map((animation: any) => (
@@ -42,11 +50,11 @@ const AnimationCards = ({ animations }: any) => {
                                     {animation?.title}
                                 </h2>
                                 {router.asPath !== '/' &&
-                                    <Link href={`/editor/${animation.id}`} passHref>
-                                        <button className="px-4 py-2 text-sm font-medium text-blue-900 bg-blue-100 border border-transparent rounded-md hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500">
-                                            Edit
-                                        </button>
-                                    </Link>
+
+                                    <button onClick={() => editClick(animation)} className="px-4 py-2 text-sm font-medium text-blue-900 bg-blue-100 border border-transparent rounded-md hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500">
+                                        Edit
+                                    </button>
+
                                 }
                             </div>
                             <div className="flex justify-between">
@@ -57,7 +65,7 @@ const AnimationCards = ({ animations }: any) => {
                             </div>
                             <div className="flex mt-4">
                                 {animation?.TagOnAnimation?.map((tag: any) => (
-                                    <div>
+                                    <div key={tag.tag.id}>
                                         <p
                                             tabIndex={0}
                                             className="mr-1 focus:outline-none text-xs border border-blue rounded py-1 px-3 bg-blue-600 text-white"
@@ -75,6 +83,10 @@ const AnimationCards = ({ animations }: any) => {
                     </div>
                 </div>
             ))}
+
+            <Modal open={open} setOpen={setOpen}>
+                <EditAnimation animation={editData} setOpen={() => setOpen(false)} />
+            </Modal>
         </div>
     )
 }

components/common/textFields/SearchField.tsx

@@ -1,14 +1,4 @@
-import React, { InputHTMLAttributes, useEffect, useState } from 'react'
-import { Player, Controls } from '@lottiefiles/react-lottie-player'
-import TextField from './TextField'
-import { useLazyQuery } from '@apollo/client'
-import { GET_ANIMATIONS_BY_TAG } from '../../../graphql/query/GetAnimationsByTag'
-import Button from '../buttons/Button'
-import { GET_ANIMATIONS } from '../../../graphql/query/GetAnimatons'
-import { useRouter } from 'next/router'
-import Link from 'next/link'
-import en from 'javascript-time-ago/locale/en.json'
-import TimeAgo from 'javascript-time-ago';
+import React, { InputHTMLAttributes } from 'react'
 
 interface InputProps extends InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement> {
     name: string,