@prisma/client#PickType TypeScript Examples

function Image({obj}: { obj: UpdateSearch }) {
    const {modifyPick} = useEditorPicks();
    const {type} = useRecoilValue(EditPickContext);

    const handleClick = () => modifyPick(obj);

    if (type === PickType.BASIC)
        return (
            <img onClick={handleClick} src={obj.poster} alt={obj.name} className={style.resImage}/>
        )

    else return (
        <div onClick={handleClick} className={ss.pickImgHolder}>
            <img className={ss.img1} src={obj.backdrop} alt={obj.name}/>
            <img className={ss.img2} src={obj.logo || ''} alt={obj.name}/>
        </div>
    )
}

EditPickContext = atom<PickSummary & { statusType: boolean, process: 'MODIFY' | 'ADD' }>({
    key: 'editFrontPick',
    default: {
        category: '',
        display: '',
        poster: '',
        overview: '',
        type: PickType.EDITOR,
        picks: [],
        active: false,
        process: 'ADD',
        statusType: false,
    }
})

function Image({obj}: { obj: PickMedia }) {
    const type = useRecoilValue(PickTypeAtom);
    const setMedia = useSetRecoilState(PickMediaAtom);
    const setSearch = useSetRecoilState(SearchPickAtom);

    const handleClick = () => {
        setSearch([]);
        setMedia(media => {
            if (media.some(e => e.id === obj.id))
                return media.filter(e => e.id !== obj.id);

            else return [...media, obj];
        })
    }

    if (type === PickType.BASIC)
        return (
            <img onClick={handleClick} src={obj.poster} alt={obj.name} className={style.resImage}/>
        )

    else return (
        <div onClick={handleClick} className={ss.pickImgHolder}>
            <img className={ss.img1} src={obj.backdrop} alt={obj.name}/>
            <img className={ss.img2} src={obj.logo} alt={obj.name}/>
        </div>
    )
}

/**
     * @desc get the list of all media in user's list
     * @param userId - user identifier
     */
    public async getMyList(userId: string): Promise<SectionPick<'BASIC'>> {
        let myList = await this.prisma.listItem.findMany({where: {userId}, include: {media: true}});

        return {
            type: PickType.BASIC, data: this.sortArray(myList.map(item => {
                let list = item.media;
                return {
                    updated: item.updated,
                    background: list.background,
                    id: list.id,
                    poster: list.poster,
                    type: list.type,
                    name: list.name
                }
            }), 'updated', 'desc') as any, display: 'my list'
        };
    }

/**
     * @desc Array of media element in a category
     * @param category - category identifier
     */
    async getCategory<T extends PickType>(category: string): Promise<SectionPick<T>> {
        let pick = await this.prisma.pick.findMany({where: {category}, include: {media: true}});
        if (pick[0]?.type === PickType.BASIC) {
            let data = pick.map(item => {
                return {
                    background: item.media.background,
                    id: item.media.id,
                    name: item.media.name,
                    poster: item.media.poster,
                    type: item.media.type
                }
            })

            let display = pick.length ? pick[0].display : category;
            return {display, data, type: PickType.BASIC} as unknown as SectionPick<T>;
        } else {
            let data = pick.map(item => {
                return {
                    id: item.media.id,
                    name: item.media.name,
                    logo: item.media.logo,
                    backdrop: item.media.backdrop,
                    type: item.media.type
                }
            })

            let display = pick.length ? pick[0].display : category;
            return {display, data, type: PickType.EDITOR} as unknown as SectionPick<T>;
        }
    }

/**
     * @desc adds a list of media to the database
     * @param data - a number array containing the mediaId of the media to be added
     * @param category - the cypher string to request the pick on load
     * @param display - the information displayed for the pick
     * @param type - type of pick
     * @param active - set to true if the pick is active
     */
    async addPick(data: number[], category: string, display: string, type: PickType, active: boolean) {
        display = display.toLowerCase();
        category = category.toLowerCase();
        await this.prisma.pick.deleteMany({where: {category}});
        if (type === PickType.BASIC) await this.prisma.pick.updateMany({
            where: {type: PickType.BASIC}, data: {active: false, type: PickType.EDITOR}
        });

        let res = data.map(e => {
            return {
                mediaId: e, display, category, active, type,
            }
        })

        await this.prisma.pick.createMany({data: res});
        let picks = await this.prisma.pick.findMany({
            distinct: ['category'], orderBy: {id: 'asc'}, where: {AND: [{active: true}, {NOT: {category}}]}
        });

        if (picks.length > 1 && active) await this.prisma.pick.updateMany({
            where: {category: picks[0].category},
            data: {active: false}
        });
    }

/**
     * @desc gets a pick based on the query provided
     * @param query - query to be used
     */
    public async getPick(query: string) {
        const type = /^editor/i.test(query) ? PickType.EDITOR : PickType.BASIC;
        const match = query.match(/(editor|basic)(?<number>\d+)$/);
        const number = parseInt(match?.groups?.number ?? '1');

        let picks = await this.prisma.pick.findMany({
            distinct: ['category'], where: {type},
        });

        if (number <= picks.length) return await this.getCategory(picks[number - 1].category);

        else return {data: [], type: PickType.BASIC, display: ''};
    }

PickBodyHead = () => {
    const [obj, setObj] = useRecoilState(EditPickContext);
    const setSearch = useSetRecoilState(PickSearchContext);
    const [text, setText] = useState('');
    const {abort} = useFetcher<UpdateSearch[]>('/api/settings/libSearch?value=' + text, {
        onSuccess: (res) => setSearch(res),
    });

    useEffect(() => {
        if (text === '')
            abort.cancel();

        return () => abort.cancel();
    }, [text]);

    return (
        <>
            <div className={ss.inputHolders}>
                <div className={ss.search}>
                    <input type="text" placeholder="enter category" value={obj.category}
                           onChange={e => setObj({...obj, category: e.target.value})}
                           className={style['search-input']}/>
                </div>
                <div className={ss.search}>
                    <input type="text" placeholder="add new media to your pick" className={style['search-input']}
                           onChange={e => setText(e.currentTarget.value)}/>
                    <button className={style.searchButton}>
                        <svg viewBox="0 0 24 24">
                            <circle cx="11" cy="11" r="8"/>
                            <line x1="21" y1="21" x2="16.65" y2="16.65"/>
                        </svg>
                    </button>
                </div>
                <div className={ss.search}>
                    <input type="text" placeholder="enter the display value" defaultValue={obj.display}
                           onChange={e => setObj({...obj, display: e.target.value})}
                           className={style['search-input']}/>
                </div>
            </div>
            <div className={ss.inputHolders}>
                <select className={ss.select} name="editor"
                        value={obj.type}
                        onChange={e => setObj({
                            ...obj,
                            type: e.currentTarget.value === PickType.EDITOR ? PickType.EDITOR : PickType.BASIC
                        })}>
                    <option value="EDITOR">editor</option>
                    <option value="BASIC">basic</option>
                </select>
                <select className={ss.select} name="active"
                        value={obj.active ? 'active' : 'hidden'}
                        onChange={e => setObj({...obj, active: e.currentTarget.value === 'active'})}>
                    <option value="hidden">hidden</option>
                    <option value="active">active</option>
                </select>
            </div>
        </>
    )
}

useEditorPicks = () => {
    const base = useBase();
    const setInform = useInfoDispatch();
    const setSearch = useSetRecoilState(PickSearchContext);
    const [state, setState] = useRecoilState(EditPickContext);
    const [modifyingPick, setModifyingPick] = useRecoilState(ModifyingPick);

    const addPick = async (cb: () => void) => {
        if (state.picks.length && state.display !== '' && state.category !== '') {
            const pick = {
                category: state.category,
                display: state.display,
                type: state.type,
                picks: state.picks.map(p => p.id),
                active: state.active,
            };
            const check = await base.makeRequest<boolean>('/api/modify/pick', {...pick}, 'POST');
            if (check)
                setInform({
                    type: "alert",
                    heading: 'Editor pick added successfully',
                    message: `The editor pick ${state.display}, has been added successfully`
                })
            else setInform({
                type: "warn",
                heading: 'Something went wrong',
                message: `Failed to add the editor pick ${state.display} to the database`
            })
            cb();
        } else
            setInform({
                type: "error",
                heading: 'Missing information',
                message: `Please fill out all the required fields`
            })
    }

    const modifyPick = async (obj: UpdateSearch) => {
        if (!modifyingPick) {
            setModifyingPick(true);

            if (state.picks.some(m => m.id === obj.id))
                setState(prev => ({...prev, picks: prev.picks.filter(m => m.id !== obj.id)}));

            else
                setState(prev => ({...prev, picks: [...prev.picks, obj]}));

            setSearch([]);
            setModifyingPick(false);
        }
    }

    const pushPickLib = async (obj: PickSummary | null) => {
        if (obj === null)
            setState({
                category: '',
                display: '',
                poster: '',
                overview: '',
                type: PickType.EDITOR,
                picks: [],
                active: false,
                process: 'ADD',
                statusType: true,
            })
        else
            setState({...obj, statusType: true, process: 'MODIFY'});
    }

    return {addPick, modifyPick, pushPickLib}
}

function PickBodyHead({obj}: { obj: EditPick }) {
    const [text, setText] = useState('');
    const {response} = useFetcher<EditPickInterface>('/api/update/getPick?value=' + obj.modify?.category);
    const {response: search, abort} = useFetcher<UpdateSearch[]>('/api/update/libSearch?value=' + text);
    const setPickAtom = useSetRecoilState(PickMediaAtom);
    const setSearch = useSetRecoilState(SearchPickAtom);
    const setType = useSetRecoilState(PickTypeAtom);
    const setActive = useSetRecoilState(PickActiveAtom);
    const setCategory = useSetRecoilState(PickCategoryAtom);
    const setDisplay = useSetRecoilState(PickDisplayAtom);

    useEffect(() => {
        setActive(response?.active || false);
        setType(response?.type || 'EDITOR');
        setDisplay(response?.display || '');
        setCategory(response?.category || '');
        setPickAtom(response?.media || []);
    }, [response])

    useEffect(() => {
        setSearch(search || [])
    }, [search])

    useEffect(() => {
        if (text === '')
            abort.cancel();

        return () => abort.cancel();
    }, [text])

    return (
        <>
            <div className={ss.inputHolders}>
                <div className={ss.search}>
                    <input type="text" placeholder="enter category" defaultValue={obj.modify?.category}
                           onChange={e => setCategory(e.currentTarget.value)}
                           className={style['search-input']}/>
                </div>
                <div className={ss.search}>
                    <input type="text" placeholder="add new media to your pick" className={style['search-input']}
                           onChange={e => setText(e.currentTarget.value)}/>
                    <button className={style.searchButton}>
                        <svg viewBox="0 0 24 24">
                            <circle cx="11" cy="11" r="8"/>
                            <line x1="21" y1="21" x2="16.65" y2="16.65"/>
                        </svg>
                    </button>
                </div>
                <div className={ss.search}>
                    <input type="text" placeholder="enter the display value" defaultValue={obj.modify?.display}
                           onChange={e => setDisplay(e.currentTarget.value)}
                           className={style['search-input']}/>
                </div>
            </div>
            <div className={ss.inputHolders}>
                <select className={ss.select} name="editor"
                        value={response?.type}
                        onChange={e => setType(e.currentTarget.value === PickType.EDITOR ? PickType.EDITOR : PickType.BASIC)}>
                    <option value="EDITOR">editor</option>
                    <option value="BASIC">basic</option>
                </select>
                <select className={ss.select} name="active"
                        value={response?.active ? 'active' : 'hidden'}
                        onChange={e => setActive(e.currentTarget.value === 'active')}>
                    <option value="hidden">hidden</option>
                    <option value="active">active</option>
                </select>
            </div>
        </>
    )
}

PickTypeAtom = atom<PickType>({
    key: 'PickTypeAtom',
    default: PickType.EDITOR
})