diff --git a/frontend/package.json b/frontend/package.json index 9dc09fda25..0eff53429f 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -18,7 +18,7 @@ "test:unit": "tsc --noEmit && NODE_OPTIONS='--experimental-vm-modules --no-warnings=DEP0040' jest" }, "dependencies": { - "@apollo/client": "^3.14.0", + "@apollo/client": "^4.0.0", "@fortawesome/fontawesome-svg-core": "^6.7.2", "@fortawesome/free-brands-svg-icons": "^6.7.2", "@fortawesome/free-regular-svg-icons": "^6.7.2", @@ -63,6 +63,7 @@ "react-dom": "^19.1.1", "react-icons": "^5.5.0", "react-router-dom": "^7.8.2", + "rxjs": "^7.8.2", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7" }, diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml index cc3e2c2433..0e5cefbc5b 100644 --- a/frontend/pnpm-lock.yaml +++ b/frontend/pnpm-lock.yaml @@ -9,8 +9,8 @@ importers: .: dependencies: '@apollo/client': - specifier: ^3.14.0 - version: 3.14.0(@types/react@19.1.12)(graphql-ws@6.0.6(graphql@16.11.0)(ws@8.18.3))(graphql@16.11.0)(react-dom@19.1.1(react@19.1.1))(react@19.1.1) + specifier: ^4.0.0 + version: 4.0.4(graphql-ws@6.0.6(graphql@16.11.0)(ws@8.18.3))(graphql@16.11.0)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(rxjs@7.8.2) '@fortawesome/fontawesome-svg-core': specifier: ^6.7.2 version: 6.7.2 @@ -143,6 +143,9 @@ importers: react-router-dom: specifier: ^7.8.2 version: 7.8.2(react-dom@19.1.1(react@19.1.1))(react@19.1.1) + rxjs: + specifier: ^7.8.2 + version: 7.8.2 tailwind-merge: specifier: ^3.3.1 version: 3.3.1 @@ -314,13 +317,14 @@ packages: resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==} engines: {node: '>=6.0.0'} - '@apollo/client@3.14.0': - resolution: {integrity: sha512-0YQKKRIxiMlIou+SekQqdCo0ZTHxOcES+K8vKB53cIDpwABNR0P0yRzPgsbgcj3zRJniD93S/ontsnZsCLZrxQ==} + '@apollo/client@4.0.4': + resolution: {integrity: sha512-3+fTQUA3AdC08urPF7si0ptLiAaVOH5R/3drwXzic8yqzTL4W3ME6klLj/EpgMND0FbWD7sM8TCkEDoe4OckMw==} peerDependencies: - graphql: ^15.0.0 || ^16.0.0 + graphql: ^16.0.0 graphql-ws: ^5.5.5 || ^6.0.3 - react: ^16.8.0 || ^17.0.0 || ^18.0.0 || >=19.0.0-rc - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || >=19.0.0-rc + react: ^17.0.0 || ^18.0.0 || >=19.0.0-rc + react-dom: ^17.0.0 || ^18.0.0 || >=19.0.0-rc + rxjs: ^7.3.0 subscriptions-transport-ws: ^0.9.0 || ^0.11.0 peerDependenciesMeta: graphql-ws: @@ -6819,17 +6823,6 @@ packages: resolution: {integrity: sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==} engines: {node: '>= 0.4'} - rehackt@0.1.0: - resolution: {integrity: sha512-7kRDOuLHB87D/JESKxQoRwv4DzbIdwkAGQ7p6QKGdVlY1IZheUnVhlk/4UZlNUVxdAXpyxikE3URsG067ybVzw==} - peerDependencies: - '@types/react': '*' - react: '*' - peerDependenciesMeta: - '@types/react': - optional: true - react: - optional: true - relay-runtime@12.0.0: resolution: {integrity: sha512-QU6JKr1tMsry22DXNy9Whsq5rmvwr3LSZiiWV/9+DFpuTWvp+WFhobWMc8TC4OjKFfNhEZy7mOiqUAn5atQtug==} @@ -7258,10 +7251,6 @@ packages: swap-case@2.0.2: resolution: {integrity: sha512-kc6S2YS/2yXbtkSMunBtKdah4VFETZ8Oh6ONSmSd9bRxhqTrtARUCBUiWXH3xVPpvR7tz2CSnkuXVE42EcGnMw==} - symbol-observable@4.0.0: - resolution: {integrity: sha512-b19dMThMV4HVFynSAM1++gBHAbk2Tc/osgLIBZMKsyqh34jb2e8Os7T6ZW/Bt3pJFdBTd2JwAnAAEQV7rSNvcQ==} - engines: {node: '>=0.10'} - symbol-tree@3.2.4: resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==} @@ -7409,10 +7398,6 @@ packages: peerDependencies: typescript: '>=4.8.4' - ts-invariant@0.10.3: - resolution: {integrity: sha512-uivwYcQaxAucv1CzRp2n/QdYPo4ILf9VXgH19zEIjFx2EJufV16P0JtJVpYHy89DItG6Kwj2oIUjrcK5au+4tQ==} - engines: {node: '>=8'} - ts-jest@29.4.1: resolution: {integrity: sha512-SaeUtjfpg9Uqu8IbeDKtdaS0g8lS6FT6OzM3ezrDfErPJPHNDo/Ey+VFGP1bQIDfagYDLyRpd7O15XpG1Es2Uw==} engines: {node: ^14.15.0 || ^16.10.0 || ^18.0.0 || >=20.0.0} @@ -7857,12 +7842,6 @@ packages: resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==} engines: {node: '>=10'} - zen-observable-ts@1.2.5: - resolution: {integrity: sha512-QZWQekv6iB72Naeake9hS1KxHlotfRpe+WGNbNx5/ta+R3DNjVO2bswf63gXlWDcs+EMd7XY8HfVQyP1X6T4Zg==} - - zen-observable@0.8.15: - resolution: {integrity: sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ==} - zod@3.25.76: resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==} @@ -7877,7 +7856,7 @@ snapshots: '@jridgewell/gen-mapping': 0.3.13 '@jridgewell/trace-mapping': 0.3.30 - '@apollo/client@3.14.0(@types/react@19.1.12)(graphql-ws@6.0.6(graphql@16.11.0)(ws@8.18.3))(graphql@16.11.0)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)': + '@apollo/client@4.0.4(graphql-ws@6.0.6(graphql@16.11.0)(ws@8.18.3))(graphql@16.11.0)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(rxjs@7.8.2)': dependencies: '@graphql-typed-document-node/core': 3.2.0(graphql@16.11.0) '@wry/caches': 1.0.1 @@ -7885,20 +7864,13 @@ snapshots: '@wry/trie': 0.5.0 graphql: 16.11.0 graphql-tag: 2.12.6(graphql@16.11.0) - hoist-non-react-statics: 3.3.2 optimism: 0.18.1 - prop-types: 15.8.1 - rehackt: 0.1.0(@types/react@19.1.12)(react@19.1.1) - symbol-observable: 4.0.0 - ts-invariant: 0.10.3 + rxjs: 7.8.2 tslib: 2.8.1 - zen-observable-ts: 1.2.5 optionalDependencies: graphql-ws: 6.0.6(graphql@16.11.0)(ws@8.18.3) react: 19.1.1 react-dom: 19.1.1(react@19.1.1) - transitivePeerDependencies: - - '@types/react' '@ardatan/relay-compiler@12.0.0(graphql@16.11.0)': dependencies: @@ -16273,11 +16245,6 @@ snapshots: gopd: 1.2.0 set-function-name: 2.0.2 - rehackt@0.1.0(@types/react@19.1.12)(react@19.1.1): - optionalDependencies: - '@types/react': 19.1.12 - react: 19.1.1 - relay-runtime@12.0.0: dependencies: '@babel/runtime': 7.28.3 @@ -16804,8 +16771,6 @@ snapshots: dependencies: tslib: 2.8.1 - symbol-observable@4.0.0: {} - symbol-tree@3.2.4: {} sync-fetch@0.6.0-2: @@ -16948,10 +16913,6 @@ snapshots: dependencies: typescript: 5.8.3 - ts-invariant@0.10.3: - dependencies: - tslib: 2.8.1 - ts-jest@29.4.1(@babel/core@7.28.3)(@jest/transform@29.7.0)(@jest/types@30.0.5)(babel-jest@29.7.0(@babel/core@7.28.3))(jest-util@30.0.5)(jest@29.7.0(@types/node@22.18.0)(ts-node@10.9.2(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/node@22.18.0)(typescript@5.8.3)))(typescript@5.8.3): dependencies: bs-logger: 0.2.6 @@ -17435,10 +17396,4 @@ snapshots: yocto-queue@0.1.0: {} - zen-observable-ts@1.2.5: - dependencies: - zen-observable: 0.8.15 - - zen-observable@0.8.15: {} - zod@3.25.76: {} diff --git a/frontend/src/app/about/page.tsx b/frontend/src/app/about/page.tsx index 690a7c3819..7fa811bb98 100644 --- a/frontend/src/app/about/page.tsx +++ b/frontend/src/app/about/page.tsx @@ -1,5 +1,5 @@ 'use client' -import { useQuery } from '@apollo/client' +import { useQuery } from '@apollo/client/react' import { faCircleCheck, faClock, @@ -19,11 +19,16 @@ import { useRouter } from 'next/navigation' import { useEffect, useState } from 'react' import FontAwesomeIconWrapper from 'wrappers/FontAwesomeIconWrapper' import { ErrorDisplay, handleAppError } from 'app/global-error' -import { GET_PROJECT_METADATA, GET_TOP_CONTRIBUTORS } from 'server/queries/projectQueries' -import { GET_LEADER_DATA } from 'server/queries/userQueries' -import type { Contributor } from 'types/contributor' -import type { Project } from 'types/project' -import type { User } from 'types/user' +import { + GetProjectMetadataDocument, + GetProjectMetadataQuery, + GetTopContributorsDocument, + GetTopContributorsQuery, +} from 'types/__generated__/projectQueries.generated' +import { + GetLeaderDataDocument, + GetLeaderDataQuery, +} from 'types/__generated__/userQueries.generated' import { aboutText, technologies } from 'utils/aboutData' import AnchorTitle from 'components/AnchorTitle' import AnimatedCounter from 'components/AnimatedCounter' @@ -42,14 +47,14 @@ const projectKey = 'nest' const About = () => { const { data: projectMetadataResponse, error: projectMetadataRequestError } = useQuery( - GET_PROJECT_METADATA, + GetProjectMetadataDocument, { variables: { key: projectKey }, } ) const { data: topContributorsResponse, error: topContributorsRequestError } = useQuery( - GET_TOP_CONTRIBUTORS, + GetTopContributorsDocument, { variables: { excludedUsernames: Object.keys(leaders), @@ -60,8 +65,12 @@ const About = () => { } ) - const [projectMetadata, setProjectMetadata] = useState(null) - const [topContributors, setTopContributors] = useState([]) + const [projectMetadata, setProjectMetadata] = useState( + null + ) + const [topContributors, setTopContributors] = useState< + GetTopContributorsQuery['topContributors'] + >([]) useEffect(() => { if (projectMetadataResponse?.project) { @@ -247,7 +256,7 @@ const About = () => { } const LeaderData = ({ username }: { username: string }) => { - const { data, loading, error } = useQuery(GET_LEADER_DATA, { + const { data, loading, error } = useQuery(GetLeaderDataDocument, { variables: { key: username }, }) const router = useRouter() @@ -261,7 +270,7 @@ const LeaderData = ({ username }: { username: string }) => { return

No data available for {username}

} - const handleButtonClick = (user: User) => { + const handleButtonClick = (user: GetLeaderDataQuery['user']) => { router.push(`/members/${user.login}`) } diff --git a/frontend/src/app/chapters/[chapterKey]/page.tsx b/frontend/src/app/chapters/[chapterKey]/page.tsx index d6a7f1a16c..54ccf8cff7 100644 --- a/frontend/src/app/chapters/[chapterKey]/page.tsx +++ b/frontend/src/app/chapters/[chapterKey]/page.tsx @@ -1,23 +1,27 @@ 'use client' -import { useQuery } from '@apollo/client' +import { useQuery } from '@apollo/client/react' import Link from 'next/link' import { useParams } from 'next/navigation' import { useState, useEffect } from 'react' import { handleAppError, ErrorDisplay } from 'app/global-error' -import { GET_CHAPTER_DATA } from 'server/queries/chapterQueries' -import type { Chapter } from 'types/chapter' +import { + GetChapterDataDocument, + GetChapterDataQuery, +} from 'types/__generated__/chapterQueries.generated' import type { Contributor } from 'types/contributor' import { formatDate } from 'utils/dateFormatter' import DetailsCard from 'components/CardDetailsPage' import LoadingSpinner from 'components/LoadingSpinner' export default function ChapterDetailsPage() { - const { chapterKey } = useParams() - const [chapter, setChapter] = useState({} as Chapter) + const { chapterKey } = useParams<{ chapterKey: string }>() + const [chapter, setChapter] = useState( + {} as GetChapterDataQuery['chapter'] + ) const [topContributors, setTopContributors] = useState([]) const [isLoading, setIsLoading] = useState(true) - const { data, error: graphQLRequestError } = useQuery(GET_CHAPTER_DATA, { + const { data, error: graphQLRequestError } = useQuery(GetChapterDataDocument, { variables: { key: chapterKey }, }) @@ -63,7 +67,7 @@ export default function ChapterDetailsPage() { () - const [committee, setCommittee] = useState(null) + const [committee, setCommittee] = useState(null) const [topContributors, setTopContributors] = useState([]) const [isLoading, setIsLoading] = useState(true) - const { data, error: graphQLRequestError } = useQuery(GET_COMMITTEE_DATA, { + const { data, error: graphQLRequestError } = useQuery(GetCommitteeDataDocument, { variables: { key: committeeKey }, }) diff --git a/frontend/src/app/members/[memberKey]/page.tsx b/frontend/src/app/members/[memberKey]/page.tsx index 3ea4f24d54..b57ded8057 100644 --- a/frontend/src/app/members/[memberKey]/page.tsx +++ b/frontend/src/app/members/[memberKey]/page.tsx @@ -1,5 +1,5 @@ 'use client' -import { useQuery } from '@apollo/client' +import { useQuery } from '@apollo/client/react' import { faCodeMerge, faFolderOpen, @@ -12,26 +12,22 @@ import { useParams } from 'next/navigation' import { useTheme } from 'next-themes' import React, { useState, useEffect, useRef } from 'react' import { handleAppError, ErrorDisplay } from 'app/global-error' -import { GET_USER_DATA } from 'server/queries/userQueries' -import type { Issue } from 'types/issue' -import type { Milestone } from 'types/milestone' -import type { RepositoryCardProps } from 'types/project' -import type { PullRequest } from 'types/pullRequest' -import type { Release } from 'types/release' -import type { UserDetails } from 'types/user' +import { GetUserDataDocument, GetUserDataQuery } from 'types/__generated__/userQueries.generated' import { formatDate } from 'utils/dateFormatter' import { drawContributions, fetchHeatmapData, HeatmapData } from 'utils/helpers/githubHeatmap' import DetailsCard from 'components/CardDetailsPage' import LoadingSpinner from 'components/LoadingSpinner' const UserDetailsPage: React.FC = () => { - const { memberKey } = useParams() - const [user, setUser] = useState() - const [issues, setIssues] = useState([]) - const [topRepositories, setTopRepositories] = useState([]) - const [milestones, setMilestones] = useState([]) - const [pullRequests, setPullRequests] = useState([]) - const [releases, setReleases] = useState([]) + const { memberKey } = useParams<{ memberKey: string }>() + const [user, setUser] = useState() + const [issues, setIssues] = useState([]) + const [topRepositories, setTopRepositories] = useState< + GetUserDataQuery['topContributedRepositories'] + >([]) + const [milestones, setMilestones] = useState([]) + const [pullRequests, setPullRequests] = useState([]) + const [releases, setReleases] = useState([]) const [data, setData] = useState({} as HeatmapData) const [isLoading, setIsLoading] = useState(true) const [username, setUsername] = useState('') @@ -40,7 +36,7 @@ const UserDetailsPage: React.FC = () => { const canvasRef = useRef(null) const theme = 'blue' - const { data: graphQLData, error: graphQLRequestError } = useQuery(GET_USER_DATA, { + const { data: graphQLData, error: graphQLRequestError } = useQuery(GetUserDataDocument, { variables: { key: memberKey }, }) diff --git a/frontend/src/app/mentorship/programs/[programKey]/modules/[moduleKey]/page.tsx b/frontend/src/app/mentorship/programs/[programKey]/modules/[moduleKey]/page.tsx index c2f4e2b1c6..fa6cd64485 100644 --- a/frontend/src/app/mentorship/programs/[programKey]/modules/[moduleKey]/page.tsx +++ b/frontend/src/app/mentorship/programs/[programKey]/modules/[moduleKey]/page.tsx @@ -1,24 +1,25 @@ 'use client' - -import { useQuery } from '@apollo/client' +import { useQuery } from '@apollo/client/react' import upperFirst from 'lodash/upperFirst' import { useParams } from 'next/navigation' import { useEffect, useState } from 'react' import { ErrorDisplay, handleAppError } from 'app/global-error' -import { GET_PROGRAM_ADMINS_AND_MODULES } from 'server/queries/moduleQueries' -import type { Module } from 'types/mentorship' +import { + GetProgramAdminsAndModulesDocument, + GetProgramAdminsAndModulesQuery, +} from 'types/__generated__/moduleQueries.generated' import { formatDate } from 'utils/dateFormatter' import DetailsCard from 'components/CardDetailsPage' import LoadingSpinner from 'components/LoadingSpinner' import { getSimpleDuration } from 'components/ModuleCard' const ModuleDetailsPage = () => { - const { programKey, moduleKey } = useParams() - const [module, setModule] = useState(null) + const { programKey, moduleKey } = useParams<{ programKey: string; moduleKey: string }>() + const [module, setModule] = useState(null) const [admins, setAdmins] = useState(null) const [isLoading, setIsLoading] = useState(true) - const { data, error } = useQuery(GET_PROGRAM_ADMINS_AND_MODULES, { + const { data, error } = useQuery(GetProgramAdminsAndModulesDocument, { variables: { programKey, moduleKey, @@ -50,11 +51,11 @@ const ModuleDetailsPage = () => { const moduleDetails = [ { label: 'Experience Level', value: upperFirst(module.experienceLevel) }, - { label: 'Start Date', value: formatDate(module.startedAt) }, - { label: 'End Date', value: formatDate(module.endedAt) }, + { label: 'Start Date', value: formatDate(module.startedAt as string) }, + { label: 'End Date', value: formatDate(module.endedAt as string) }, { label: 'Duration', - value: getSimpleDuration(module.startedAt, module.endedAt), + value: getSimpleDuration(module.startedAt as string, module.endedAt as string), }, ] diff --git a/frontend/src/app/mentorship/programs/[programKey]/page.tsx b/frontend/src/app/mentorship/programs/[programKey]/page.tsx index ccd7bbd687..4c94f71412 100644 --- a/frontend/src/app/mentorship/programs/[programKey]/page.tsx +++ b/frontend/src/app/mentorship/programs/[programKey]/page.tsx @@ -1,12 +1,13 @@ 'use client' - -import { useQuery } from '@apollo/client' +import { useQuery } from '@apollo/client/react' import upperFirst from 'lodash/upperFirst' import { useParams, useSearchParams, useRouter } from 'next/navigation' import { useEffect, useState } from 'react' import { ErrorDisplay } from 'app/global-error' -import { GET_PROGRAM_AND_MODULES } from 'server/queries/programsQueries' -import type { Module, Program } from 'types/mentorship' +import { + GetProgramAndModulesDocument, + GetProgramAndModulesQuery, +} from 'types/__generated__/programsQueries.generated' import { formatDate } from 'utils/dateFormatter' import DetailsCard from 'components/CardDetailsPage' import LoadingSpinner from 'components/LoadingSpinner' @@ -20,14 +21,14 @@ const ProgramDetailsPage = () => { data, refetch, loading: isQueryLoading, - } = useQuery(GET_PROGRAM_AND_MODULES, { + } = useQuery(GetProgramAndModulesDocument, { variables: { programKey }, skip: !programKey, notifyOnNetworkStatusChange: true, }) - const [program, setProgram] = useState(null) - const [modules, setModules] = useState([]) + const [program, setProgram] = useState(null) + const [modules, setModules] = useState([]) const [isRefetching, setIsRefetching] = useState(false) const isLoading = isQueryLoading || isRefetching @@ -71,8 +72,8 @@ const ProgramDetailsPage = () => { const programDetails = [ { label: 'Status', value: upperFirst(program.status) }, - { label: 'Start Date', value: formatDate(program.startedAt) }, - { label: 'End Date', value: formatDate(program.endedAt) }, + { label: 'Start Date', value: formatDate(program.startedAt as string) }, + { label: 'End Date', value: formatDate(program.endedAt as string) }, { label: 'Mentees Limit', value: String(program.menteesLimit) }, { label: 'Experience Levels', diff --git a/frontend/src/app/my/mentorship/page.tsx b/frontend/src/app/my/mentorship/page.tsx index 183a3a8ecb..d8fb5e235f 100644 --- a/frontend/src/app/my/mentorship/page.tsx +++ b/frontend/src/app/my/mentorship/page.tsx @@ -1,6 +1,5 @@ 'use client' - -import { useQuery } from '@apollo/client' +import { useQuery } from '@apollo/client/react' import { faPlus, faGraduationCap } from '@fortawesome/free-solid-svg-icons' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { addToast } from '@heroui/toast' @@ -9,9 +8,11 @@ import { useRouter, useSearchParams } from 'next/navigation' import { useSession } from 'next-auth/react' import React, { useEffect, useMemo, useState } from 'react' -import { GET_MY_PROGRAMS } from 'server/queries/programsQueries' +import { + GetMyProgramsDocument, + GetMyProgramsQuery, +} from 'types/__generated__/programsQueries.generated' import type { ExtendedSession } from 'types/auth' -import type { Program } from 'types/mentorship' import ActionButton from 'components/ActionButton' import LoadingSpinner from 'components/LoadingSpinner' @@ -30,7 +31,7 @@ const MyMentorshipPage: React.FC = () => { const [searchQuery, setSearchQuery] = useState(initialQuery) const [debouncedQuery, setDebouncedQuery] = useState(initialQuery) const [page, setPage] = useState(initialPage) - const [programs, setPrograms] = useState([]) + const [programs, setPrograms] = useState([]) const [totalPages, setTotalPages] = useState(1) const debounceSearch = useMemo(() => debounce((q) => setDebouncedQuery(q), 400), []) @@ -54,7 +55,7 @@ const MyMentorshipPage: React.FC = () => { data: programData, loading: loadingPrograms, error, - } = useQuery(GET_MY_PROGRAMS, { + } = useQuery(GetMyProgramsDocument, { variables: { search: debouncedQuery, page, limit: 24 }, fetchPolicy: 'cache-and-network', errorPolicy: 'all', @@ -139,7 +140,7 @@ const MyMentorshipPage: React.FC = () => { diff --git a/frontend/src/app/my/mentorship/programs/[programKey]/edit/page.tsx b/frontend/src/app/my/mentorship/programs/[programKey]/edit/page.tsx index cdfcec0ca1..c5f341b92f 100644 --- a/frontend/src/app/my/mentorship/programs/[programKey]/edit/page.tsx +++ b/frontend/src/app/my/mentorship/programs/[programKey]/edit/page.tsx @@ -1,5 +1,5 @@ 'use client' -import { useQuery, useMutation } from '@apollo/client' +import { useMutation, useQuery } from '@apollo/client/react' import { addToast } from '@heroui/toast' import { useRouter, useParams } from 'next/navigation' import { useSession } from 'next-auth/react' @@ -7,7 +7,7 @@ import type React from 'react' import { useState, useEffect } from 'react' import { ErrorDisplay, handleAppError } from 'app/global-error' import { UPDATE_PROGRAM } from 'server/mutations/programsMutations' -import { GET_PROGRAM_DETAILS } from 'server/queries/programsQueries' +import { GetProgramDetailsDocument } from 'types/__generated__/programsQueries.generated' import type { ExtendedSession } from 'types/auth' import { formatDateForInput } from 'utils/dateFormatter' import { parseCommaSeparated } from 'utils/parser' @@ -23,7 +23,7 @@ const EditProgramPage = () => { data, error, loading: queryLoading, - } = useQuery(GET_PROGRAM_DETAILS, { + } = useQuery(GetProgramDetailsDocument, { variables: { programKey }, skip: !programKey, fetchPolicy: 'network-only', @@ -74,8 +74,8 @@ const EditProgramPage = () => { name: program.name || '', description: program.description || '', menteesLimit: program.menteesLimit ?? 5, - startedAt: formatDateForInput(program.startedAt), - endedAt: formatDateForInput(program.endedAt), + startedAt: formatDateForInput(program.startedAt as string), + endedAt: formatDateForInput(program.endedAt as string), tags: (program.tags || []).join(', '), domains: (program.domains || []).join(', '), adminLogins: (program.admins || []) diff --git a/frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/edit/page.tsx b/frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/edit/page.tsx index 679eeeb803..7e5e5ba37b 100644 --- a/frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/edit/page.tsx +++ b/frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/edit/page.tsx @@ -1,6 +1,5 @@ 'use client' - -import { useMutation, useQuery } from '@apollo/client' +import { useMutation, useQuery } from '@apollo/client/react' import { addToast } from '@heroui/toast' import { useParams, useRouter } from 'next/navigation' import { useSession } from 'next-auth/react' diff --git a/frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/page.tsx b/frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/page.tsx index dc0a7356b9..e24940fa2a 100644 --- a/frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/page.tsx +++ b/frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/page.tsx @@ -1,24 +1,25 @@ 'use client' - -import { useQuery } from '@apollo/client' +import { useQuery } from '@apollo/client/react' import upperFirst from 'lodash/upperFirst' import { useParams } from 'next/navigation' import { useEffect, useState } from 'react' import { ErrorDisplay, handleAppError } from 'app/global-error' -import { GET_PROGRAM_ADMINS_AND_MODULES } from 'server/queries/moduleQueries' -import type { Module } from 'types/mentorship' +import { + GetProgramAdminsAndModulesDocument, + GetProgramAdminsAndModulesQuery, +} from 'types/__generated__/moduleQueries.generated' import { formatDate } from 'utils/dateFormatter' import DetailsCard from 'components/CardDetailsPage' import LoadingSpinner from 'components/LoadingSpinner' import { getSimpleDuration } from 'components/ModuleCard' const ModuleDetailsPage = () => { - const { programKey, moduleKey } = useParams() - const [module, setModule] = useState(null) + const { programKey, moduleKey } = useParams<{ programKey: string; moduleKey: string }>() + const [module, setModule] = useState(null) const [admins, setAdmins] = useState(null) const [isLoading, setIsLoading] = useState(true) - const { data, error } = useQuery(GET_PROGRAM_ADMINS_AND_MODULES, { + const { data, error } = useQuery(GetProgramAdminsAndModulesDocument, { variables: { programKey, moduleKey, @@ -50,11 +51,11 @@ const ModuleDetailsPage = () => { const moduleDetails = [ { label: 'Experience Level', value: upperFirst(module.experienceLevel) }, - { label: 'Start Date', value: formatDate(module.startedAt) }, - { label: 'End Date', value: formatDate(module.endedAt) }, + { label: 'Start Date', value: formatDate(module.startedAt as string) }, + { label: 'End Date', value: formatDate(module.endedAt as string) }, { label: 'Duration', - value: getSimpleDuration(module.startedAt, module.endedAt), + value: getSimpleDuration(module.startedAt as string, module.endedAt as string), }, ] diff --git a/frontend/src/app/my/mentorship/programs/[programKey]/modules/create/page.tsx b/frontend/src/app/my/mentorship/programs/[programKey]/modules/create/page.tsx index 8cc96d6d5b..d9da37009f 100644 --- a/frontend/src/app/my/mentorship/programs/[programKey]/modules/create/page.tsx +++ b/frontend/src/app/my/mentorship/programs/[programKey]/modules/create/page.tsx @@ -1,6 +1,5 @@ 'use client' - -import { useMutation, useQuery } from '@apollo/client' +import { useMutation, useQuery } from '@apollo/client/react' import { addToast } from '@heroui/toast' import { useRouter, useParams } from 'next/navigation' import { useSession } from 'next-auth/react' diff --git a/frontend/src/app/my/mentorship/programs/[programKey]/page.tsx b/frontend/src/app/my/mentorship/programs/[programKey]/page.tsx index a28ef94602..552cfa0d25 100644 --- a/frontend/src/app/my/mentorship/programs/[programKey]/page.tsx +++ b/frontend/src/app/my/mentorship/programs/[programKey]/page.tsx @@ -1,17 +1,18 @@ 'use client' - -import { useQuery, useMutation } from '@apollo/client' +import { useMutation, useQuery } from '@apollo/client/react' import { addToast } from '@heroui/toast' import upperFirst from 'lodash/upperFirst' import { useParams, useSearchParams, useRouter } from 'next/navigation' import { useSession } from 'next-auth/react' import { useEffect, useMemo, useState } from 'react' import { ErrorDisplay, handleAppError } from 'app/global-error' -import { UPDATE_PROGRAM_STATUS_MUTATION } from 'server/mutations/programsMutations' -import { GET_PROGRAM_AND_MODULES } from 'server/queries/programsQueries' +import { ProgramStatusEnum } from 'types/__generated__/graphql' +import { UpdateProgramStatusDocument } from 'types/__generated__/programsMutations.generated' +import { + GetProgramAndModulesDocument, + GetProgramAndModulesQuery, +} from 'types/__generated__/programsQueries.generated' import type { ExtendedSession } from 'types/auth' -import type { Module, Program } from 'types/mentorship' -import { ProgramStatusEnum } from 'types/mentorship' import { formatDate } from 'utils/dateFormatter' import DetailsCard from 'components/CardDetailsPage' import LoadingSpinner from 'components/LoadingSpinner' @@ -25,11 +26,11 @@ const ProgramDetailsPage = () => { const { data: session } = useSession() const username = (session as ExtendedSession)?.user?.login - const [program, setProgram] = useState(null) - const [modules, setModules] = useState([]) + const [program, setProgram] = useState(null) + const [modules, setModules] = useState([]) const [isRefetching, setIsRefetching] = useState(false) - const [updateProgram] = useMutation(UPDATE_PROGRAM_STATUS_MUTATION, { + const [updateProgram] = useMutation(UpdateProgramStatusDocument, { onError: handleAppError, }) @@ -37,7 +38,7 @@ const ProgramDetailsPage = () => { data, refetch, loading: isQueryLoading, - } = useQuery(GET_PROGRAM_AND_MODULES, { + } = useQuery(GetProgramAndModulesDocument, { variables: { programKey }, skip: !programKey, notifyOnNetworkStatusChange: true, @@ -76,7 +77,7 @@ const ProgramDetailsPage = () => { status: newStatus, }, }, - refetchQueries: [{ query: GET_PROGRAM_AND_MODULES, variables: { programKey } }], + refetchQueries: [{ query: GetProgramAndModulesDocument, variables: { programKey } }], }) addToast({ @@ -129,8 +130,8 @@ const ProgramDetailsPage = () => { const programDetails = [ { label: 'Status', value: upperFirst(program.status) }, - { label: 'Start Date', value: formatDate(program.startedAt) }, - { label: 'End Date', value: formatDate(program.endedAt) }, + { label: 'Start Date', value: formatDate(program.startedAt as string) }, + { label: 'End Date', value: formatDate(program.endedAt as string) }, { label: 'Mentees Limit', value: String(program.menteesLimit) }, { label: 'Experience Levels', @@ -140,7 +141,7 @@ const ProgramDetailsPage = () => { return ( { - const { organizationKey } = useParams() + const { organizationKey } = useParams<{ organizationKey: string }>() const [organization, setOrganization] = useState(null) const [issues, setIssues] = useState(null) const [milestones, setMilestones] = useState(null) @@ -25,7 +25,7 @@ const OrganizationDetailsPage = () => { const [repositories, setRepositories] = useState(null) const [topContributors, setTopContributors] = useState(null) const [isLoading, setIsLoading] = useState(true) - const { data: graphQLData, error: graphQLRequestError } = useQuery(GET_ORGANIZATION_DATA, { + const { data: graphQLData, error: graphQLRequestError } = useQuery(GetOrganizationDataDocument, { variables: { login: organizationKey }, }) diff --git a/frontend/src/app/organizations/[organizationKey]/repositories/[repositoryKey]/page.tsx b/frontend/src/app/organizations/[organizationKey]/repositories/[repositoryKey]/page.tsx index 05aa7329d4..ea9816a089 100644 --- a/frontend/src/app/organizations/[organizationKey]/repositories/[repositoryKey]/page.tsx +++ b/frontend/src/app/organizations/[organizationKey]/repositories/[repositoryKey]/page.tsx @@ -1,6 +1,5 @@ 'use client' - -import { useQuery } from '@apollo/client' +import { useQuery } from '@apollo/client/react' import { faCodeCommit, faCodeFork, diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx index d194b77a0b..3af708a190 100644 --- a/frontend/src/app/page.tsx +++ b/frontend/src/app/page.tsx @@ -1,5 +1,5 @@ 'use client' -import { useQuery } from '@apollo/client' +import { useQuery } from '@apollo/client/react' import { IconProp } from '@fortawesome/fontawesome-svg-core' import { faBook, diff --git a/frontend/src/app/projects/[projectKey]/page.tsx b/frontend/src/app/projects/[projectKey]/page.tsx index aa5e88c852..e9e7fff489 100644 --- a/frontend/src/app/projects/[projectKey]/page.tsx +++ b/frontend/src/app/projects/[projectKey]/page.tsx @@ -1,5 +1,5 @@ 'use client' -import { useQuery } from '@apollo/client' +import { useQuery } from '@apollo/client/react' import { faCodeFork, faExclamationCircle, @@ -12,18 +12,16 @@ import Link from 'next/link' import { useParams } from 'next/navigation' import { useState, useEffect } from 'react' import { ErrorDisplay, handleAppError } from 'app/global-error' -import { GET_PROJECT_DATA } from 'server/queries/projectQueries' -import type { Contributor } from 'types/contributor' -import type { Project } from 'types/project' +import { GetProjectDocument, GetProjectQuery } from 'types/__generated__/projectQueries.generated' import { formatDate } from 'utils/dateFormatter' import DetailsCard from 'components/CardDetailsPage' import LoadingSpinner from 'components/LoadingSpinner' const ProjectDetailsPage = () => { - const { projectKey } = useParams() + const { projectKey } = useParams<{ projectKey: string }>() const [isLoading, setIsLoading] = useState(true) - const [project, setProject] = useState(null) - const [topContributors, setTopContributors] = useState([]) - const { data, error: graphQLRequestError } = useQuery(GET_PROJECT_DATA, { + const [project, setProject] = useState(null) + const [topContributors, setTopContributors] = useState([]) + const { data, error: graphQLRequestError } = useQuery(GetProjectDocument, { variables: { key: projectKey }, }) useEffect(() => { diff --git a/frontend/src/app/projects/dashboard/metrics/[projectKey]/page.tsx b/frontend/src/app/projects/dashboard/metrics/[projectKey]/page.tsx index e64bebd0f2..35caa7291c 100644 --- a/frontend/src/app/projects/dashboard/metrics/[projectKey]/page.tsx +++ b/frontend/src/app/projects/dashboard/metrics/[projectKey]/page.tsx @@ -1,6 +1,5 @@ 'use client' - -import { useQuery } from '@apollo/client' +import { useQuery } from '@apollo/client/react' import { faPeopleGroup, faCodeFork, @@ -15,8 +14,10 @@ import { import { useParams } from 'next/navigation' import { FC, useState, useEffect } from 'react' import { handleAppError } from 'app/global-error' -import { GET_PROJECT_HEALTH_METRICS_DETAILS } from 'server/queries/projectsHealthDashboardQueries' -import { HealthMetricsProps } from 'types/healthMetrics' +import { + GetProjectHealthMetricsDetailsDocument, + GetProjectHealthMetricsDetailsQuery, +} from 'types/__generated__/projectsHealthDashboardQueries.generated' import BarChart from 'components/BarChart' import GeneralCompliantComponent from 'components/GeneralCompliantComponent' import LineChart from 'components/LineChart' @@ -25,14 +26,16 @@ import MetricsPDFButton from 'components/MetricsPDFButton' import MetricsScoreCircle from 'components/MetricsScoreCircle' const ProjectHealthMetricsDetails: FC = () => { - const { projectKey } = useParams() - const [metricsList, setMetricsList] = useState() - const [metricsLatest, setMetricsLatest] = useState() + const { projectKey } = useParams<{ projectKey: string }>() + const [metricsList, setMetricsList] = + useState() + const [metricsLatest, setMetricsLatest] = + useState() const { loading, error: graphqlError, data, - } = useQuery(GET_PROJECT_HEALTH_METRICS_DETAILS, { + } = useQuery(GetProjectHealthMetricsDetailsDocument, { variables: { projectKey }, }) @@ -54,7 +57,7 @@ const ProjectHealthMetricsDetails: FC = () => { const labels = metricsList?.map((m) => - new Date(m.createdAt).toLocaleString('default', { + new Date(m.createdAt as string).toLocaleString('default', { month: 'short', day: 'numeric', }) diff --git a/frontend/src/app/projects/dashboard/metrics/page.tsx b/frontend/src/app/projects/dashboard/metrics/page.tsx index aa2344e0a2..20015ca6be 100644 --- a/frontend/src/app/projects/dashboard/metrics/page.tsx +++ b/frontend/src/app/projects/dashboard/metrics/page.tsx @@ -1,14 +1,16 @@ 'use client' - -import { useQuery } from '@apollo/client' +import { useQuery } from '@apollo/client/react' import { faFilter } from '@fortawesome/free-solid-svg-icons' import { Pagination } from '@heroui/react' import { useSearchParams, useRouter } from 'next/navigation' import { FC, useState, useEffect } from 'react' import { handleAppError } from 'app/global-error' -import { GET_PROJECT_HEALTH_METRICS_LIST } from 'server/queries/projectsHealthDashboardQueries' +import { Ordering } from 'types/__generated__/graphql' +import { + GetProjectHealthMetricsDocument, + GetProjectHealthMetricsQuery, +} from 'types/__generated__/projectsHealthDashboardQueries.generated' import { DropDownSectionProps } from 'types/DropDownSectionProps' -import { HealthMetricsProps } from 'types/healthMetrics' import { getKeysLabels } from 'utils/getKeysLabels' import LoadingSpinner from 'components/LoadingSpinner' import MetricsCard from 'components/MetricsCard' @@ -54,11 +56,11 @@ const MetricsPage: FC = () => { let currentFilters = {} let currentOrdering = { - score: 'DESC', + score: Ordering.Desc, } const healthFilter = searchParams.get('health') const levelFilter = searchParams.get('level') - const orderingParam = searchParams.get('order') + const orderingParam = searchParams.get('order') as Ordering const currentFilterKeys = [] if (healthFilter) { currentFilters = { @@ -75,34 +77,38 @@ const MetricsPage: FC = () => { } if (orderingParam) { currentOrdering = { - score: orderingParam.toUpperCase(), + score: orderingParam, } } - const [metrics, setMetrics] = useState([]) - const [metricsLength, setMetricsLength] = useState(0) + const [metrics, setMetrics] = useState([]) + const [metricsLength, setMetricsLength] = + useState(0) const [pagination, setPagination] = useState({ offset: 0, limit: PAGINATION_LIMIT }) const [filters, setFilters] = useState(currentFilters) const [ordering, setOrdering] = useState( currentOrdering || { - score: 'DESC', + score: Ordering.Desc, } ) const [activeFilters, setActiveFilters] = useState(currentFilterKeys) - const [activeOrdering, setActiveOrdering] = useState(orderingParam ? [orderingParam] : ['desc']) + const [activeOrdering, setActiveOrdering] = useState( + orderingParam ? [orderingParam] : [Ordering.Desc] + ) const { data, error: graphQLRequestError, loading, fetchMore, - } = useQuery(GET_PROJECT_HEALTH_METRICS_LIST, { + } = useQuery(GetProjectHealthMetricsDocument, { variables: { filters, pagination: { offset: 0, limit: PAGINATION_LIMIT }, ordering: [ ordering, { - ['project_Name']: 'ASC', + // eslint-disable-next-line @typescript-eslint/naming-convention + project_Name: Ordering.Asc, }, ], }, @@ -203,13 +209,13 @@ const MetricsPage: FC = () => { selectionMode="single" selectedKeys={activeOrdering} selectedLabels={getKeysLabels(orderingSections, activeOrdering)} - onAction={(key: string) => { + onAction={(key: Ordering) => { // Reset pagination to the first page when changing ordering setPagination({ offset: 0, limit: PAGINATION_LIMIT }) const newParams = new URLSearchParams(searchParams.toString()) newParams.set('order', key) setOrdering({ - score: key.toUpperCase(), + score: key, }) setActiveOrdering([key]) router.replace(`/projects/dashboard/metrics?${newParams.toString()}`) @@ -235,7 +241,7 @@ const MetricsPage: FC = () => { No metrics found. Try adjusting your filters. ) : ( - metrics.map((metric) => ) + metrics.map((metric) => ) //TODO: update types )}
@@ -254,7 +260,8 @@ const MetricsPage: FC = () => { ordering: [ ordering, { - ['project_Name']: 'ASC', + // eslint-disable-next-line @typescript-eslint/naming-convention + project_Name: Ordering.Asc, }, ], }, diff --git a/frontend/src/app/projects/dashboard/page.tsx b/frontend/src/app/projects/dashboard/page.tsx index 6c0a15d0a5..3b800f22b9 100644 --- a/frontend/src/app/projects/dashboard/page.tsx +++ b/frontend/src/app/projects/dashboard/page.tsx @@ -1,5 +1,5 @@ 'use client' -import { useQuery } from '@apollo/client' +import { useQuery } from '@apollo/client/react' import type { IconProp } from '@fortawesome/fontawesome-svg-core' import { faCheck, @@ -15,8 +15,10 @@ import { import millify from 'millify' import { useState, useEffect, FC } from 'react' import { handleAppError } from 'app/global-error' -import { GET_PROJECT_HEALTH_STATS } from 'server/queries/projectsHealthDashboardQueries' -import type { ProjectHealthStats } from 'types/projectHealthStats' +import { + GetProjectHealthStatsDocument, + GetProjectHealthStatsQuery, +} from 'types/__generated__/projectsHealthDashboardQueries.generated' import DashboardCard from 'components/DashboardCard' import DonutBarChart from 'components/DonutBarChart' import LineChart from 'components/LineChart' @@ -25,9 +27,9 @@ import MetricsPDFButton from 'components/MetricsPDFButton' import ProjectTypeDashboardCard from 'components/ProjectTypeDashboardCard' const ProjectsDashboardPage: FC = () => { - const [stats, setStats] = useState() + const [stats, setStats] = useState() const [isLoading, setIsLoading] = useState(true) - const { data, error: graphQLRequestError } = useQuery(GET_PROJECT_HEALTH_STATS) + const { data, error: graphQLRequestError } = useQuery(GetProjectHealthStatsDocument) useEffect(() => { if (data) { diff --git a/frontend/src/app/settings/api-keys/page.tsx b/frontend/src/app/settings/api-keys/page.tsx index 4380356f3a..2dc732d9ad 100644 --- a/frontend/src/app/settings/api-keys/page.tsx +++ b/frontend/src/app/settings/api-keys/page.tsx @@ -1,6 +1,5 @@ 'use client' - -import { useMutation, useQuery } from '@apollo/client' +import { useMutation, useQuery } from '@apollo/client/react' import { faSpinner, faKey, @@ -18,8 +17,12 @@ import { Input } from '@heroui/react' import { addToast } from '@heroui/toast' import { format, addDays } from 'date-fns' import { useState } from 'react' -import { CREATE_API_KEY, GET_API_KEYS, REVOKE_API_KEY } from 'server/queries/apiKeyQueries' -import type { ApiKey } from 'types/apiKey' +import { + CreateApiKeyDocument, + GetApiKeysDocument, + GetApiKeysQuery, + RevokeApiKeyDocument, +} from 'types/__generated__/apiKeyQueries.generated' import SecondaryCard from 'components/SecondaryCard' import { ApiKeysSkeleton } from 'components/skeletons/ApiKeySkelton' @@ -31,14 +34,14 @@ export default function Page() { const [newKeyExpiry, setNewKeyExpiry] = useState('') const [showNewKey, setShowNewKey] = useState(false) const [newlyCreatedKey, setNewlyCreatedKey] = useState(null) - const [keyToRevoke, setKeyToRevoke] = useState(null) + const [keyToRevoke, setKeyToRevoke] = useState(null) - const { loading, error, data, refetch } = useQuery(GET_API_KEYS, { + const { loading, error, data, refetch } = useQuery(GetApiKeysDocument, { notifyOnNetworkStatusChange: true, errorPolicy: 'all', }) - const [createApiKey, { loading: createLoading }] = useMutation(CREATE_API_KEY, { + const [createApiKey, { loading: createLoading }] = useMutation(CreateApiKeyDocument, { onCompleted: (data) => { const result = data.createApiKey if (!result?.ok) { @@ -62,7 +65,7 @@ export default function Page() { }, }) - const [revokeApiKey] = useMutation(REVOKE_API_KEY, { + const [revokeApiKey] = useMutation(RevokeApiKeyDocument, { onCompleted: () => { addToast({ title: 'Success', description: 'API key revoked', color: 'success' }) refetch() @@ -236,16 +239,16 @@ export default function Page() { - {data.apiKeys.map((key: ApiKey) => ( + {data.apiKeys.map((key: GetApiKeysQuery['apiKeys'][0]) => ( {key.name} - {key.uuid} - {format(new Date(key.createdAt), 'PP')} + {key.uuid as string} + {format(new Date(key.createdAt as string), 'PP')} - {key.expiresAt ? format(new Date(key.expiresAt), 'PP') : 'Never'} + {key.expiresAt ? format(new Date(key.expiresAt as string), 'PP') : 'Never'}
@@ -135,12 +135,13 @@ const SnapshotDetailsPage: React.FC = () => {
+ {' '} {snapshot.newChapters.filter((chapter) => chapter.isActive).map(renderChapterCard)}
@@ -182,7 +183,7 @@ const SnapshotDetailsPage: React.FC = () => {
- Released: {formatDate(release.publishedAt)} + Released: {formatDate(release.publishedAt as string)}
diff --git a/frontend/src/app/snapshots/page.tsx b/frontend/src/app/snapshots/page.tsx index cf0312c0a8..307b4420d6 100644 --- a/frontend/src/app/snapshots/page.tsx +++ b/frontend/src/app/snapshots/page.tsx @@ -1,19 +1,21 @@ 'use client' -import { useQuery } from '@apollo/client' +import { useQuery } from '@apollo/client/react' import { addToast } from '@heroui/toast' import { useRouter } from 'next/navigation' import React, { useState, useEffect } from 'react' import FontAwesomeIconWrapper from 'wrappers/FontAwesomeIconWrapper' -import { GET_COMMUNITY_SNAPSHOTS } from 'server/queries/snapshotQueries' -import type { Snapshot } from 'types/snapshot' +import { + GetCommunitySnapshotsDocument, + GetCommunitySnapshotsQuery, +} from 'types/__generated__/snapshotQueries.generated' import LoadingSpinner from 'components/LoadingSpinner' import SnapshotCard from 'components/SnapshotCard' const SnapshotsPage: React.FC = () => { - const [snapshots, setSnapshots] = useState(null) + const [snapshots, setSnapshots] = useState(null) const [isLoading, setIsLoading] = useState(true) - const { data: graphQLData, error: graphQLRequestError } = useQuery(GET_COMMUNITY_SNAPSHOTS) + const { data: graphQLData, error: graphQLRequestError } = useQuery(GetCommunitySnapshotsDocument) useEffect(() => { if (graphQLData) { @@ -35,11 +37,11 @@ const SnapshotsPage: React.FC = () => { const router = useRouter() - const handleButtonClick = (snapshot: Snapshot) => { + const handleButtonClick = (snapshot: GetCommunitySnapshotsQuery['snapshots'][0]) => { router.push(`/snapshots/${snapshot.key}`) } - const renderSnapshotCard = (snapshot: Snapshot) => { + const renderSnapshotCard = (snapshot: GetCommunitySnapshotsQuery['snapshots'][0]) => { const SubmitButton = { label: 'View Details', icon: , @@ -51,8 +53,8 @@ const SnapshotsPage: React.FC = () => { key={snapshot.key} title={snapshot.title} button={SubmitButton} - startAt={snapshot.startAt} - endAt={snapshot.endAt} + startAt={snapshot.startAt as string} + endAt={snapshot.endAt as string} /> ) } @@ -68,7 +70,7 @@ const SnapshotsPage: React.FC = () => { {!snapshots?.length ? (
No Snapshots found
) : ( - snapshots.map((snapshot: Snapshot) => ( + snapshots.map((snapshot: GetCommunitySnapshotsQuery['snapshots'][0]) => (
{renderSnapshotCard(snapshot)}
)) )} diff --git a/frontend/src/components/CardDetailsPage.tsx b/frontend/src/components/CardDetailsPage.tsx index 0e288b327b..3990d0d4ad 100644 --- a/frontend/src/components/CardDetailsPage.tsx +++ b/frontend/src/components/CardDetailsPage.tsx @@ -35,6 +35,7 @@ import SponsorCard from 'components/SponsorCard' import ToggleableList from 'components/ToggleableList' import TopContributorsList from 'components/TopContributorsList' +// TODO: update types const DetailsCard = ({ description, details, diff --git a/frontend/src/components/ModuleForm.tsx b/frontend/src/components/ModuleForm.tsx index 8e5e498417..52390b4688 100644 --- a/frontend/src/components/ModuleForm.tsx +++ b/frontend/src/components/ModuleForm.tsx @@ -1,12 +1,11 @@ 'use client' - -import { useApolloClient } from '@apollo/client' +import { useApolloClient } from '@apollo/client/react' import clsx from 'clsx' import debounce from 'lodash/debounce' import { useRouter } from 'next/navigation' import type React from 'react' import { useState, useEffect, useCallback, useRef } from 'react' -import { SEARCH_PROJECTS } from 'server/queries/projectQueries' +import { SearchProjectNamesDocument } from 'types/__generated__/projectQueries.generated' interface ModuleFormProps { formData: { @@ -272,7 +271,7 @@ export const ProjectSelector = ({ value, defaultName, onProjectChange }: Project try { const { data } = await client.query({ - query: SEARCH_PROJECTS, + query: SearchProjectNamesDocument, variables: { query }, }) diff --git a/frontend/src/hooks/useDjangoSession.ts b/frontend/src/hooks/useDjangoSession.ts index b61efd2709..9a26c0905a 100644 --- a/frontend/src/hooks/useDjangoSession.ts +++ b/frontend/src/hooks/useDjangoSession.ts @@ -1,8 +1,8 @@ -import { useMutation } from '@apollo/client' +import { useMutation } from '@apollo/client/react' import { addToast } from '@heroui/toast' import { useSession, signOut } from 'next-auth/react' import { useEffect, useState } from 'react' -import { SYNC_DJANGO_SESSION_MUTATION } from 'server/queries/authQueries' +import { SyncDjangoSessionDocument } from 'types/__generated__/authQueries.generated' import { ExtendedSession } from 'types/auth' const SYNC_STATUS_KEY = 'django_session_synced' @@ -13,7 +13,7 @@ export const useDjangoSession: () => { status: string } = () => { const { data: session, status, update } = useSession() - const [syncSession, { loading }] = useMutation(SYNC_DJANGO_SESSION_MUTATION) + const [syncSession, { loading }] = useMutation(SyncDjangoSessionDocument) const [isSyncing, setIsSyncing] = useState(false) useEffect(() => { diff --git a/frontend/src/hooks/useLogout.ts b/frontend/src/hooks/useLogout.ts index b51fe52bcf..7e8e52f68f 100644 --- a/frontend/src/hooks/useLogout.ts +++ b/frontend/src/hooks/useLogout.ts @@ -1,4 +1,4 @@ -import { useMutation } from '@apollo/client' +import { useMutation } from '@apollo/client/react' import { signOut } from 'next-auth/react' import { useState } from 'react' import { LOGOUT_DJANGO_MUTATION } from 'server/queries/authQueries' diff --git a/frontend/src/server/apolloClient.ts b/frontend/src/server/apolloClient.ts index 647eecfad1..ee490a7d1b 100644 --- a/frontend/src/server/apolloClient.ts +++ b/frontend/src/server/apolloClient.ts @@ -1,4 +1,4 @@ -import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client' +import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client' import { setContext } from '@apollo/client/link/context' import { cookies } from 'next/headers' import { fetchCsrfTokenServer } from 'server/fetchCsrfTokenServer' @@ -16,7 +16,7 @@ async function createApolloClient() { }, } }) - const httpLink = createHttpLink({ + const httpLink = new HttpLink({ credentials: 'same-origin', uri: process.env.NEXT_SERVER_GRAPHQL_URL, }) diff --git a/frontend/src/server/queries/userQueries.ts b/frontend/src/server/queries/userQueries.ts index dd9c24cb76..5bf0573638 100644 --- a/frontend/src/server/queries/userQueries.ts +++ b/frontend/src/server/queries/userQueries.ts @@ -5,6 +5,8 @@ export const GET_LEADER_DATA = gql` user(login: $key) { id avatarUrl + company + location login name } diff --git a/frontend/src/types/__generated__/userQueries.generated.ts b/frontend/src/types/__generated__/userQueries.generated.ts index 5455b2eae6..6d50491dfc 100644 --- a/frontend/src/types/__generated__/userQueries.generated.ts +++ b/frontend/src/types/__generated__/userQueries.generated.ts @@ -6,7 +6,7 @@ export type GetLeaderDataQueryVariables = Types.Exact<{ }>; -export type GetLeaderDataQuery = { user: { __typename: 'UserNode', id: string, avatarUrl: string, login: string, name: string } | null }; +export type GetLeaderDataQuery = { user: { __typename: 'UserNode', id: string, avatarUrl: string, company: string, location: string, login: string, name: string } | null }; export type GetUserDataQueryVariables = Types.Exact<{ key: Types.Scalars['String']['input']; @@ -23,6 +23,6 @@ export type GetUserMetadataQueryVariables = Types.Exact<{ export type GetUserMetadataQuery = { user: { __typename: 'UserNode', id: string, bio: string, login: string, name: string } | null }; -export const GetLeaderDataDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetLeaderData"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"key"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"user"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"login"},"value":{"kind":"Variable","name":{"kind":"Name","value":"key"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"avatarUrl"}},{"kind":"Field","name":{"kind":"Name","value":"login"}},{"kind":"Field","name":{"kind":"Name","value":"name"}}]}}]}}]} as unknown as DocumentNode; +export const GetLeaderDataDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetLeaderData"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"key"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"user"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"login"},"value":{"kind":"Variable","name":{"kind":"Name","value":"key"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"avatarUrl"}},{"kind":"Field","name":{"kind":"Name","value":"company"}},{"kind":"Field","name":{"kind":"Name","value":"location"}},{"kind":"Field","name":{"kind":"Name","value":"login"}},{"kind":"Field","name":{"kind":"Name","value":"name"}}]}}]}}]} as unknown as DocumentNode; export const GetUserDataDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetUserData"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"key"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"recentIssues"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"limit"},"value":{"kind":"IntValue","value":"5"}},{"kind":"Argument","name":{"kind":"Name","value":"login"},"value":{"kind":"Variable","name":{"kind":"Name","value":"key"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"organizationName"}},{"kind":"Field","name":{"kind":"Name","value":"repositoryName"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"url"}}]}},{"kind":"Field","name":{"kind":"Name","value":"recentMilestones"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"limit"},"value":{"kind":"IntValue","value":"5"}},{"kind":"Argument","name":{"kind":"Name","value":"login"},"value":{"kind":"Variable","name":{"kind":"Name","value":"key"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"openIssuesCount"}},{"kind":"Field","name":{"kind":"Name","value":"closedIssuesCount"}},{"kind":"Field","name":{"kind":"Name","value":"repositoryName"}},{"kind":"Field","name":{"kind":"Name","value":"organizationName"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"url"}}]}},{"kind":"Field","name":{"kind":"Name","value":"recentPullRequests"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"limit"},"value":{"kind":"IntValue","value":"5"}},{"kind":"Argument","name":{"kind":"Name","value":"login"},"value":{"kind":"Variable","name":{"kind":"Name","value":"key"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"organizationName"}},{"kind":"Field","name":{"kind":"Name","value":"repositoryName"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"url"}}]}},{"kind":"Field","name":{"kind":"Name","value":"recentReleases"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"limit"},"value":{"kind":"IntValue","value":"5"}},{"kind":"Argument","name":{"kind":"Name","value":"login"},"value":{"kind":"Variable","name":{"kind":"Name","value":"key"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"isPreRelease"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"publishedAt"}},{"kind":"Field","name":{"kind":"Name","value":"organizationName"}},{"kind":"Field","name":{"kind":"Name","value":"repositoryName"}},{"kind":"Field","name":{"kind":"Name","value":"tagName"}},{"kind":"Field","name":{"kind":"Name","value":"url"}}]}},{"kind":"Field","name":{"kind":"Name","value":"topContributedRepositories"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"login"},"value":{"kind":"Variable","name":{"kind":"Name","value":"key"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"contributorsCount"}},{"kind":"Field","name":{"kind":"Name","value":"forksCount"}},{"kind":"Field","name":{"kind":"Name","value":"key"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"openIssuesCount"}},{"kind":"Field","name":{"kind":"Name","value":"organization"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"login"}}]}},{"kind":"Field","name":{"kind":"Name","value":"starsCount"}},{"kind":"Field","name":{"kind":"Name","value":"subscribersCount"}},{"kind":"Field","name":{"kind":"Name","value":"url"}}]}},{"kind":"Field","name":{"kind":"Name","value":"user"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"login"},"value":{"kind":"Variable","name":{"kind":"Name","value":"key"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"avatarUrl"}},{"kind":"Field","name":{"kind":"Name","value":"bio"}},{"kind":"Field","name":{"kind":"Name","value":"company"}},{"kind":"Field","name":{"kind":"Name","value":"contributionsCount"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"email"}},{"kind":"Field","name":{"kind":"Name","value":"followersCount"}},{"kind":"Field","name":{"kind":"Name","value":"followingCount"}},{"kind":"Field","name":{"kind":"Name","value":"issuesCount"}},{"kind":"Field","name":{"kind":"Name","value":"location"}},{"kind":"Field","name":{"kind":"Name","value":"login"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"publicRepositoriesCount"}},{"kind":"Field","name":{"kind":"Name","value":"releasesCount"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"url"}}]}}]}}]} as unknown as DocumentNode; export const GetUserMetadataDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetUserMetadata"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"key"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"user"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"login"},"value":{"kind":"Variable","name":{"kind":"Name","value":"key"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"bio"}},{"kind":"Field","name":{"kind":"Name","value":"login"}},{"kind":"Field","name":{"kind":"Name","value":"name"}}]}}]}}]} as unknown as DocumentNode; \ No newline at end of file diff --git a/frontend/src/utils/helpers/apolloClient.ts b/frontend/src/utils/helpers/apolloClient.ts index 43114cfe77..42fdbeca87 100644 --- a/frontend/src/utils/helpers/apolloClient.ts +++ b/frontend/src/utils/helpers/apolloClient.ts @@ -1,4 +1,4 @@ -import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client' +import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client' import { setContext } from '@apollo/client/link/context' import { AppError, handleAppError } from 'app/global-error' import { GRAPHQL_URL } from 'utils/env.client' @@ -10,7 +10,7 @@ const createApolloClient = () => { return null } - const httpLink = createHttpLink({ + const httpLink = new HttpLink({ credentials: 'include', uri: GRAPHQL_URL, }) diff --git a/frontend/src/utils/utility.ts b/frontend/src/utils/utility.ts index 1fde60e2ee..6da9c066e0 100644 --- a/frontend/src/utils/utility.ts +++ b/frontend/src/utils/utility.ts @@ -4,6 +4,7 @@ import relativeTime from 'dayjs/plugin/relativeTime' import { twMerge } from 'tailwind-merge' import { fetchCsrfToken } from 'server/fetchCsrfToken' +import { GetSnapshotDetailsQuery } from 'types/__generated__/snapshotQueries.generated' import type { Chapter } from 'types/chapter' import type { Committee } from 'types/committee' import type { Icon } from 'types/icon' @@ -17,7 +18,13 @@ export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } -type ProjectType = Project | Issue | Committee | Chapter +type ProjectType = + | Project + | Issue + | Committee + | Chapter + | GetSnapshotDetailsQuery['snapshot']['newChapters'][0] + | GetSnapshotDetailsQuery['snapshot']['newProjects'][0] export const getFilteredIcons = (project: ProjectType, params: string[]): Icon => { const filteredIcons = params.reduce((acc: Icon, key) => { diff --git a/frontend/src/wrappers/provider.tsx b/frontend/src/wrappers/provider.tsx index 556196e47b..ef0590ab8d 100644 --- a/frontend/src/wrappers/provider.tsx +++ b/frontend/src/wrappers/provider.tsx @@ -1,6 +1,5 @@ 'use client' - -import { ApolloProvider } from '@apollo/client' +import { ApolloProvider } from '@apollo/client/react' import { HeroUIProvider, ToastProvider } from '@heroui/react' import { useDjangoSession } from 'hooks/useDjangoSession' import { SessionProvider } from 'next-auth/react'