merge global and local search
This commit is contained in:
smanylov
@@ -10,6 +10,7 @@ export function FileSearchPanel({ fileId, ref }: { fileId: string | null, ref: a
|
|||||||
const [searchedGlobalFiles, setSearchedGlobalFiles] = useState<string[]>([]);
|
const [searchedGlobalFiles, setSearchedGlobalFiles] = useState<string[]>([]);
|
||||||
const [searchedGlobalFilesShowNull, setSearchedGlobalFilesShowNull] = useState<boolean>(false);
|
const [searchedGlobalFilesShowNull, setSearchedGlobalFilesShowNull] = useState<boolean>(false);
|
||||||
const [loading, setLoading] = useState<boolean>(false);
|
const [loading, setLoading] = useState<boolean>(false);
|
||||||
|
const [showGlobalSearch, setShowGlobalSearch] = useState<boolean>(false);
|
||||||
const queryClient = useQueryClient();
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
useImperativeHandle(ref, () => ({
|
useImperativeHandle(ref, () => ({
|
||||||
@@ -18,6 +19,7 @@ export function FileSearchPanel({ fileId, ref }: { fileId: string | null, ref: a
|
|||||||
setSearchedGlobalFiles([]);
|
setSearchedGlobalFiles([]);
|
||||||
setSearchedUserFilesShowNull(false);
|
setSearchedUserFilesShowNull(false);
|
||||||
setSearchedGlobalFilesShowNull(false);
|
setSearchedGlobalFilesShowNull(false);
|
||||||
|
setShowGlobalSearch(false);
|
||||||
}
|
}
|
||||||
}));
|
}));
|
||||||
|
|
||||||
@@ -35,6 +37,8 @@ export function FileSearchPanel({ fileId, ref }: { fileId: string | null, ref: a
|
|||||||
} catch (error) {
|
} catch (error) {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
setShowGlobalSearch(true);
|
||||||
|
handlerSearchGlobalFile(fileId)
|
||||||
|
|
||||||
}, [fileId])
|
}, [fileId])
|
||||||
|
|
||||||
@@ -107,97 +111,85 @@ export function FileSearchPanel({ fileId, ref }: { fileId: string | null, ref: a
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div
|
{showGlobalSearch && (
|
||||||
className="global-search-section"
|
<div
|
||||||
>
|
className="global-search-section"
|
||||||
<div className="global-search-header">
|
>
|
||||||
<div className="global-search-title">
|
<div className="global-search-header">
|
||||||
Глобальный поиск изображений
|
<div className="global-search-title">
|
||||||
|
Глобальный поиск изображений
|
||||||
|
</div>
|
||||||
|
<div className="">
|
||||||
|
Найти где ещё используется ваше изображение в интернете
|
||||||
|
</div>
|
||||||
|
<div className="global-search-badge">
|
||||||
|
Интернет поиск
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="">
|
|
||||||
Найти где ещё используется ваше изображение в интернете
|
|
||||||
</div>
|
<div className="global-search-content">
|
||||||
<div className="global-search-badge">
|
<div className="global-search-info">
|
||||||
Интернет поиск
|
<div className="global-search-info-title">
|
||||||
|
Поиск по всему интернету
|
||||||
|
</div>
|
||||||
|
<div className="global-search-info-text">
|
||||||
|
Используем продвинутые технологии обратного поиска по изображению для поиска копий вашего контента
|
||||||
|
на сайтах, в социальных сетях и других источниках. Поможет обнаружить несанкционированное использование.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="search-counter" id="search-counter">
|
||||||
|
<div className="counter-info">
|
||||||
|
<div className="counter-icon" id="counter-icon"></div>
|
||||||
|
<div className="counter-text">
|
||||||
|
<div className="counter-label">Глобальных поисков сегодня</div>
|
||||||
|
<div className="counter-value" id="counter-value">0 из 10</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="progress-bar">
|
||||||
|
<div
|
||||||
|
className="progress-fill"
|
||||||
|
id="progress-fill"
|
||||||
|
style={{ width: '0%' }}
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={`global-loading ${loading ? 'show' : ''}`} id="global-loading">
|
||||||
|
<div className="global-spinner"></div>
|
||||||
|
<div className="global-loading-text" id="global-loading-text">
|
||||||
|
Поиск изображений в интернете...
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={`global-result ${searchedGlobalFiles.length ? 'show' : ''}`} id="global-result">
|
||||||
|
<div className="global-result-card">
|
||||||
|
<div className="global-result-header">
|
||||||
|
<span>Найдено в интернете</span>
|
||||||
|
</div>
|
||||||
|
<div className="global-result-content">
|
||||||
|
<SearchedGlobalFilesList list={searchedGlobalFiles} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{searchedGlobalFilesShowNull && (
|
||||||
|
<div className="global-no-result" id="global-no-result">
|
||||||
|
<div className="global-no-result-icon">‍</div>
|
||||||
|
<h4>Похожие изображения в интернете не найдены</h4>
|
||||||
|
<p>Это может означать, что ваше изображение уникально и не используется на других сайтах.</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="global-error" id="global-error">
|
||||||
|
<strong>Ошибка глобального поиска:</strong>
|
||||||
|
<span id="global-error-text"></span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
<div className="global-search-content">
|
|
||||||
<div className="global-search-info">
|
|
||||||
<div className="global-search-info-title">
|
|
||||||
Поиск по всему интернету
|
|
||||||
</div>
|
|
||||||
<div className="global-search-info-text">
|
|
||||||
Используем продвинутые технологии обратного поиска по изображению для поиска копий вашего контента
|
|
||||||
на сайтах, в социальных сетях и других источниках. Поможет обнаружить несанкционированное использование.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="search-counter" id="search-counter">
|
|
||||||
<div className="counter-info">
|
|
||||||
<div className="counter-icon" id="counter-icon"></div>
|
|
||||||
<div className="counter-text">
|
|
||||||
<div className="counter-label">Глобальных поисков сегодня</div>
|
|
||||||
<div className="counter-value" id="counter-value">0 из 10</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="progress-bar">
|
|
||||||
<div
|
|
||||||
className="progress-fill"
|
|
||||||
id="progress-fill"
|
|
||||||
style={{ width: '0%' }}
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="global-search-btn"
|
|
||||||
id="global-search-btn"
|
|
||||||
disabled={loading ? true : false}
|
|
||||||
onClick={() => {
|
|
||||||
if (fileId) {
|
|
||||||
handlerSearchGlobalFile(fileId)
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Найти в интернете
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div className={`global-loading ${loading ? 'show' : ''}`} id="global-loading">
|
|
||||||
<div className="global-spinner"></div>
|
|
||||||
<div className="global-loading-text" id="global-loading-text">
|
|
||||||
Поиск изображений в интернете...
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className={`global-result ${searchedGlobalFiles.length ? 'show' : ''}`} id="global-result">
|
|
||||||
<div className="global-result-card">
|
|
||||||
<div className="global-result-header">
|
|
||||||
<span>Найдено в интернете</span>
|
|
||||||
</div>
|
|
||||||
<div className="global-result-content">
|
|
||||||
<SearchedGlobalFilesList list={searchedGlobalFiles} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{searchedGlobalFilesShowNull && (
|
|
||||||
<div className="global-no-result" id="global-no-result">
|
|
||||||
<div className="global-no-result-icon">‍</div>
|
|
||||||
<h4>Похожие изображения в интернете не найдены</h4>
|
|
||||||
<p>Это может означать, что ваше изображение уникально и не используется на других сайтах.</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="global-error" id="global-error">
|
|
||||||
<strong>Ошибка глобального поиска:</strong>
|
|
||||||
<span id="global-error-text"></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user