feat: add api query to get tournament open for registeration

src/features/Projects/pages/ListProjectPage/Components/TournamentsInput/TournamentsInput.tsx

@@ -1,4 +1,5 @@
 import Button from 'src/Components/Button/Button';
+import { useGetTournamentsToRegisterQuery } from 'src/graphql';
 import { random } from 'src/utils/helperFunctions';
 
 interface Props {
@@ -8,6 +9,8 @@ interface Props {
 
 export default function TournamentsInput(props: Props) {
 
+    const query = useGetTournamentsToRegisterQuery();
+
 
     const handleClick = (clickedValue: number) => {
         if (props.value.includes(clickedValue))
@@ -19,39 +22,39 @@ export default function TournamentsInput(props: Props) {
 
     return (
         <div className="flex flex-wrap gap-8">
-            {false ?
-                Array(10).fill(0).map((_, idx) =>
+            {query.loading ?
+                Array(4).fill(0).map((_, idx) =>
                     <div
                         key={idx}
                         className="bg-gray-100 border border-gray-200 p-8 rounded-10">
                         <span className='invisible'>{"loading category skeleton".slice(random(6, 12))}</span>
                     </div>)
                 :
-                data.map(item =>
-                    <Button
-                        key={item.id}
-                        color='none'
-                        size='sm'
-                        className={`
-                        border border-gray-200
+                ((query.data?.getTournamentToRegister && query.data?.getTournamentToRegister.length < 0) ?
+                    query.data?.getTournamentToRegister.map(item =>
+                        <Button
+                            key={item.id}
+                            color='none'
+                            size='sm'
+                            className={`
+                        border text-gray-800
                         ${props.value.includes(item.id) ?
-                                'title-primary-600 bg-primary-100'
-                                :
-                                "bg-gray-100"
-                            }
+                                    'title-primary-600 bg-primary-100 border-primary-200'
+                                    :
+                                    "bg-gray-100 border-gray-200"
+                                }
                         `}
-                        onClick={() => handleClick(item.id)}
-                    >
-                        {item.title}
-                    </Button>)
+                            onClick={() => handleClick(item.id)}
+                        >
+                            {item.title}
+                        </Button>)
+                    :
+                    <p className='text-gray-400 font-medium'>
+                        There is no running tournaments currently.
+                    </p>)
             }
         </div>
     )
 }
 
-const data = [
-    {
-        id: 1,
-        title: 'Legends of Lightning',
-    },
-]
+

src/features/Projects/pages/ListProjectPage/Components/TournamentsInput/tournamentsToRegister.graphql

@@ -0,0 +1,6 @@
+query GetTournamentsToRegister {
+  getTournamentToRegister {
+    id
+    title
+  }
+}

src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx

@@ -1,12 +1,10 @@
 import { useEffect, useState } from 'react'
-import { BsJoystick } from 'react-icons/bs'
 import { MdClose, MdLocalFireDepartment } from 'react-icons/md';
 import { ModalCard } from 'src/Components/Modals/ModalsContainer/ModalsContainer';
 import { useAppDispatch, useAppSelector, useMediaQuery } 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 { AiFillThunderbolt } from 'react-icons/ai';
 import ProjectCardSkeleton from './ProjectDetailsCard.Skeleton'
 // import VoteButton from 'src/features/Projects/pages/ProjectPage/VoteButton/VoteButton';
 import { NotificationsService, Wallet_Service } from 'src/services'

src/graphql/index.tsx

@@ -452,6 +452,7 @@ export type Query = {
   getProject: Project;
   getProjectsInTournament: TournamentProjectsResponse;
   getTournamentById: Tournament;
+  getTournamentToRegister: Array<Tournament>;
   getTrendingPosts: Array<Post>;
   hottestProjects: Array<Project>;
   me: Maybe<MyProfile>;
@@ -1035,6 +1036,11 @@ export type UpdateProjectMutationVariables = Exact<{
 
 export type UpdateProjectMutation = { __typename?: 'Mutation', updateProject: { __typename?: 'CreateProjectResponse', project: { __typename?: 'Project', id: number, title: string, description: string, cover_image: string, thumbnail_image: string, screenshots: Array<string>, website: string, lightning_address: string | null, lnurl_callback_url: string | null, votes_count: number, category: { __typename?: 'Category', id: number, title: string, icon: string | null }, tags: Array<{ __typename?: 'Tag', id: number, title: string, icon: string | null }>, recruit_roles: Array<{ __typename?: 'MakerRole', id: number, title: string, icon: string, level: RoleLevelEnum }> } } | null };
 
+export type GetTournamentsToRegisterQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type GetTournamentsToRegisterQuery = { __typename?: 'Query', getTournamentToRegister: Array<{ __typename?: 'Tournament', id: number, title: string }> };
+
 export type ProjectDetailsQueryVariables = Exact<{
   projectId: Scalars['Int'];
 }>;
@@ -2561,6 +2567,41 @@ export function useUpdateProjectMutation(baseOptions?: Apollo.MutationHookOption
 export type UpdateProjectMutationHookResult = ReturnType<typeof useUpdateProjectMutation>;
 export type UpdateProjectMutationResult = Apollo.MutationResult<UpdateProjectMutation>;
 export type UpdateProjectMutationOptions = Apollo.BaseMutationOptions<UpdateProjectMutation, UpdateProjectMutationVariables>;
+export const GetTournamentsToRegisterDocument = gql`
+    query GetTournamentsToRegister {
+  getTournamentToRegister {
+    id
+    title
+  }
+}
+    `;
+
+/**
+ * __useGetTournamentsToRegisterQuery__
+ *
+ * To run a query within a React component, call `useGetTournamentsToRegisterQuery` and pass it any options that fit your needs.
+ * When your component renders, `useGetTournamentsToRegisterQuery` 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 } = useGetTournamentsToRegisterQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useGetTournamentsToRegisterQuery(baseOptions?: Apollo.QueryHookOptions<GetTournamentsToRegisterQuery, GetTournamentsToRegisterQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<GetTournamentsToRegisterQuery, GetTournamentsToRegisterQueryVariables>(GetTournamentsToRegisterDocument, options);
+      }
+export function useGetTournamentsToRegisterLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetTournamentsToRegisterQuery, GetTournamentsToRegisterQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<GetTournamentsToRegisterQuery, GetTournamentsToRegisterQueryVariables>(GetTournamentsToRegisterDocument, options);
+        }
+export type GetTournamentsToRegisterQueryHookResult = ReturnType<typeof useGetTournamentsToRegisterQuery>;
+export type GetTournamentsToRegisterLazyQueryHookResult = ReturnType<typeof useGetTournamentsToRegisterLazyQuery>;
+export type GetTournamentsToRegisterQueryResult = Apollo.QueryResult<GetTournamentsToRegisterQuery, GetTournamentsToRegisterQueryVariables>;
 export const ProjectDetailsDocument = gql`
     query ProjectDetails($projectId: Int!) {
   getProject(id: $projectId) {