diff --git a/.gitignore b/.gitignore index 3351566..e34170a 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,7 @@ .netlify .env build +environments/.dev.preview-server.env # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies @@ -8,6 +9,7 @@ build /.pnp .pnp.js + # testing /coverage @@ -25,4 +27,4 @@ npm-debug.log* yarn-debug.log* yarn-error.log* -TODO +TODO \ No newline at end of file diff --git a/codegen.yml b/codegen.yml index 5c7e2c7..54e6960 100644 --- a/codegen.yml +++ b/codegen.yml @@ -1,11 +1,12 @@ overwrite: true -schema: "https://deploy-preview-2--makers-bolt-fun.netlify.app/.netlify/functions/graphql" -documents: "./src/components/**/*.{ts,tsx}" +schema: "https://makers-bolt-fun-preview.netlify.app/.netlify/functions/graphql" +documents: "./src/**/*.{ts,graphql}" generates: - src/generated/graphql.tsx: + src/graphql/index.tsx: plugins: - "typescript" - "typescript-operations" - "typescript-react-apollo" config: withHooks: true + avoidOptionals: true diff --git a/package-lock.json b/package-lock.json index 6c4dbd5..a8648cc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -52,8 +52,9 @@ "devDependencies": { "@craco/craco": "^6.4.0", "@graphql-codegen/cli": "2.3.0", - "@graphql-codegen/typescript": "2.4.1", - "@graphql-codegen/typescript-operations": "2.2.1", + "@graphql-codegen/typed-document-node": "^2.2.8", + "@graphql-codegen/typescript": "^2.4.1", + "@graphql-codegen/typescript-operations": "^2.2.1", "@graphql-codegen/typescript-react-apollo": "3.2.2", "@storybook/addon-actions": "^6.3.12", "@storybook/addon-essentials": "^6.3.12", @@ -2436,14 +2437,14 @@ } }, "node_modules/@graphql-codegen/plugin-helpers": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/@graphql-codegen/plugin-helpers/-/plugin-helpers-2.3.1.tgz", - "integrity": "sha512-rWH7igcjYqZ6rqNFTb4Wyp31863fRmmVpsRN8VHzBCltrepOO97jwTwB93aAw+T6Dm8aZto3QFfDIC79u8wA2Q==", + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/@graphql-codegen/plugin-helpers/-/plugin-helpers-2.4.2.tgz", + "integrity": "sha512-LJNvwAPv/sKtI3RnRDm+nPD+JeOfOuSOS4FFIpQCMUCyMnFcchV/CPTTv7tT12fLUpEg6XjuFfDBvOwndti30Q==", "dev": true, "dependencies": { "@graphql-tools/utils": "^8.5.2", "change-case-all": "1.0.14", - "common-tags": "1.8.0", + "common-tags": "1.8.2", "import-from": "4.0.0", "lodash": "~4.17.0", "tslib": "~2.3.0" @@ -2478,6 +2479,43 @@ "graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0" } }, + "node_modules/@graphql-codegen/typed-document-node": { + "version": "2.2.8", + "resolved": "https://registry.npmjs.org/@graphql-codegen/typed-document-node/-/typed-document-node-2.2.8.tgz", + "integrity": "sha512-72qTGNOMVnT51Fenk1MvavOwdyJewCZlrEp0miiTjtOSiTPzAm1acOck7cx8smNWyxNaDh3g4Jf60MkS8VCySw==", + "dev": true, + "dependencies": { + "@graphql-codegen/plugin-helpers": "^2.4.0", + "@graphql-codegen/visitor-plugin-common": "2.7.4", + "auto-bind": "~4.0.0", + "change-case-all": "1.0.14", + "tslib": "~2.3.0" + }, + "peerDependencies": { + "graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0" + } + }, + "node_modules/@graphql-codegen/typed-document-node/node_modules/@graphql-codegen/visitor-plugin-common": { + "version": "2.7.4", + "resolved": "https://registry.npmjs.org/@graphql-codegen/visitor-plugin-common/-/visitor-plugin-common-2.7.4.tgz", + "integrity": "sha512-aaDoEudDD+B7DK/UwDSL2Fzej75N9hNJ3N8FQuTIeDyw6FNGWUxmkjVBLQGlzfnYfK8IYkdfYkrPn3Skq0pVxA==", + "dev": true, + "dependencies": { + "@graphql-codegen/plugin-helpers": "^2.4.0", + "@graphql-tools/optimize": "^1.0.1", + "@graphql-tools/relay-operation-optimizer": "^6.3.7", + "@graphql-tools/utils": "^8.3.0", + "auto-bind": "~4.0.0", + "change-case-all": "1.0.14", + "dependency-graph": "^0.11.0", + "graphql-tag": "^2.11.0", + "parse-filepath": "^1.0.2", + "tslib": "~2.3.0" + }, + "peerDependencies": { + "graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0" + } + }, "node_modules/@graphql-codegen/typescript": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/@graphql-codegen/typescript/-/typescript-2.4.1.tgz", @@ -14032,9 +14070,9 @@ } }, "node_modules/common-tags": { - "version": "1.8.0", - "resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.8.0.tgz", - "integrity": "sha512-6P6g0uetGpW/sdyUy/iQQCbFF0kWVMSIVSyYz7Zgjcgh8mgw8PQzDNZeyZ5DQ2gM7LBoZPHmnjz8rUthkBG5tw==", + "version": "1.8.2", + "resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.8.2.tgz", + "integrity": "sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA==", "engines": { "node": ">=4.0.0" } @@ -62599,14 +62637,14 @@ } }, "@graphql-codegen/plugin-helpers": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/@graphql-codegen/plugin-helpers/-/plugin-helpers-2.3.1.tgz", - "integrity": "sha512-rWH7igcjYqZ6rqNFTb4Wyp31863fRmmVpsRN8VHzBCltrepOO97jwTwB93aAw+T6Dm8aZto3QFfDIC79u8wA2Q==", + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/@graphql-codegen/plugin-helpers/-/plugin-helpers-2.4.2.tgz", + "integrity": "sha512-LJNvwAPv/sKtI3RnRDm+nPD+JeOfOuSOS4FFIpQCMUCyMnFcchV/CPTTv7tT12fLUpEg6XjuFfDBvOwndti30Q==", "dev": true, "requires": { "@graphql-tools/utils": "^8.5.2", "change-case-all": "1.0.14", - "common-tags": "1.8.0", + "common-tags": "1.8.2", "import-from": "4.0.0", "lodash": "~4.17.0", "tslib": "~2.3.0" @@ -62631,6 +62669,39 @@ "tslib": "~2.3.0" } }, + "@graphql-codegen/typed-document-node": { + "version": "2.2.8", + "resolved": "https://registry.npmjs.org/@graphql-codegen/typed-document-node/-/typed-document-node-2.2.8.tgz", + "integrity": "sha512-72qTGNOMVnT51Fenk1MvavOwdyJewCZlrEp0miiTjtOSiTPzAm1acOck7cx8smNWyxNaDh3g4Jf60MkS8VCySw==", + "dev": true, + "requires": { + "@graphql-codegen/plugin-helpers": "^2.4.0", + "@graphql-codegen/visitor-plugin-common": "2.7.4", + "auto-bind": "~4.0.0", + "change-case-all": "1.0.14", + "tslib": "~2.3.0" + }, + "dependencies": { + "@graphql-codegen/visitor-plugin-common": { + "version": "2.7.4", + "resolved": "https://registry.npmjs.org/@graphql-codegen/visitor-plugin-common/-/visitor-plugin-common-2.7.4.tgz", + "integrity": "sha512-aaDoEudDD+B7DK/UwDSL2Fzej75N9hNJ3N8FQuTIeDyw6FNGWUxmkjVBLQGlzfnYfK8IYkdfYkrPn3Skq0pVxA==", + "dev": true, + "requires": { + "@graphql-codegen/plugin-helpers": "^2.4.0", + "@graphql-tools/optimize": "^1.0.1", + "@graphql-tools/relay-operation-optimizer": "^6.3.7", + "@graphql-tools/utils": "^8.3.0", + "auto-bind": "~4.0.0", + "change-case-all": "1.0.14", + "dependency-graph": "^0.11.0", + "graphql-tag": "^2.11.0", + "parse-filepath": "^1.0.2", + "tslib": "~2.3.0" + } + } + } + }, "@graphql-codegen/typescript": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/@graphql-codegen/typescript/-/typescript-2.4.1.tgz", @@ -71546,9 +71617,9 @@ "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==" }, "common-tags": { - "version": "1.8.0", - "resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.8.0.tgz", - "integrity": "sha512-6P6g0uetGpW/sdyUy/iQQCbFF0kWVMSIVSyYz7Zgjcgh8mgw8PQzDNZeyZ5DQ2gM7LBoZPHmnjz8rUthkBG5tw==" + "version": "1.8.2", + "resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.8.2.tgz", + "integrity": "sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA==" }, "commondir": { "version": "1.0.1", diff --git a/package.json b/package.json index 2f20f32..b5554e6 100644 --- a/package.json +++ b/package.json @@ -46,20 +46,20 @@ }, "scripts": { "client:prod-server": "env-cmd -f ./environments/.dev.prod-server.env craco start", + "client:preview-server": "env-cmd -f ./environments/.dev.preview-server.env craco start", "client:mocks": "env-cmd -f ./environments/.dev.mock-server.env craco start", "client:dev-server": "env-cmd -f ./environments/.dev.server.env craco start", "server:dev": "serverless offline", + "generate-graphql":"graphql-codegen", "build": "craco build", - "build:mocks": "env-cmd -f ./environments/.prod.mock-server.env craco build", + "build:mocks": "env-cmd -f ./environments/.prod.mock-server.env craco build", "test": "craco test", "eject": "react-scripts eject", - "predeploy": "env-cmd -f ./environments/.prod.github.env npm run build", "deploy": "gh-pages -d build", "only-deploy": "gh-pages -d build", "storybook": "env-cmd -f ./environments/.dev.mock-server.env start-storybook -p 6006 -s public", "build-storybook": "env-cmd -f ./environments/.prod.mock-server.env build-storybook -s public", - "db:migrate-dev": "prisma migrate dev", "db:migrate-deploy": "prisma migrate deploy", "db:reset": "prisma migrate reset", @@ -100,8 +100,9 @@ "devDependencies": { "@craco/craco": "^6.4.0", "@graphql-codegen/cli": "2.3.0", - "@graphql-codegen/typescript": "2.4.1", - "@graphql-codegen/typescript-operations": "2.2.1", + "@graphql-codegen/typed-document-node": "^2.2.8", + "@graphql-codegen/typescript": "^2.4.1", + "@graphql-codegen/typescript-operations": "^2.2.1", "@graphql-codegen/typescript-react-apollo": "3.2.2", "@storybook/addon-actions": "^6.3.12", "@storybook/addon-essentials": "^6.3.12", diff --git a/src/Components/Navbar/CategoriesList/CategoriesList.tsx b/src/Components/Navbar/CategoriesList/CategoriesList.tsx index d91d5d6..ff94b93 100644 --- a/src/Components/Navbar/CategoriesList/CategoriesList.tsx +++ b/src/Components/Navbar/CategoriesList/CategoriesList.tsx @@ -1,8 +1,7 @@ -import { useQuery } from '@apollo/client' import Skeleton from 'react-loading-skeleton' import { Link } from 'react-router-dom' +import { useNavCategoriesQuery } from 'src/graphql' import { numberFormatter } from 'src/utils/helperFunctions' -import { ALL_CATEGORIES_QUERY, ALL_CATEGORIES_QUERY_RES } from './query' interface Props { // categories: Pick[] @@ -13,8 +12,7 @@ interface Props { export default function CategoriesList({ classes = {}, onClick }: Props) { - - const { data, loading } = useQuery(ALL_CATEGORIES_QUERY); + const { data, loading } = useNavCategoriesQuery() if (loading) diff --git a/src/Components/Navbar/CategoriesList/navCategories.graphql b/src/Components/Navbar/CategoriesList/navCategories.graphql new file mode 100644 index 0000000..4aa6b73 --- /dev/null +++ b/src/Components/Navbar/CategoriesList/navCategories.graphql @@ -0,0 +1,8 @@ +query NavCategories { + allCategories { + id + title + icon + votes_sum + } +} diff --git a/src/Components/Navbar/CategoriesList/query.ts b/src/Components/Navbar/CategoriesList/query.ts deleted file mode 100644 index 66c7982..0000000 --- a/src/Components/Navbar/CategoriesList/query.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { gql } from "@apollo/client"; -import { ProjectCategory } from "src/utils/interfaces"; - -export const ALL_CATEGORIES_QUERY = gql` - query AllCategories { - allCategories { - id - title - icon - votes_sum - } - } -`; - -export type ALL_CATEGORIES_QUERY_RES = { - allCategories: Pick[]; -}; diff --git a/src/Components/Navbar/Search/Search.tsx b/src/Components/Navbar/Search/Search.tsx index 0645793..2b8bfe5 100644 --- a/src/Components/Navbar/Search/Search.tsx +++ b/src/Components/Navbar/Search/Search.tsx @@ -3,16 +3,17 @@ import { motion } from 'framer-motion' import { BsSearch } from 'react-icons/bs'; import { useClickOutside, useThrottledCallback } from '@react-hookz/web' import SearchResults from './SearchResults/SearchResults' -import { useLazyQuery } from '@apollo/client'; -import { SEARCH_PROJECTS_QUERY, SEARCH_PROJECTS_QUERY_RES_TYPE, SEARCH_PROJECTS_QUERY_VARS } from './query'; import { useAppDispatch, useAppSelector } from 'src/utils/hooks'; import { toggleSearch } from 'src/redux/features/ui.slice'; +import { SearchProjectsQuery, useSearchProjectsLazyQuery } from 'src/graphql'; interface Props { height?: number | string; width?: number | string; } +export type ProjectSearchItem = SearchProjectsQuery['searchProjects'][number]; + const SearchResultsListVariants = { hidden: { opacity: 0, @@ -46,8 +47,8 @@ export default function Search({ dispatch(toggleSearch(false)) }) - const [executeQuery, { data, loading }] = useLazyQuery(SEARCH_PROJECTS_QUERY); + const [executeQuery, { data, loading }] = useSearchProjectsLazyQuery() const throttledExecuteQuery = useThrottledCallback((search: string) => { executeQuery({ diff --git a/src/Components/Navbar/Search/SearchProjectCard/SearchProjectCard.tsx b/src/Components/Navbar/Search/SearchProjectCard/SearchProjectCard.tsx index 432a376..db422ea 100644 --- a/src/Components/Navbar/Search/SearchProjectCard/SearchProjectCard.tsx +++ b/src/Components/Navbar/Search/SearchProjectCard/SearchProjectCard.tsx @@ -1,6 +1,6 @@ -import { ProjectSearchItem } from '../query' import SearchProjectCardSkeleton from './SearchProjectCard.Skeleton' +import { ProjectSearchItem } from '../Search'; type Props = { diff --git a/src/Components/Navbar/Search/SearchResults/SearchResults.tsx b/src/Components/Navbar/Search/SearchResults/SearchResults.tsx index 5137134..897206b 100644 --- a/src/Components/Navbar/Search/SearchResults/SearchResults.tsx +++ b/src/Components/Navbar/Search/SearchResults/SearchResults.tsx @@ -2,8 +2,7 @@ import { openModal } from 'src/redux/features/modals.slice'; import { toggleSearch } from 'src/redux/features/ui.slice'; import { useAppDispatch } from 'src/utils/hooks'; -import { ProjectCard } from 'src/utils/interfaces' -import { ProjectSearchItem } from '../query'; +import { ProjectSearchItem } from '../Search'; import SearchProjectCard from '../SearchProjectCard/SearchProjectCard'; import styles from './styles.module.css' diff --git a/src/Components/Navbar/Search/query.ts b/src/Components/Navbar/Search/query.ts deleted file mode 100644 index 53d5dfb..0000000 --- a/src/Components/Navbar/Search/query.ts +++ /dev/null @@ -1,39 +0,0 @@ -import { gql } from "@apollo/client"; -import { ProjectCard, ProjectCategory } from "src/utils/interfaces"; - -export const SEARCH_PROJECTS_QUERY = gql` -query SEARCH_PROJECTS_QUERY($search: String!) { - - searchProjects(search: $search) { - id - thumbnail_image - title - category { - title - id - } - } - -} -` -export type SEARCH_PROJECTS_QUERY_VARS = { - search: string; -} - -export type ProjectSearchItem = - ( - Pick - & - { - category: Pick - } - ) - -export type SEARCH_PROJECTS_QUERY_RES_TYPE = { - searchProjects: ProjectSearchItem[], -} \ No newline at end of file diff --git a/src/Components/Navbar/Search/searchQuery.graphql b/src/Components/Navbar/Search/searchQuery.graphql new file mode 100644 index 0000000..308356e --- /dev/null +++ b/src/Components/Navbar/Search/searchQuery.graphql @@ -0,0 +1,11 @@ +query SearchProjects($search: String!) { + searchProjects(search: $search) { + id + thumbnail_image + title + category { + title + id + } + } +} diff --git a/src/generated/graphql.tsx b/src/generated/graphql.tsx deleted file mode 100644 index 28f5d7b..0000000 --- a/src/generated/graphql.tsx +++ /dev/null @@ -1,257 +0,0 @@ -import { gql } from '@apollo/client'; -import * as Apollo from '@apollo/client'; -export type Maybe = T | null; -export type InputMaybe = Maybe; -export type Exact = { [K in keyof T]: T[K] }; -export type MakeOptional = Omit & { [SubKey in K]?: Maybe }; -export type MakeMaybe = Omit & { [SubKey in K]: Maybe }; -const defaultOptions = {} -/** All built-in and custom scalars, mapped to their actual values */ -export type Scalars = { - ID: string; - String: string; - Boolean: boolean; - Int: number; - Float: number; -}; - -export type Category = { - __typename?: 'Category'; - id: Scalars['Int']; - project?: Maybe>; - title: Scalars['String']; -}; - -export type Mutation = { - __typename?: 'Mutation'; - confirmVote: Vote; - vote: Vote; -}; - - -export type MutationConfirmVoteArgs = { - payment_request: Scalars['String']; - preimage: Scalars['String']; -}; - - -export type MutationVoteArgs = { - amount_in_sat: Scalars['Int']; - project_id: Scalars['Int']; -}; - -export type Project = { - __typename?: 'Project'; - category: Category; - cover_image: Scalars['String']; - id: Scalars['Int']; - lightning_address: Scalars['String']; - thumbnail_image: Scalars['String']; - title: Scalars['String']; - votes_count: Scalars['Int']; - website: Scalars['String']; -}; - -export type Query = { - __typename?: 'Query'; - allCategories: Array; - allProjects: Array; - getCategory: Category; - getProject: Project; - newProjects: Array>; - projectsByCategory: Array>; -}; - - -export type QueryAllProjectsArgs = { - skip?: InputMaybe; - take?: InputMaybe; -}; - - -export type QueryGetCategoryArgs = { - id: Scalars['Int']; -}; - - -export type QueryGetProjectArgs = { - id: Scalars['Int']; -}; - - -export type QueryNewProjectsArgs = { - skip?: InputMaybe; - take?: InputMaybe; -}; - - -export type QueryProjectsByCategoryArgs = { - category_id: Scalars['Int']; - skip?: InputMaybe; - take?: InputMaybe; -}; - -export type Vote = { - __typename?: 'Vote'; - amount_in_sat: Scalars['Int']; - id: Scalars['Int']; - paid: Scalars['Boolean']; - payment_hash: Scalars['String']; - payment_request: Scalars['String']; - project: Project; -}; - -export type AllCategoriesQueryVariables = Exact<{ [key: string]: never; }>; - - -export type AllCategoriesQuery = { - __typename?: 'Query', - allCategories: Array<{ __typename?: 'Category', id: number, title: string }> -}; - -export type AllCategoriesProjectsQueryVariables = Exact<{ [key: string]: never; }>; - - -export type AllCategoriesProjectsQuery = { - __typename?: 'Query', - allCategories: Array<{ __typename?: 'Category', id: number, title: string, project?: Array<{ __typename?: 'Project', id: number, thumbnail_image: string, title: string, votes_count: number }> | null | undefined }>, newProjects: Array<{ __typename?: 'Project', id: number, title: string, thumbnail_image: string, votes_count: number, category: { __typename?: 'Category', title: string, id: number } }> -}; - -export type GetProjectQueryVariables = Exact<{ - getProjectId: Scalars['Int']; -}>; - - -export type GetProjectQuery = { __typename?: 'Query', getProject: { __typename?: 'Project', id: number, cover_image: string, thumbnail_image: string, title: string, website: string, votes_count: number, category: { __typename?: 'Category', id: number, title: string } } }; - - -export const AllCategoriesDocument = gql` - query AllCategories { - allCategories { - id - title - } -} - `; - -/** - * __useAllCategoriesQuery__ - * - * To run a query within a React component, call `useAllCategoriesQuery` and pass it any options that fit your needs. - * When your component renders, `useAllCategoriesQuery` returns an object from Apollo Client that contains loading, error, and data properties - * you can use to render your UI. - * - * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options; - * - * @example - * const { data, loading, error } = useAllCategoriesQuery({ - * variables: { - * }, - * }); - */ -export function useAllCategoriesQuery(baseOptions?: Apollo.QueryHookOptions) { - const options = { ...defaultOptions, ...baseOptions } - return Apollo.useQuery(AllCategoriesDocument, options); -} -export function useAllCategoriesLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions) { - const options = { ...defaultOptions, ...baseOptions } - return Apollo.useLazyQuery(AllCategoriesDocument, options); -} -export type AllCategoriesQueryHookResult = ReturnType; -export type AllCategoriesLazyQueryHookResult = ReturnType; -export type AllCategoriesQueryResult = Apollo.QueryResult; -export const AllCategoriesProjectsDocument = gql` - query AllCategoriesProjects { - allCategories { - id - title - project { - id - thumbnail_image - title - votes_count - } - } - newProjects { - id - title - thumbnail_image - votes_count - category { - title - id - } - } -} - `; - -/** - * __useAllCategoriesProjectsQuery__ - * - * To run a query within a React component, call `useAllCategoriesProjectsQuery` and pass it any options that fit your needs. - * When your component renders, `useAllCategoriesProjectsQuery` returns an object from Apollo Client that contains loading, error, and data properties - * you can use to render your UI. - * - * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options; - * - * @example - * const { data, loading, error } = useAllCategoriesProjectsQuery({ - * variables: { - * }, - * }); - */ -export function useAllCategoriesProjectsQuery(baseOptions?: Apollo.QueryHookOptions) { - const options = { ...defaultOptions, ...baseOptions } - return Apollo.useQuery(AllCategoriesProjectsDocument, options); -} -export function useAllCategoriesProjectsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions) { - const options = { ...defaultOptions, ...baseOptions } - return Apollo.useLazyQuery(AllCategoriesProjectsDocument, options); -} -export type AllCategoriesProjectsQueryHookResult = ReturnType; -export type AllCategoriesProjectsLazyQueryHookResult = ReturnType; -export type AllCategoriesProjectsQueryResult = Apollo.QueryResult; -export const GetProjectDocument = gql` - query GetProject($getProjectId: Int!) { - getProject(id: $getProjectId) { - id - cover_image - thumbnail_image - title - website - votes_count - category { - id - title - } - } -} - `; - -/** - * __useGetProjectQuery__ - * - * To run a query within a React component, call `useGetProjectQuery` and pass it any options that fit your needs. - * When your component renders, `useGetProjectQuery` returns an object from Apollo Client that contains loading, error, and data properties - * you can use to render your UI. - * - * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options; - * - * @example - * const { data, loading, error } = useGetProjectQuery({ - * variables: { - * getProjectId: // value for 'getProjectId' - * }, - * }); - */ -export function useGetProjectQuery(baseOptions: Apollo.QueryHookOptions) { - const options = { ...defaultOptions, ...baseOptions } - return Apollo.useQuery(GetProjectDocument, options); -} -export function useGetProjectLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions) { - const options = { ...defaultOptions, ...baseOptions } - return Apollo.useLazyQuery(GetProjectDocument, options); -} -export type GetProjectQueryHookResult = ReturnType; -export type GetProjectLazyQueryHookResult = ReturnType; -export type GetProjectQueryResult = Apollo.QueryResult; \ No newline at end of file diff --git a/src/graphql/index.tsx b/src/graphql/index.tsx new file mode 100644 index 0000000..1bd759e --- /dev/null +++ b/src/graphql/index.tsx @@ -0,0 +1,606 @@ +import { gql } from '@apollo/client'; +import * as Apollo from '@apollo/client'; +export type Maybe = T | null; +export type InputMaybe = Maybe; +export type Exact = { [K in keyof T]: T[K] }; +export type MakeOptional = Omit & { [SubKey in K]?: Maybe }; +export type MakeMaybe = Omit & { [SubKey in K]: Maybe }; +const defaultOptions = {} +/** All built-in and custom scalars, mapped to their actual values */ +export type Scalars = { + ID: string; + String: string; + Boolean: boolean; + Int: number; + Float: number; +}; + +export type Award = { + __typename?: 'Award'; + id: Scalars['Int']; + image: Scalars['String']; + project: Project; + title: Scalars['String']; + url: Scalars['String']; +}; + +export type Category = { + __typename?: 'Category'; + apps_count: Scalars['Int']; + cover_image: Maybe; + icon: Maybe; + id: Scalars['Int']; + project: Array; + title: Scalars['String']; + votes_sum: Scalars['Int']; +}; + +export type LnurlDetails = { + __typename?: 'LnurlDetails'; + commentAllowed: Maybe; + maxSendable: Maybe; + metadata: Maybe; + minSendable: Maybe; +}; + +export type Mutation = { + __typename?: 'Mutation'; + confirmVote: Vote; + vote: Vote; +}; + + +export type MutationConfirmVoteArgs = { + payment_request: Scalars['String']; + preimage: Scalars['String']; +}; + + +export type MutationVoteArgs = { + amount_in_sat: Scalars['Int']; + project_id: Scalars['Int']; +}; + +export type Project = { + __typename?: 'Project'; + awards: Array; + category: Category; + cover_image: Scalars['String']; + description: Scalars['String']; + id: Scalars['Int']; + lightning_address: Maybe; + lnurl_callback_url: Maybe; + screenshots: Array; + tags: Array; + thumbnail_image: Scalars['String']; + title: Scalars['String']; + votes_count: Scalars['Int']; + website: Scalars['String']; +}; + +export type Query = { + __typename?: 'Query'; + allCategories: Array; + allProjects: Array; + getCategory: Category; + getLnurlDetailsForProject: LnurlDetails; + getProject: Project; + hottestProjects: Array; + newProjects: Array; + projectsByCategory: Array; + searchProjects: Array; +}; + + +export type QueryAllProjectsArgs = { + skip?: InputMaybe; + take?: InputMaybe; +}; + + +export type QueryGetCategoryArgs = { + id: Scalars['Int']; +}; + + +export type QueryGetLnurlDetailsForProjectArgs = { + project_id: Scalars['Int']; +}; + + +export type QueryGetProjectArgs = { + id: Scalars['Int']; +}; + + +export type QueryHottestProjectsArgs = { + skip?: InputMaybe; + take?: InputMaybe; +}; + + +export type QueryNewProjectsArgs = { + skip?: InputMaybe; + take?: InputMaybe; +}; + + +export type QueryProjectsByCategoryArgs = { + category_id: Scalars['Int']; + skip?: InputMaybe; + take?: InputMaybe; +}; + + +export type QuerySearchProjectsArgs = { + search: Scalars['String']; + skip?: InputMaybe; + take?: InputMaybe; +}; + +export type Tag = { + __typename?: 'Tag'; + id: Scalars['Int']; + project: Array; + title: Scalars['String']; +}; + +export type Vote = { + __typename?: 'Vote'; + amount_in_sat: Scalars['Int']; + id: Scalars['Int']; + paid: Scalars['Boolean']; + payment_hash: Scalars['String']; + payment_request: Scalars['String']; + project: Project; +}; + +export type NavCategoriesQueryVariables = Exact<{ [key: string]: never; }>; + + +export type NavCategoriesQuery = { __typename?: 'Query', allCategories: Array<{ __typename?: 'Category', id: number, title: string, icon: string | null | undefined, votes_sum: number }> }; + +export type SearchProjectsQueryVariables = Exact<{ + search: Scalars['String']; +}>; + + +export type SearchProjectsQuery = { __typename?: 'Query', searchProjects: Array<{ __typename?: 'Project', id: number, thumbnail_image: string, title: string, category: { __typename?: 'Category', title: string, id: number } }> }; + +export type CategoryPageQueryVariables = Exact<{ + categoryId: Scalars['Int']; +}>; + + +export type CategoryPageQuery = { __typename?: 'Query', projectsByCategory: Array<{ __typename?: 'Project', id: number, thumbnail_image: string, title: string, votes_count: number, category: { __typename?: 'Category', title: string, id: number } }>, getCategory: { __typename?: 'Category', id: number, title: string, cover_image: string | null | undefined, apps_count: number } }; + +export type AllCategoriesQueryVariables = Exact<{ [key: string]: never; }>; + + +export type AllCategoriesQuery = { __typename?: 'Query', allCategories: Array<{ __typename?: 'Category', id: number, title: string }> }; + +export type ExploreProjectsQueryVariables = Exact<{ [key: string]: never; }>; + + +export type ExploreProjectsQuery = { __typename?: 'Query', allCategories: Array<{ __typename?: 'Category', id: number, title: string, project: Array<{ __typename?: 'Project', id: number, thumbnail_image: string, title: string, votes_count: number }> }>, newProjects: Array<{ __typename?: 'Project', id: number, title: string, thumbnail_image: string, votes_count: number, category: { __typename?: 'Category', title: string, id: number } }> }; + +export type HottestProjectsQueryVariables = Exact<{ [key: string]: never; }>; + + +export type HottestProjectsQuery = { __typename?: 'Query', hottestProjects: Array<{ __typename?: 'Project', id: number, thumbnail_image: string, title: string, votes_count: number, category: { __typename?: 'Category', title: string, id: number } }> }; + +export type ProjectDetailsQueryVariables = Exact<{ + projectId: Scalars['Int']; +}>; + + +export type ProjectDetailsQuery = { __typename?: 'Query', getProject: { __typename?: 'Project', id: number, title: string, description: string, cover_image: string, thumbnail_image: string, screenshots: Array, website: string, lightning_address: string | null | undefined, lnurl_callback_url: string | null | undefined, votes_count: number, category: { __typename?: 'Category', id: number, title: string }, awards: Array<{ __typename?: 'Award', title: string, image: string, url: string, id: number }>, tags: Array<{ __typename?: 'Tag', id: number, title: string }> } }; + +export type VoteMutationVariables = Exact<{ + projectId: Scalars['Int']; + amountInSat: Scalars['Int']; +}>; + + +export type VoteMutation = { __typename?: 'Mutation', vote: { __typename?: 'Vote', id: number, amount_in_sat: number, payment_request: string, payment_hash: string, paid: boolean } }; + +export type ConfirmVoteMutationVariables = Exact<{ + paymentRequest: Scalars['String']; + preimage: Scalars['String']; +}>; + + +export type ConfirmVoteMutation = { __typename?: 'Mutation', confirmVote: { __typename?: 'Vote', id: number, amount_in_sat: number, payment_request: string, payment_hash: string, paid: boolean, project: { __typename?: 'Project', id: number, votes_count: number } } }; + + +export const NavCategoriesDocument = gql` + query NavCategories { + allCategories { + id + title + icon + votes_sum + } +} + `; + +/** + * __useNavCategoriesQuery__ + * + * To run a query within a React component, call `useNavCategoriesQuery` and pass it any options that fit your needs. + * When your component renders, `useNavCategoriesQuery` returns an object from Apollo Client that contains loading, error, and data properties + * you can use to render your UI. + * + * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options; + * + * @example + * const { data, loading, error } = useNavCategoriesQuery({ + * variables: { + * }, + * }); + */ +export function useNavCategoriesQuery(baseOptions?: Apollo.QueryHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useQuery(NavCategoriesDocument, options); + } +export function useNavCategoriesLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useLazyQuery(NavCategoriesDocument, options); + } +export type NavCategoriesQueryHookResult = ReturnType; +export type NavCategoriesLazyQueryHookResult = ReturnType; +export type NavCategoriesQueryResult = Apollo.QueryResult; +export const SearchProjectsDocument = gql` + query SearchProjects($search: String!) { + searchProjects(search: $search) { + id + thumbnail_image + title + category { + title + id + } + } +} + `; + +/** + * __useSearchProjectsQuery__ + * + * To run a query within a React component, call `useSearchProjectsQuery` and pass it any options that fit your needs. + * When your component renders, `useSearchProjectsQuery` returns an object from Apollo Client that contains loading, error, and data properties + * you can use to render your UI. + * + * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options; + * + * @example + * const { data, loading, error } = useSearchProjectsQuery({ + * variables: { + * search: // value for 'search' + * }, + * }); + */ +export function useSearchProjectsQuery(baseOptions: Apollo.QueryHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useQuery(SearchProjectsDocument, options); + } +export function useSearchProjectsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useLazyQuery(SearchProjectsDocument, options); + } +export type SearchProjectsQueryHookResult = ReturnType; +export type SearchProjectsLazyQueryHookResult = ReturnType; +export type SearchProjectsQueryResult = Apollo.QueryResult; +export const CategoryPageDocument = gql` + query CategoryPage($categoryId: Int!) { + projectsByCategory(category_id: $categoryId) { + id + thumbnail_image + title + votes_count + category { + title + id + } + } + getCategory(id: $categoryId) { + id + title + cover_image + apps_count + } +} + `; + +/** + * __useCategoryPageQuery__ + * + * To run a query within a React component, call `useCategoryPageQuery` and pass it any options that fit your needs. + * When your component renders, `useCategoryPageQuery` returns an object from Apollo Client that contains loading, error, and data properties + * you can use to render your UI. + * + * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options; + * + * @example + * const { data, loading, error } = useCategoryPageQuery({ + * variables: { + * categoryId: // value for 'categoryId' + * }, + * }); + */ +export function useCategoryPageQuery(baseOptions: Apollo.QueryHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useQuery(CategoryPageDocument, options); + } +export function useCategoryPageLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useLazyQuery(CategoryPageDocument, options); + } +export type CategoryPageQueryHookResult = ReturnType; +export type CategoryPageLazyQueryHookResult = ReturnType; +export type CategoryPageQueryResult = Apollo.QueryResult; +export const AllCategoriesDocument = gql` + query AllCategories { + allCategories { + id + title + } +} + `; + +/** + * __useAllCategoriesQuery__ + * + * To run a query within a React component, call `useAllCategoriesQuery` and pass it any options that fit your needs. + * When your component renders, `useAllCategoriesQuery` returns an object from Apollo Client that contains loading, error, and data properties + * you can use to render your UI. + * + * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options; + * + * @example + * const { data, loading, error } = useAllCategoriesQuery({ + * variables: { + * }, + * }); + */ +export function useAllCategoriesQuery(baseOptions?: Apollo.QueryHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useQuery(AllCategoriesDocument, options); + } +export function useAllCategoriesLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useLazyQuery(AllCategoriesDocument, options); + } +export type AllCategoriesQueryHookResult = ReturnType; +export type AllCategoriesLazyQueryHookResult = ReturnType; +export type AllCategoriesQueryResult = Apollo.QueryResult; +export const ExploreProjectsDocument = gql` + query ExploreProjects { + allCategories { + id + title + project { + id + thumbnail_image + title + votes_count + } + } + newProjects { + id + title + thumbnail_image + votes_count + category { + title + id + } + } +} + `; + +/** + * __useExploreProjectsQuery__ + * + * To run a query within a React component, call `useExploreProjectsQuery` and pass it any options that fit your needs. + * When your component renders, `useExploreProjectsQuery` returns an object from Apollo Client that contains loading, error, and data properties + * you can use to render your UI. + * + * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options; + * + * @example + * const { data, loading, error } = useExploreProjectsQuery({ + * variables: { + * }, + * }); + */ +export function useExploreProjectsQuery(baseOptions?: Apollo.QueryHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useQuery(ExploreProjectsDocument, options); + } +export function useExploreProjectsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useLazyQuery(ExploreProjectsDocument, options); + } +export type ExploreProjectsQueryHookResult = ReturnType; +export type ExploreProjectsLazyQueryHookResult = ReturnType; +export type ExploreProjectsQueryResult = Apollo.QueryResult; +export const HottestProjectsDocument = gql` + query HottestProjects { + hottestProjects { + id + thumbnail_image + title + votes_count + category { + title + id + } + } +} + `; + +/** + * __useHottestProjectsQuery__ + * + * To run a query within a React component, call `useHottestProjectsQuery` and pass it any options that fit your needs. + * When your component renders, `useHottestProjectsQuery` returns an object from Apollo Client that contains loading, error, and data properties + * you can use to render your UI. + * + * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options; + * + * @example + * const { data, loading, error } = useHottestProjectsQuery({ + * variables: { + * }, + * }); + */ +export function useHottestProjectsQuery(baseOptions?: Apollo.QueryHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useQuery(HottestProjectsDocument, options); + } +export function useHottestProjectsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useLazyQuery(HottestProjectsDocument, options); + } +export type HottestProjectsQueryHookResult = ReturnType; +export type HottestProjectsLazyQueryHookResult = ReturnType; +export type HottestProjectsQueryResult = Apollo.QueryResult; +export const ProjectDetailsDocument = gql` + query ProjectDetails($projectId: Int!) { + getProject(id: $projectId) { + id + title + description + cover_image + thumbnail_image + screenshots + website + lightning_address + lnurl_callback_url + votes_count + category { + id + title + } + awards { + title + image + url + id + } + tags { + id + title + } + } +} + `; + +/** + * __useProjectDetailsQuery__ + * + * To run a query within a React component, call `useProjectDetailsQuery` and pass it any options that fit your needs. + * When your component renders, `useProjectDetailsQuery` returns an object from Apollo Client that contains loading, error, and data properties + * you can use to render your UI. + * + * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options; + * + * @example + * const { data, loading, error } = useProjectDetailsQuery({ + * variables: { + * projectId: // value for 'projectId' + * }, + * }); + */ +export function useProjectDetailsQuery(baseOptions: Apollo.QueryHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useQuery(ProjectDetailsDocument, options); + } +export function useProjectDetailsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useLazyQuery(ProjectDetailsDocument, options); + } +export type ProjectDetailsQueryHookResult = ReturnType; +export type ProjectDetailsLazyQueryHookResult = ReturnType; +export type ProjectDetailsQueryResult = Apollo.QueryResult; +export const VoteDocument = gql` + mutation Vote($projectId: Int!, $amountInSat: Int!) { + vote(project_id: $projectId, amount_in_sat: $amountInSat) { + id + amount_in_sat + payment_request + payment_hash + paid + } +} + `; +export type VoteMutationFn = Apollo.MutationFunction; + +/** + * __useVoteMutation__ + * + * To run a mutation, you first call `useVoteMutation` within a React component and pass it any options that fit your needs. + * When your component renders, `useVoteMutation` returns a tuple that includes: + * - A mutate function that you can call at any time to execute the mutation + * - An object with fields that represent the current status of the mutation's execution + * + * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2; + * + * @example + * const [voteMutation, { data, loading, error }] = useVoteMutation({ + * variables: { + * projectId: // value for 'projectId' + * amountInSat: // value for 'amountInSat' + * }, + * }); + */ +export function useVoteMutation(baseOptions?: Apollo.MutationHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useMutation(VoteDocument, options); + } +export type VoteMutationHookResult = ReturnType; +export type VoteMutationResult = Apollo.MutationResult; +export type VoteMutationOptions = Apollo.BaseMutationOptions; +export const ConfirmVoteDocument = gql` + mutation ConfirmVote($paymentRequest: String!, $preimage: String!) { + confirmVote(payment_request: $paymentRequest, preimage: $preimage) { + id + amount_in_sat + payment_request + payment_hash + paid + project { + id + votes_count + } + } +} + `; +export type ConfirmVoteMutationFn = Apollo.MutationFunction; + +/** + * __useConfirmVoteMutation__ + * + * To run a mutation, you first call `useConfirmVoteMutation` within a React component and pass it any options that fit your needs. + * When your component renders, `useConfirmVoteMutation` returns a tuple that includes: + * - A mutate function that you can call at any time to execute the mutation + * - An object with fields that represent the current status of the mutation's execution + * + * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2; + * + * @example + * const [confirmVoteMutation, { data, loading, error }] = useConfirmVoteMutation({ + * variables: { + * paymentRequest: // value for 'paymentRequest' + * preimage: // value for 'preimage' + * }, + * }); + */ +export function useConfirmVoteMutation(baseOptions?: Apollo.MutationHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useMutation(ConfirmVoteDocument, options); + } +export type ConfirmVoteMutationHookResult = ReturnType; +export type ConfirmVoteMutationResult = Apollo.MutationResult; +export type ConfirmVoteMutationOptions = Apollo.BaseMutationOptions; \ No newline at end of file diff --git a/src/pages/CategoryPage/CategoryPage.tsx b/src/pages/CategoryPage/CategoryPage.tsx index a876a39..999b484 100644 --- a/src/pages/CategoryPage/CategoryPage.tsx +++ b/src/pages/CategoryPage/CategoryPage.tsx @@ -1,16 +1,15 @@ -import { useQuery } from '@apollo/client'; import { useParams, Navigate } from 'react-router-dom' import ErrorMessage from 'src/Components/ErrorMessage/ErrorMessage'; +import { useCategoryPageQuery } from 'src/graphql'; import HeaderImage from './HeaderImage/HeaderImage'; import ProjectsGrid from './ProjectsGrid/ProjectsGrid'; -import { PROJECTS_IN_CATEGORY_QUERY, PROJECTS_IN_CATEGORY_QUERY_RES_TYPE, PROJECTS_IN_CATEGORY_QUERY_VARS } from './query'; export default function CategoryPage() { const { id } = useParams(); - const { data, loading, error } = useQuery(PROJECTS_IN_CATEGORY_QUERY, { + const { data, loading, error } = useCategoryPageQuery({ skip: !id, variables: { categoryId: Number(id) diff --git a/src/pages/CategoryPage/categoryPage.graphql b/src/pages/CategoryPage/categoryPage.graphql new file mode 100644 index 0000000..9ae9915 --- /dev/null +++ b/src/pages/CategoryPage/categoryPage.graphql @@ -0,0 +1,19 @@ +query CategoryPage($categoryId: Int!) { + projectsByCategory(category_id: $categoryId) { + id + thumbnail_image + title + votes_count + category { + title + id + } + } + + getCategory(id: $categoryId) { + id + title + cover_image + apps_count + } +} diff --git a/src/pages/CategoryPage/query.ts b/src/pages/CategoryPage/query.ts deleted file mode 100644 index bdea2d1..0000000 --- a/src/pages/CategoryPage/query.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { gql } from "@apollo/client"; -import { ProjectCard, ProjectCategory } from "src/utils/interfaces"; - -export const PROJECTS_IN_CATEGORY_QUERY = gql` -query PROJECTS_IN_CATEGORY_QUERY($categoryId: Int!) { - - projectsByCategory(category_id: $categoryId) { - id - thumbnail_image - title - votes_count - category { - title - id - } - } - - getCategory(id: $categoryId) { - id - title - cover_image - apps_count - } - -} -` -export type PROJECTS_IN_CATEGORY_QUERY_VARS = { - categoryId: number; -} - -export type PROJECTS_IN_CATEGORY_QUERY_RES_TYPE = { - projectsByCategory: ProjectCard[], - - getCategory: { - id: ProjectCategory['id'] - title: ProjectCategory['title'] - cover_image: ProjectCategory['cover_image'] - apps_count: ProjectCategory['apps_count'] - } -} \ No newline at end of file diff --git a/src/pages/ExplorePage/Categories/Categories.tsx b/src/pages/ExplorePage/Categories/Categories.tsx index ddf47ef..e025fc6 100644 --- a/src/pages/ExplorePage/Categories/Categories.tsx +++ b/src/pages/ExplorePage/Categories/Categories.tsx @@ -1,13 +1,13 @@ import { useQuery } from '@apollo/client'; -import { ALL_CATEGORIES_QUERY, ALL_CATEGORIES_QUERY_RES } from './query'; import Badge from 'src/Components/Badge/Badge' import Slider from 'src/Components/Slider/Slider' import { useNavigate } from 'react-router-dom'; +import { useAllCategoriesQuery } from 'src/graphql'; export default function Categories() { - const { data, loading } = useQuery(ALL_CATEGORIES_QUERY); + const { data, loading } = useAllCategoriesQuery(); const navigate = useNavigate(); if (loading || !data) diff --git a/src/pages/ExplorePage/Categories/allCategories.graphql b/src/pages/ExplorePage/Categories/allCategories.graphql new file mode 100644 index 0000000..b4f38e8 --- /dev/null +++ b/src/pages/ExplorePage/Categories/allCategories.graphql @@ -0,0 +1,6 @@ +query AllCategories { + allCategories { + id + title + } +} diff --git a/src/pages/ExplorePage/Categories/query.ts b/src/pages/ExplorePage/Categories/query.ts deleted file mode 100644 index 2f26771..0000000 --- a/src/pages/ExplorePage/Categories/query.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { gql } from "@apollo/client"; -import { ProjectCategory } from "src/utils/interfaces"; - -export const ALL_CATEGORIES_QUERY = gql` - query AllCategories { - allCategories { - id - title - } - } -`; - -export type ALL_CATEGORIES_QUERY_RES = { - allCategories: ProjectCategory[]; -}; diff --git a/src/pages/ExplorePage/ProjectsSection/ProjectsSection.tsx b/src/pages/ExplorePage/ProjectsSection/ProjectsSection.tsx index 72b9959..ebf54a8 100644 --- a/src/pages/ExplorePage/ProjectsSection/ProjectsSection.tsx +++ b/src/pages/ExplorePage/ProjectsSection/ProjectsSection.tsx @@ -1,15 +1,13 @@ import ProjectsRow from "../ProjectsRow/ProjectsRow"; import ProjectsRowSkeleton from "../ProjectsRow/ProjectsRow.Skeleton"; - import { MdLocalFireDepartment } from "react-icons/md"; -import { useQuery } from "@apollo/client"; -import { ALL_CATEGORIES_PROJECTS_QUERY, ALL_CATEGORIES_PROJECTS_RES } from "./query"; +import { useExploreProjectsQuery } from "src/graphql"; export default function ProjectsSection() { - const { data, loading } = useQuery(ALL_CATEGORIES_PROJECTS_QUERY); + const { data, loading } = useExploreProjectsQuery(); if (loading || !data) return
diff --git a/src/pages/ExplorePage/ProjectsSection/exploreProjects.graphql b/src/pages/ExplorePage/ProjectsSection/exploreProjects.graphql new file mode 100644 index 0000000..45876d5 --- /dev/null +++ b/src/pages/ExplorePage/ProjectsSection/exploreProjects.graphql @@ -0,0 +1,22 @@ +query ExploreProjects { + allCategories { + id + title + project { + id + thumbnail_image + title + votes_count + } + } + newProjects { + id + title + thumbnail_image + votes_count + category { + title + id + } + } +} diff --git a/src/pages/ExplorePage/ProjectsSection/query.ts b/src/pages/ExplorePage/ProjectsSection/query.ts deleted file mode 100644 index 8b3e993..0000000 --- a/src/pages/ExplorePage/ProjectsSection/query.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { gql } from "@apollo/client"; -import { ProjectCard, } from "src/utils/interfaces"; - -export const ALL_CATEGORIES_PROJECTS_QUERY = gql` - query AllCategoriesProjects { - allCategories { - id - title - project { - id - thumbnail_image - title - votes_count - } - } - newProjects { - id - title - thumbnail_image - votes_count - category { - title - id - } - } - } -`; - -export type ALL_CATEGORIES_PROJECTS_RES = { - newProjects: ProjectCard[], - - allCategories: { - id: number; - title: string; - project: ProjectCard[]; - }[]; -}; diff --git a/src/pages/HottestPage/HottestPage.tsx b/src/pages/HottestPage/HottestPage.tsx index d99112b..ba10779 100644 --- a/src/pages/HottestPage/HottestPage.tsx +++ b/src/pages/HottestPage/HottestPage.tsx @@ -1,18 +1,13 @@ -import { useQuery } from '@apollo/client'; import ASSETS from 'src/assets'; import ErrorMessage from 'src/Components/ErrorMessage/ErrorMessage'; import HeaderImage from 'src/pages/CategoryPage/HeaderImage/HeaderImage'; import ProjectsGrid from 'src/pages/CategoryPage/ProjectsGrid/ProjectsGrid'; -import { HOTTEST_PROJECTS_QUERY, HOTTEST_PROJECTS_QUERY_RES_TYPE } from './query'; +import { useHottestProjectsQuery } from 'src/graphql' export default function HottestPage() { - - - const { data, loading, error } = useQuery(HOTTEST_PROJECTS_QUERY); - - + const { data, loading, error } = useHottestProjectsQuery(); if (error) { return
diff --git a/src/pages/HottestPage/hottestProjects.graphql b/src/pages/HottestPage/hottestProjects.graphql new file mode 100644 index 0000000..7fa4df4 --- /dev/null +++ b/src/pages/HottestPage/hottestProjects.graphql @@ -0,0 +1,12 @@ +query HottestProjects { + hottestProjects { + id + thumbnail_image + title + votes_count + category { + title + id + } + } +} diff --git a/src/pages/HottestPage/query.ts b/src/pages/HottestPage/query.ts deleted file mode 100644 index 6f54529..0000000 --- a/src/pages/HottestPage/query.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { gql } from "@apollo/client"; -import { ProjectCard } from "src/utils/interfaces"; - -export const HOTTEST_PROJECTS_QUERY = gql` -query HOTTEST_PROJECTS { - - hottestProjects { - id - thumbnail_image - title - votes_count - category { - title - id - } - } -} -` -export type HOTTEST_PROJECTS_QUERY_VARS = { -} - -export type HOTTEST_PROJECTS_QUERY_RES_TYPE = { - - hottestProjects: ProjectCard[] -} \ No newline at end of file diff --git a/src/pages/ProjectPage/ProjectDetailsCard/ProjectDetails.graphql b/src/pages/ProjectPage/ProjectDetailsCard/ProjectDetails.graphql new file mode 100644 index 0000000..d8203e8 --- /dev/null +++ b/src/pages/ProjectPage/ProjectDetailsCard/ProjectDetails.graphql @@ -0,0 +1,28 @@ +query ProjectDetails($projectId: Int!) { + getProject(id: $projectId) { + id + title + description + cover_image + thumbnail_image + screenshots + website + lightning_address + lnurl_callback_url + votes_count + category { + id + title + } + awards { + title + image + url + id + } + tags { + id + title + } + } +} diff --git a/src/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx b/src/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx index 34b0479..0105fe8 100644 --- a/src/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx +++ b/src/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx @@ -1,16 +1,15 @@ import { BsJoystick } from 'react-icons/bs' import { MdClose, MdLocalFireDepartment } from 'react-icons/md'; import { ModalCard } from 'src/Components/Modals/ModalsContainer/ModalsContainer'; -import { useQuery } from "@apollo/client"; import { useAppDispatch, useAppSelector } from 'src/utils/hooks'; import { openModal, scheduleModal } from 'src/redux/features/modals.slice'; import { setProject } from 'src/redux/features/project.slice'; import Button from 'src/Components/Button/Button'; -import { PROJECT_BY_ID_QUERY, PROJECT_BY_ID_RES, PROJECT_BY_ID_VARS } from './query' import { AiFillThunderbolt } from 'react-icons/ai'; import ProjectCardSkeleton from './ProjectDetailsCard.Skeleton' import VoteButton from 'src/pages/ProjectPage/VoteButton/VoteButton'; import { Wallet_Service } from 'src/services' +import { useProjectDetailsQuery } from 'src/graphql'; interface Props extends ModalCard { @@ -21,15 +20,16 @@ export default function ProjectDetailsCard({ onClose, direction, projectId, ...p const dispatch = useAppDispatch(); - const { loading } = useQuery( - PROJECT_BY_ID_QUERY, - { - variables: { projectId: projectId }, - onCompleted: data => { - dispatch(setProject(data.getProject)) - }, - } - ); + + + const { loading } =useProjectDetailsQuery({ + variables: { projectId: projectId }, + onCompleted: data => { + dispatch(setProject(data.getProject)) + }, + }); + + const { isWalletConnected, project, isMobileScreen } = useAppSelector(state => ({ isWalletConnected: state.wallet.isConnected, diff --git a/src/pages/ProjectPage/ProjectDetailsCard/query.ts b/src/pages/ProjectPage/ProjectDetailsCard/query.ts deleted file mode 100644 index 4bdc1d3..0000000 --- a/src/pages/ProjectPage/ProjectDetailsCard/query.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { gql } from "@apollo/client"; -import { Project } from "src/utils/interfaces"; - -export const PROJECT_BY_ID_QUERY = gql` - query Project($projectId: Int!) { - getProject(id: $projectId) { - id - cover_image - thumbnail_image - title - description - website - votes_count - screenshots - category { - title - id - } - } - } -`; - -export interface PROJECT_BY_ID_RES { - getProject: Project; -} - -export interface PROJECT_BY_ID_VARS { - projectId: number; -} diff --git a/src/pages/ProjectPage/VoteCard/VoteCard.tsx b/src/pages/ProjectPage/VoteCard/VoteCard.tsx index a4beef3..a7a01a3 100644 --- a/src/pages/ProjectPage/VoteCard/VoteCard.tsx +++ b/src/pages/ProjectPage/VoteCard/VoteCard.tsx @@ -8,8 +8,8 @@ import { gql, useMutation, useApolloClient } from "@apollo/client"; import Confetti from "react-confetti"; import { Wallet_Service } from 'src/services'; import styles from './style.module.css' -import { CONFIRM_VOTE_QUERY, CONFIRM_VOTE_QUERY_RES_TYPE, VOTE_QUERY, VOTE_QUERY_RES_TYPE } from './query'; import { useWindowSize } from '@react-hookz/web'; +import { useConfirmVoteMutation, useVoteMutation } from 'src/graphql'; const defaultOptions = [ { text: '100 sat', value: 100 }, @@ -46,7 +46,7 @@ export default function VoteCard({ onClose, direction, initVotes, projectId, ... const [voteAmount, setVoteAmount] = useState(initVotes ?? 10); const [paymentStatus, setPaymentStatus] = useState(PaymentStatus.DEFAULT); - const [vote, { data }] = useMutation(VOTE_QUERY, { + const [vote, { data }] = useVoteMutation({ onCompleted: async (votingData) => { try { setPaymentStatus(PaymentStatus.AWAITING_PAYMENT); @@ -75,11 +75,7 @@ export default function VoteCard({ onClose, direction, initVotes, projectId, ... } }); - const [confirmVote, { data: confirmedVoteData }] = useMutation(CONFIRM_VOTE_QUERY, { - refetchQueries: [ - 'Project', - 'AllCategoriesProjects' - ], + const [confirmVote, { data: confirmedVoteData }] = useConfirmVoteMutation({ onCompleted: (votingData) => { setPaymentStatus(PaymentStatus.PAYMENT_CONFIRMED); setTimeout(() => { diff --git a/src/pages/ProjectPage/VoteCard/query.ts b/src/pages/ProjectPage/VoteCard/query.ts deleted file mode 100644 index 1c0e597..0000000 --- a/src/pages/ProjectPage/VoteCard/query.ts +++ /dev/null @@ -1,45 +0,0 @@ -import { gql } from "@apollo/client"; - -export const VOTE_QUERY = gql` -mutation Vote($projectId: Int!, $amountInSat: Int!) { - vote(project_id: $projectId, amount_in_sat: $amountInSat) { - id - amount_in_sat - payment_request - payment_hash - paid - } -} -`; - -export type VOTE_QUERY_RES_TYPE = { - vote: { - id: number; - amount_in_sat: number; - payment_request: string; - payment_hash: string; - paid: boolean; - } -} - -export const CONFIRM_VOTE_QUERY = gql` -mutation ConfirmVote($paymentRequest: String!, $preimage: String!) { - confirmVote(payment_request: $paymentRequest, preimage: $preimage) { - id - amount_in_sat - paid - payment_hash - payment_request - } -} -`; - -export type CONFIRM_VOTE_QUERY_RES_TYPE = { - confirmVote: { - id: number; - amount_in_sat: number; - paid: boolean; - payment_hash: string; - payment_request: string; - } -} \ No newline at end of file diff --git a/src/pages/ProjectPage/VoteCard/vote.graphql b/src/pages/ProjectPage/VoteCard/vote.graphql new file mode 100644 index 0000000..2fa0254 --- /dev/null +++ b/src/pages/ProjectPage/VoteCard/vote.graphql @@ -0,0 +1,23 @@ +mutation Vote($projectId: Int!, $amountInSat: Int!) { + vote(project_id: $projectId, amount_in_sat: $amountInSat) { + id + amount_in_sat + payment_request + payment_hash + paid + } +} + +mutation ConfirmVote($paymentRequest: String!, $preimage: String!) { + confirmVote(payment_request: $paymentRequest, preimage: $preimage) { + id + amount_in_sat + payment_request + payment_hash + paid + project { + id + votes_count + } + } +} diff --git a/src/utils/interfaces/misc.interfaces.ts b/src/utils/interfaces/misc.interfaces.ts index 64ec759..0740f3e 100644 --- a/src/utils/interfaces/misc.interfaces.ts +++ b/src/utils/interfaces/misc.interfaces.ts @@ -1,8 +1,4 @@ -export interface Tag { - id: string; - title: string; -} export type Image = string; \ No newline at end of file diff --git a/src/utils/interfaces/project.interfaces.ts b/src/utils/interfaces/project.interfaces.ts index 642f403..c192782 100644 --- a/src/utils/interfaces/project.interfaces.ts +++ b/src/utils/interfaces/project.interfaces.ts @@ -1,4 +1,5 @@ -import { Image, Tag } from "."; +import { Tag } from "src/graphql"; +import { Image } from "."; export interface Project { id: number; @@ -6,10 +7,10 @@ export interface Project { category: Pick; website?: string; description: string; - tags: Tag[]; + tags: Pick[]; cover_image: Image; thumbnail_image: Image; - lightning_address: string, + lightning_address?: string | null, screenshots: Image[]; votes_count: number; }