diff --git a/src/app/deals/components/DealCard/DealCard.tsx b/src/app/deals/components/DealCard/DealCard.tsx index 64fc7c1..d1adb08 100644 --- a/src/app/deals/components/DealCard/DealCard.tsx +++ b/src/app/deals/components/DealCard/DealCard.tsx @@ -1,5 +1,5 @@ import { Card } from "@mantine/core"; -import { DealSchema } from "@/types/DealSchema"; +import { DealSchema } from "@/client"; type Props = { deal: DealSchema; diff --git a/src/app/deals/components/DealContainer/DealContainer.tsx b/src/app/deals/components/DealContainer/DealContainer.tsx index 2346805..fe9ef53 100644 --- a/src/app/deals/components/DealContainer/DealContainer.tsx +++ b/src/app/deals/components/DealContainer/DealContainer.tsx @@ -1,8 +1,9 @@ import React, { FC, useMemo } from "react"; import { Box } from "@mantine/core"; import DealCard from "@/app/deals/components/DealCard/DealCard"; +import { DealSchema } from "@/client"; import { SortableItem } from "@/components/SortableDnd/SortableItem"; -import { DealSchema } from "@/types/DealSchema"; + type Props = { deal: DealSchema; diff --git a/src/app/deals/components/DndOverlay/DndOverlay.tsx b/src/app/deals/components/DndOverlay/DndOverlay.tsx index ba6006b..c634aba 100644 --- a/src/app/deals/components/DndOverlay/DndOverlay.tsx +++ b/src/app/deals/components/DndOverlay/DndOverlay.tsx @@ -3,8 +3,7 @@ import { defaultDropAnimation, DragOverlay } from "@dnd-kit/core"; import DealCard from "@/app/deals/components/DealCard/DealCard"; import StatusColumn from "@/app/deals/components/StatusColumn/StatusColumn"; import { useStatusesContext } from "@/app/deals/contexts/StatusesContext"; -import { DealSchema } from "@/types/DealSchema"; -import { StatusSchema } from "@/client"; +import { DealSchema, StatusSchema } from "@/client"; type Props = { activeDeal: DealSchema | null; diff --git a/src/app/deals/components/StatusColumn/StatusColumn.tsx b/src/app/deals/components/StatusColumn/StatusColumn.tsx index 380f3f3..6cfb77a 100644 --- a/src/app/deals/components/StatusColumn/StatusColumn.tsx +++ b/src/app/deals/components/StatusColumn/StatusColumn.tsx @@ -6,8 +6,7 @@ import { } from "@dnd-kit/sortable"; import { Box, Stack, Text } from "@mantine/core"; import DealContainer from "@/app/deals/components/DealContainer/DealContainer"; -import { StatusSchema } from "@/client"; -import { DealSchema } from "@/types/DealSchema"; +import { DealSchema, StatusSchema } from "@/client"; import { sortByLexorank } from "@/utils/lexorank"; type Props = { diff --git a/src/app/deals/contexts/StatusesContext.tsx b/src/app/deals/contexts/StatusesContext.tsx index 3693199..02bbe50 100644 --- a/src/app/deals/contexts/StatusesContext.tsx +++ b/src/app/deals/contexts/StatusesContext.tsx @@ -8,9 +8,8 @@ import React, { useState, } from "react"; import { useBoardsContext } from "@/app/deals/contexts/BoardsContext"; -import useDeals from "@/app/deals/hooks/useDeals"; -import { StatusSchema } from "@/client"; -import { DealSchema } from "@/types/DealSchema"; +import { DealSchema, StatusSchema } from "@/client"; +import useDealsList from "@/hooks/useDealsList"; type StatusesContextState = { statuses: StatusSchema[]; @@ -25,8 +24,8 @@ const StatusesContext = createContext( const useStatusesContextState = () => { const [statuses, setStatuses] = useState([]); - const { deals, setDeals } = useDeals(); const { selectedBoard } = useBoardsContext(); + const { deals, setDeals } = useDealsList({ boardId: selectedBoard?.id }); useEffect(() => { setStatuses(selectedBoard?.statuses ?? []); diff --git a/src/app/deals/hooks/useBoards.ts b/src/app/deals/hooks/useBoards.ts deleted file mode 100644 index b475145..0000000 --- a/src/app/deals/hooks/useBoards.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { useState } from "react"; -import { BoardSchema } from "@/client"; - -const useBoards = () => { - const [boards, setBoards] = useState([]); - - return { - boards, - setBoards, - }; -}; - -export default useBoards; diff --git a/src/app/deals/hooks/useDeals.ts b/src/app/deals/hooks/useDeals.ts deleted file mode 100644 index 3708b54..0000000 --- a/src/app/deals/hooks/useDeals.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { useEffect, useState } from "react"; -import { DealSchema } from "@/types/DealSchema"; - -const useDeals = () => { - const [deals, setDeals] = useState([]); - - useEffect(() => { - const INITIAL_DEALS: DealSchema[] = [ - { - id: 1, - name: "Deal 1", - lexorank: "0|gggggg:", - statusId: 1, - }, - { - id: 2, - name: "Deal 2", - lexorank: "0|mmmmmm:", - statusId: 1, - }, - { - id: 3, - name: "Deal 3", - lexorank: "0|ssssss:", - statusId: 2, - }, - ]; - setDeals(INITIAL_DEALS); - }, []); - - return { - deals, - setDeals, - }; -}; - -export default useDeals; diff --git a/src/app/deals/hooks/useDnd.ts b/src/app/deals/hooks/useDnd.ts index d30e49f..342d06e 100644 --- a/src/app/deals/hooks/useDnd.ts +++ b/src/app/deals/hooks/useDnd.ts @@ -4,8 +4,7 @@ import { throttle } from "lodash"; import { useStatusesContext } from "@/app/deals/contexts/StatusesContext"; import useGetNewRank from "@/app/deals/hooks/useGetNewRank"; import { getStatusId, isStatusId } from "@/app/deals/utils/statusId"; -import { StatusSchema } from "@/client"; -import { DealSchema } from "@/types/DealSchema"; +import { DealSchema, StatusSchema } from "@/client"; import { sortByLexorank } from "@/utils/lexorank"; type Props = { diff --git a/src/app/deals/hooks/useGetNewRank.ts b/src/app/deals/hooks/useGetNewRank.ts index 3067aff..d530b8d 100644 --- a/src/app/deals/hooks/useGetNewRank.ts +++ b/src/app/deals/hooks/useGetNewRank.ts @@ -1,6 +1,6 @@ import { LexoRank } from "lexorank"; import { useStatusesContext } from "@/app/deals/contexts/StatusesContext"; -import { DealSchema } from "@/types/DealSchema"; +import { DealSchema } from "@/client"; import { getNewLexorank, sortByLexorank } from "@/utils/lexorank"; const useGetNewRank = () => { diff --git a/src/client/@tanstack/react-query.gen.ts b/src/client/@tanstack/react-query.gen.ts index 5ce22f1..00facee 100644 --- a/src/client/@tanstack/react-query.gen.ts +++ b/src/client/@tanstack/react-query.gen.ts @@ -2,8 +2,12 @@ import { queryOptions } from "@tanstack/react-query"; import { client as _heyApiClient } from "../client.gen"; -import { getBoards, getProjects, type Options } from "../sdk.gen"; -import type { GetBoardsData, GetProjectsData } from "../types.gen"; +import { getBoards, getDeals, getProjects, type Options } from "../sdk.gen"; +import type { + GetBoardsData, + GetDealsData, + GetProjectsData, +} from "../types.gen"; export type QueryKey = [ Pick & { @@ -82,3 +86,24 @@ export const getBoardsOptions = (options: Options) => { queryKey: getBoardsQueryKey(options), }); }; + +export const getDealsQueryKey = (options: Options) => + createQueryKey("getDeals", options); + +/** + * Get Deals + */ +export const getDealsOptions = (options: Options) => { + return queryOptions({ + queryFn: async ({ queryKey, signal }) => { + const { data } = await getDeals({ + ...options, + ...queryKey[0], + signal, + throwOnError: true, + }); + return data; + }, + queryKey: getDealsQueryKey(options), + }); +}; diff --git a/src/client/sdk.gen.ts b/src/client/sdk.gen.ts index 6cada35..4f400a0 100644 --- a/src/client/sdk.gen.ts +++ b/src/client/sdk.gen.ts @@ -6,6 +6,9 @@ import type { GetBoardsData, GetBoardsErrors, GetBoardsResponses, + GetDealsData, + GetDealsErrors, + GetDealsResponses, GetProjectsData, GetProjectsResponses, } from "./types.gen"; @@ -60,3 +63,20 @@ export const getBoards = ( ...options, }); }; + +/** + * Get Deals + */ +export const getDeals = ( + options: Options +) => { + return (options.client ?? _heyApiClient).get< + GetDealsResponses, + GetDealsErrors, + ThrowOnError + >({ + responseType: "json", + url: "/deal/{board_id}", + ...options, + }); +}; diff --git a/src/client/types.gen.ts b/src/client/types.gen.ts index 88f77d8..b7c27e1 100644 --- a/src/client/types.gen.ts +++ b/src/client/types.gen.ts @@ -22,6 +22,28 @@ export type BoardSchema = { statuses: Array; }; +/** + * DealSchema + */ +export type DealSchema = { + /** + * Name + */ + name: string; + /** + * Id + */ + id: number; + /** + * Lexorank + */ + lexorank: string; + /** + * Statusid + */ + statusId: number; +}; + /** * GetBoardsResponse */ @@ -32,6 +54,16 @@ export type GetBoardsResponse = { boards: Array; }; +/** + * GetDealsResponse + */ +export type GetDealsResponse = { + /** + * Deals + */ + deals: Array; +}; + /** * GetProjectsResponse */ @@ -149,6 +181,36 @@ export type GetBoardsResponses = { export type GetBoardsResponse2 = GetBoardsResponses[keyof GetBoardsResponses]; +export type GetDealsData = { + body?: never; + path: { + /** + * Board Id + */ + board_id: number; + }; + query?: never; + url: "/deal/{board_id}"; +}; + +export type GetDealsErrors = { + /** + * Validation Error + */ + 422: HttpValidationError; +}; + +export type GetDealsError = GetDealsErrors[keyof GetDealsErrors]; + +export type GetDealsResponses = { + /** + * Successful Response + */ + 200: GetDealsResponse; +}; + +export type GetDealsResponse2 = GetDealsResponses[keyof GetDealsResponses]; + export type ClientOptions = { baseURL: "http://localhost:8000" | (string & {}); }; diff --git a/src/hooks/useDealsList.ts b/src/hooks/useDealsList.ts new file mode 100644 index 0000000..968adab --- /dev/null +++ b/src/hooks/useDealsList.ts @@ -0,0 +1,29 @@ +import { useEffect, useState } from "react"; +import { useQuery } from "@tanstack/react-query"; +import { DealSchema } from "@/client"; +import { getDealsOptions } from "@/client/@tanstack/react-query.gen"; + +type Props = { + boardId?: number; +}; + +const useDealsList = ({ boardId }: Props) => { + const [deals, setDeals] = useState([]); + + const { data, refetch, isLoading } = useQuery({ + ...getDealsOptions({ path: { board_id: boardId! } }), + enabled: boardId !== undefined, + }); + + useEffect(() => { + if (boardId === undefined) { + setDeals([]); + } else if (data?.deals) { + setDeals(data.deals); + } + }, [data?.deals, boardId]); + + return { deals, setDeals, refetch, isLoading }; +}; + +export default useDealsList; diff --git a/src/types/DealSchema.ts b/src/types/DealSchema.ts deleted file mode 100644 index f1c6c54..0000000 --- a/src/types/DealSchema.ts +++ /dev/null @@ -1,6 +0,0 @@ -export type DealSchema = { - id: number; - name: string; - lexorank: string; - statusId: number; -};