95 lines
2.7 KiB
TypeScript
95 lines
2.7 KiB
TypeScript
import React, { ReactElement, useEffect, useState } from 'react';
|
||
import Head from 'next/head';
|
||
import 'react-datepicker/dist/react-datepicker.css';
|
||
import { useAppDispatch, useAppSelector } from '../stores/hooks';
|
||
|
||
import { useRouter } from 'next/router';
|
||
import LayoutAuthenticated from '../layouts/Authenticated';
|
||
import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton';
|
||
import SectionMain from '../components/SectionMain';
|
||
import CardBox from '../components/CardBox';
|
||
import SearchResults from '../components/SearchResults';
|
||
import LoadingSpinner from '../components/LoadingSpinner';
|
||
import BaseButton from '../components/BaseButton';
|
||
import BaseDivider from '../components/BaseDivider';
|
||
import { mdiChartTimelineVariant } from '@mdi/js';
|
||
import { createAsyncThunk } from '@reduxjs/toolkit';
|
||
import axios from 'axios';
|
||
|
||
const SearchView = () => {
|
||
const router = useRouter();
|
||
const dispatch = useAppDispatch();
|
||
const searchQuery = router.query.query;
|
||
const [loading, setLoading] = useState(false);
|
||
const [searchResults, setSearchResults] = useState([]);
|
||
|
||
const { currentUser } = useAppSelector((state) => state.auth);
|
||
const organizationsId = currentUser?.organizations?.id;
|
||
|
||
|
||
useEffect(() => {
|
||
dispatch(fetchData());
|
||
}, [dispatch, searchQuery]);
|
||
|
||
const fetchData = createAsyncThunk('/search', async () => {
|
||
setLoading(true);
|
||
try {
|
||
const response = await axios.post('/search', { searchQuery , organizationsId});
|
||
setSearchResults(response.data);
|
||
setLoading(false);
|
||
return response.data;
|
||
} catch (error) {
|
||
console.error(error.response);
|
||
setLoading(false);
|
||
throw error;
|
||
}
|
||
});
|
||
|
||
const groupedResults = searchResults.reduce((acc, item) => {
|
||
const { tableName } = item;
|
||
acc[tableName] = acc[tableName] || [];
|
||
acc[tableName].push(item);
|
||
return acc;
|
||
}, {});
|
||
|
||
return (
|
||
<>
|
||
<Head>
|
||
<title>Arama Sonuçları</title>
|
||
</Head>
|
||
<SectionMain>
|
||
<SectionTitleLineWithButton
|
||
icon={mdiChartTimelineVariant}
|
||
title={'Arama Sonuçları'}
|
||
main
|
||
>
|
||
{''}
|
||
</SectionTitleLineWithButton>
|
||
<CardBox>
|
||
{loading ? <LoadingSpinner /> : <SearchResults
|
||
searchResults={groupedResults}
|
||
searchQuery={searchQuery}
|
||
/>}
|
||
<BaseDivider />
|
||
<BaseButton
|
||
color='info'
|
||
label='Geri dön'
|
||
onClick={() => router.push('/dashboard')}
|
||
/>
|
||
</CardBox>
|
||
</SectionMain>
|
||
</>
|
||
);
|
||
};
|
||
|
||
SearchView.getLayout = function getLayout(page: ReactElement) {
|
||
return (
|
||
<LayoutAuthenticated
|
||
|
||
permission={'CREATE_SEARCH'}
|
||
>{page}</LayoutAuthenticated>
|
||
);
|
||
};
|
||
|
||
export default SearchView;
|