| const [isCreatedByMe, setIsCreatedByMe] = useState(queryIsCreatedByMe) | const [isCreatedByMe, setIsCreatedByMe] = useState(queryIsCreatedByMe) | ||||
| const [tagFilterValue, setTagFilterValue] = useState<string[]>(tagIDs) | const [tagFilterValue, setTagFilterValue] = useState<string[]>(tagIDs) | ||||
| const [searchKeywords, setSearchKeywords] = useState(keywords) | const [searchKeywords, setSearchKeywords] = useState(keywords) | ||||
| const newAppCardRef = useRef<HTMLDivElement>(null) | |||||
| const setKeywords = useCallback((keywords: string) => { | const setKeywords = useCallback((keywords: string) => { | ||||
| setQuery(prev => ({ ...prev, keywords })) | setQuery(prev => ({ ...prev, keywords })) | ||||
| }, [setQuery]) | }, [setQuery]) | ||||
| {(data && data[0].total > 0) | {(data && data[0].total > 0) | ||||
| ? <div className='relative grid grow grid-cols-1 content-start gap-4 px-12 pt-2 sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-5 2k:grid-cols-6'> | ? <div className='relative grid grow grid-cols-1 content-start gap-4 px-12 pt-2 sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-5 2k:grid-cols-6'> | ||||
| {isCurrentWorkspaceEditor | {isCurrentWorkspaceEditor | ||||
| && <NewAppCard onSuccess={mutate} />} | |||||
| && <NewAppCard ref={newAppCardRef} onSuccess={mutate} />} | |||||
| {data.map(({ data: apps }) => apps.map(app => ( | {data.map(({ data: apps }) => apps.map(app => ( | ||||
| <AppCard key={app.id} app={app} onRefresh={mutate} /> | <AppCard key={app.id} app={app} onRefresh={mutate} /> | ||||
| )))} | )))} | ||||
| </div> | </div> | ||||
| : <div className='relative grid grow grid-cols-1 content-start gap-4 overflow-hidden px-12 pt-2 sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-5 2k:grid-cols-6'> | : <div className='relative grid grow grid-cols-1 content-start gap-4 overflow-hidden px-12 pt-2 sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-5 2k:grid-cols-6'> | ||||
| {isCurrentWorkspaceEditor | {isCurrentWorkspaceEditor | ||||
| && <NewAppCard className='z-10' onSuccess={mutate} />} | |||||
| && <NewAppCard ref={newAppCardRef} className='z-10' onSuccess={mutate} />} | |||||
| <NoAppsFound /> | <NoAppsFound /> | ||||
| </div>} | </div>} | ||||
| <CheckModal /> | <CheckModal /> |
| 'use client' | 'use client' | ||||
| import { useCallback, useRef, useState } from 'react' | |||||
| import { useCallback, useEffect, useRef, useState } from 'react' | |||||
| import { useTranslation } from 'react-i18next' | import { useTranslation } from 'react-i18next' | ||||
| import { useRouter } from 'next/navigation' | |||||
| import { useRouter, useSearchParams } from 'next/navigation' | |||||
| import { useContext, useContextSelector } from 'use-context-selector' | import { useContext, useContextSelector } from 'use-context-selector' | ||||
| import { RiArrowRightLine, RiCommandLine, RiCornerDownLeftLine, RiExchange2Fill } from '@remixicon/react' | import { RiArrowRightLine, RiCommandLine, RiCornerDownLeftLine, RiExchange2Fill } from '@remixicon/react' | ||||
| import Link from 'next/link' | import Link from 'next/link' | ||||
| import { useProviderContext } from '@/context/provider-context' | import { useProviderContext } from '@/context/provider-context' | ||||
| import { ToastContext } from '@/app/components/base/toast' | import { ToastContext } from '@/app/components/base/toast' | ||||
| import type { AppMode } from '@/types/app' | import type { AppMode } from '@/types/app' | ||||
| import { AppModes } from '@/types/app' | |||||
| import { createApp } from '@/service/apps' | import { createApp } from '@/service/apps' | ||||
| import Input from '@/app/components/base/input' | import Input from '@/app/components/base/input' | ||||
| import Textarea from '@/app/components/base/textarea' | import Textarea from '@/app/components/base/textarea' | ||||
| const isCreatingRef = useRef(false) | const isCreatingRef = useRef(false) | ||||
| const searchParams = useSearchParams() | |||||
| useEffect(() => { | |||||
| const category = searchParams.get('category') | |||||
| if (category && AppModes.includes(category as AppMode)) | |||||
| setAppMode(category as AppMode) | |||||
| }, [searchParams]) | |||||
| const onCreate = useCallback(async () => { | const onCreate = useCallback(async () => { | ||||
| if (!appMode) { | if (!appMode) { | ||||
| notify({ type: 'error', message: t('app.newApp.appTypeRequired') }) | notify({ type: 'error', message: t('app.newApp.appTypeRequired') }) |