From d4c49a10613ee354848e2daed60262d6ca652dd1 Mon Sep 17 00:00:00 2001 From: Alibek Date: Fri, 16 Feb 2024 14:11:15 +0600 Subject: [PATCH] made filters in rating section --- .../Pagination/Pagination.scss | 12 +++- .../Pagination/Pagination.tsx | 8 ++- .../Pagination/icons/arrow-left.svg | 0 .../Pagination/icons/arrow-right.svg | 0 src/widgets/RatingSection/RatingSection.tsx | 67 ++++++++++--------- src/widgets/RatingSection/helpers.ts | 20 ++++++ .../RatingSection/ratingSectionStore.ts | 53 ++++++++++++++- .../StatisticsSection/StatisticsSection.tsx | 30 +++++---- .../statisticsSection.store.ts | 35 ---------- 9 files changed, 139 insertions(+), 86 deletions(-) rename src/{entities => features}/Pagination/Pagination.scss (81%) rename src/{entities => features}/Pagination/Pagination.tsx (94%) rename src/{entities => features}/Pagination/icons/arrow-left.svg (100%) rename src/{entities => features}/Pagination/icons/arrow-right.svg (100%) create mode 100644 src/widgets/RatingSection/helpers.ts delete mode 100644 src/widgets/StatisticsSection/statisticsSection.store.ts diff --git a/src/entities/Pagination/Pagination.scss b/src/features/Pagination/Pagination.scss similarity index 81% rename from src/entities/Pagination/Pagination.scss rename to src/features/Pagination/Pagination.scss index 92f8b98..6ee3836 100644 --- a/src/entities/Pagination/Pagination.scss +++ b/src/features/Pagination/Pagination.scss @@ -12,14 +12,22 @@ background-color: rgb(255, 255, 255); } - &__prev { + &__prev, + &__prev-disabled { border-radius: 8px 0px 0px 8px; } - &__next { + &__next, + &__next-disabled { border-radius: 0px 8px 8px 0px; } + &__next-disabled, + &__prev-disabled { + cursor: auto; + opacity: 0.7; + } + &__page, &__page_active { font-size: 14px; diff --git a/src/entities/Pagination/Pagination.tsx b/src/features/Pagination/Pagination.tsx similarity index 94% rename from src/entities/Pagination/Pagination.tsx rename to src/features/Pagination/Pagination.tsx index 31dea51..049b21b 100644 --- a/src/entities/Pagination/Pagination.tsx +++ b/src/features/Pagination/Pagination.tsx @@ -121,7 +121,9 @@ const Pagination: React.FC = ({ @@ -129,7 +131,9 @@ const Pagination: React.FC = ({ diff --git a/src/entities/Pagination/icons/arrow-left.svg b/src/features/Pagination/icons/arrow-left.svg similarity index 100% rename from src/entities/Pagination/icons/arrow-left.svg rename to src/features/Pagination/icons/arrow-left.svg diff --git a/src/entities/Pagination/icons/arrow-right.svg b/src/features/Pagination/icons/arrow-right.svg similarity index 100% rename from src/entities/Pagination/icons/arrow-right.svg rename to src/features/Pagination/icons/arrow-right.svg diff --git a/src/widgets/RatingSection/RatingSection.tsx b/src/widgets/RatingSection/RatingSection.tsx index 836ca16..5542d3c 100644 --- a/src/widgets/RatingSection/RatingSection.tsx +++ b/src/widgets/RatingSection/RatingSection.tsx @@ -4,8 +4,6 @@ import Image from "next/image"; import { useEffect, useState } from "react"; import { useRouter } from "next/navigation"; import SearchForm from "@/features/SearchForm/SearchForm"; -import arrow_down_icon from "./icons/arrow-down.svg"; -import arrow_up_icon from "./icons/arrow-up.svg"; import like_icon from "./icons/like.svg"; import message_icon from "./icons/message.svg"; import { useRatingStore } from "./ratingSectionStore"; @@ -19,7 +17,12 @@ import RoadType from "@/entities/RoadType/RoadType"; import Typography from "@/shared/ui/components/Typography/Typography"; import Paragraph from "@/shared/ui/components/Paragraph/Paragraph"; import arrows from "../../shared/icons/arrows.svg"; -import Pagination from "@/entities/Pagination/Pagination"; +import Pagination from "@/features/Pagination/Pagination"; +import { + sliceDate, + sliceDescription, + sliceLocation, +} from "./helpers"; interface IRatingSectionProps { [key: string]: string; @@ -35,6 +38,10 @@ const RatingSection: React.FC = ({ queryRating || "" ); const [activePage, setActivePage] = useState(+page); + const [filter, setFilter] = useState({ + option: "date", + toggle: false, + }); const router = useRouter(); const reports = useRatingStore(useShallow((state) => state.data)); @@ -43,7 +50,7 @@ const RatingSection: React.FC = ({ ); useEffect(() => { - getReports(ratingSearch, +page); + getReports(ratingSearch, +page, filter); }, []); const handleSubmit: React.FormEventHandler< @@ -64,7 +71,7 @@ const RatingSection: React.FC = ({ } ); - getReports(ratingSearch, activePage); + getReports(ratingSearch, activePage, filter); if (reports.results.length < 8 && page !== "1") { setActivePage(1); @@ -83,36 +90,22 @@ const RatingSection: React.FC = ({ } ); - getReports(ratingSearch, activePage); + getReports(ratingSearch, activePage, filter); }, [activePage]); - const sliceDate = (date: string) => { - return `${date.slice(8, 10)}.${date.slice(5, 7)}.${date.slice( - 0, - 4 - )}`; - }; - - const sliceLocation = (location: string) => { - if (location.length > 15) return `${location.slice(0, 15)}...`; - - return location; - }; - - const sliceDescription = (description: string) => { - if (description.length > 49) { - return `${description.slice(0, 50)}...`; - } - - return description; - }; - const params = [ { id: 1, name: "Дата", handleClick() { - console.log(this.name); + if (filter.option !== "date") { + return setFilter({ option: "date", toggle: false }); + } + + setFilter((prev) => { + return { option: "date", toggle: !prev.toggle }; + }); + getReports(ratingSearch, activePage, filter); }, }, { id: 2, name: "Адрес" }, @@ -122,14 +115,28 @@ const RatingSection: React.FC = ({ id: 5, name: "Комментарии", handleClick() { - console.log(this.name); + if (filter.option !== "reviews") { + return setFilter({ option: "reviews", toggle: false }); + } + + setFilter((prev) => { + return { option: "reviews", toggle: !prev.toggle }; + }); + getReports(ratingSearch, activePage, filter); }, }, { id: 6, name: "Рейтинг", handleClick() { - console.log(this.name); + if (filter.option !== "rating") { + return setFilter({ option: "rating", toggle: false }); + } + + setFilter((prev) => { + return { option: "rating", toggle: !prev.toggle }; + }); + getReports(ratingSearch, activePage, filter); }, }, ]; diff --git a/src/widgets/RatingSection/helpers.ts b/src/widgets/RatingSection/helpers.ts new file mode 100644 index 0000000..b3c167c --- /dev/null +++ b/src/widgets/RatingSection/helpers.ts @@ -0,0 +1,20 @@ +export const sliceDate = (date: string) => { + return `${date.slice(8, 10)}.${date.slice(5, 7)}.${date.slice( + 0, + 4 + )}`; +}; + +export const sliceLocation = (location: string) => { + if (location.length > 15) return `${location.slice(0, 15)}...`; + + return location; +}; + +export const sliceDescription = (description: string) => { + if (description.length > 49) { + return `${description.slice(0, 50)}...`; + } + + return description; +}; diff --git a/src/widgets/RatingSection/ratingSectionStore.ts b/src/widgets/RatingSection/ratingSectionStore.ts index 8cc4619..338f7eb 100644 --- a/src/widgets/RatingSection/ratingSectionStore.ts +++ b/src/widgets/RatingSection/ratingSectionStore.ts @@ -2,7 +2,6 @@ import { apiInstance } from "@/shared/config/apiConfig"; import { IFetch } from "@/shared/types/fetch-type"; import { IList } from "@/shared/types/list-type"; import { IReport } from "@/shared/types/report-type"; -import axios from "axios"; import { create } from "zustand"; interface IFetchReports extends IList { @@ -11,7 +10,11 @@ interface IFetchReports extends IList { interface IRatingStore extends IFetch { data: IFetchReports; - getReports: (categories: string, page: number) => Promise; + getReports: ( + categories: string, + page: number, + filter: { option: string; toggle: boolean } + ) => Promise; } export const useRatingStore = create((set) => ({ @@ -23,7 +26,11 @@ export const useRatingStore = create((set) => ({ }, isLoading: false, error: "", - getReports: async (query: string = "", page: number = 1) => { + getReports: async ( + query: string = "", + page: number = 1, + filter: { option: string; toggle: boolean } + ) => { try { set({ isLoading: true }); @@ -41,6 +48,46 @@ export const useRatingStore = create((set) => ({ data.results = [...searched]; + if (filter.option === "date" && filter.toggle === false) { + data.results = data.results.sort((a, b) => { + const dateA = new Date(a.created_at) as unknown as number; + const dateB = new Date(b.created_at) as unknown as number; + return dateA - dateB; + }); + } else if (filter.option === "date" && filter.toggle === true) { + data.results = data.results.sort((a, b) => { + const dateA = new Date(a.created_at) as unknown as number; + const dateB = new Date(b.created_at) as unknown as number; + return dateB - dateA; + }); + } + + if (filter.option === "reviews" && filter.toggle === false) { + data.results = data.results.sort( + (a, b) => a.count_reviews - b.count_reviews + ); + } else if ( + filter.option === "reviews" && + filter.toggle === true + ) { + data.results = data.results.sort( + (a, b) => b.count_reviews - a.count_reviews + ); + } + + if (filter.option === "rating" && filter.toggle === false) { + data.results = data.results.sort( + (a, b) => a.total_likes - b.total_likes + ); + } else if ( + filter.option === "rating" && + filter.toggle === true + ) { + data.results = data.results.sort( + (a, b) => b.total_likes - a.total_likes + ); + } + set({ data: data }); } catch (error: any) { set({ error: error.message }); diff --git a/src/widgets/StatisticsSection/StatisticsSection.tsx b/src/widgets/StatisticsSection/StatisticsSection.tsx index bb5f2d7..af6474f 100644 --- a/src/widgets/StatisticsSection/StatisticsSection.tsx +++ b/src/widgets/StatisticsSection/StatisticsSection.tsx @@ -1,28 +1,30 @@ import { ROAD_TYPES_STATS } from "@/shared/variables/road-types"; import "./StatisticsSection.scss"; -import { statiscsSectionStore } from "./statisticsSection.store"; +import { apiInstance } from "@/shared/config/apiConfig"; + +interface ICategoryStatistics { + category: number; + total: number; +} const StatisticsSection = async () => { - // const { getStatsCount, getErrorMessage } = statiscsSectionStore(); - // const statistics = await getStatsCount(); - // const error = getErrorMessage(); + const getCategoryStatistics = async () => { + const res = await apiInstance.get( + "/report/category_count/" + ); - const mockArray = [ - { category: 1, count: 132 }, - { category: 2, count: 12 }, - { category: 3, count: 1432 }, - { category: 4, count: 18 }, - { category: 5, count: 95 }, - { category: 6, count: 54 }, - ]; + return res.data; + }; + + const statistics = await getCategoryStatistics(); return (
    - {mockArray.map((cat) => ( + {statistics.map((cat) => (

  • {ROAD_TYPES_STATS[cat.category]}

    - {cat.count} + {cat.total}
    • ))}
diff --git a/src/widgets/StatisticsSection/statisticsSection.store.ts b/src/widgets/StatisticsSection/statisticsSection.store.ts deleted file mode 100644 index 1e3b1fd..0000000 --- a/src/widgets/StatisticsSection/statisticsSection.store.ts +++ /dev/null @@ -1,35 +0,0 @@ -import { apiInstance } from "@/shared/config/apiConfig"; -import { AxiosError } from "axios"; - -interface IStatsCount { - category: number; - count: number; -} - -export const statiscsSectionStore = () => { - let errorMessage = ""; - async function getStatsCount() { - try { - const response = await apiInstance.get( - "/report/category_count/" - ); - - return response.data; - } catch (error: unknown) { - if (error instanceof AxiosError) { - errorMessage = error.message; - } else { - errorMessage = "An error ocured"; - } - } - } - - function getErrorMessage() { - return errorMessage; - } - - return { - getStatsCount, - getErrorMessage, - }; -};