country flag

Author: maslianok

app/by/[rankingType]/[page]/page.tsx

@@ -12,13 +12,15 @@ import {
   PaginationPrevious,
 } from '@/components/ui/pagination';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { fetchCountryList } from '@/graphql/helpers/fetch-countries';
 import { graphqlDirect } from '@/lib/graphql/graphql-direct';
 import { GlobalRankingsDocument, RankOrder } from '@/types/generated/graphql';
 import { getInitials } from '@/utils/get-initials';
 
 import { ClickableRow } from './components/clickale-row';
 import { LinkWithStopPropagation } from './components/link-with-stop-propagation';
 import { ProfileAvatar } from './components/profile-avatar';
+import { getCountryFlag } from './utils/get-country-flag';
 
 const ITEMS_PER_PAGE = 100;
 
@@ -64,7 +66,10 @@ export default async function GlobalRanking({ params }: { params: Promise<{ rank
   const page = parseInt(pageParam, 10);
   const [queryOrder, rankPropName, title, subtitle, rankingBaseEntity] = getConfigByRankingType(rankingType);
   const offset = (page - 1) * ITEMS_PER_PAGE;
-  const data = await graphqlDirect(GlobalRankingsDocument, { order: queryOrder, offset });
+  const [{ globalRankings }, countries] = await Promise.all([
+    graphqlDirect(GlobalRankingsDocument, { order: queryOrder, offset }),
+    fetchCountryList(),
+  ]);
 
   return (
     <Page className="max-w-5xl gap-6">
@@ -83,7 +88,7 @@ export default async function GlobalRanking({ params }: { params: Promise<{ rank
           </TableRow>
         </TableHeader>
         <TableBody>
-          {data.globalRankings.map((item) => {
+          {globalRankings.map((item) => {
             const { githubId, user } = item;
             return (
               <ClickableRow key={githubId} className="border-b-0" href={`/profile/${user?.login}`}>
@@ -101,7 +106,9 @@ export default async function GlobalRanking({ params }: { params: Promise<{ rank
                     {user?.login}
                   </LinkWithStopPropagation>
                 </TableCell>
-                <TableCell className="hidden sm:table-cell break-all whitespace-normal">{user?.location}</TableCell>
+                <TableCell className="hidden sm:table-cell break-all whitespace-normal">
+                  {getCountryFlag(countries, user?.country)} {user?.location}
+                </TableCell>
                 <TableCell className="text-right">{user?.[rankPropName]?.toLocaleString('en-US')}</TableCell>
               </ClickableRow>
             );

app/by/[rankingType]/[page]/utils/get-country-flag.ts

@@ -0,0 +1,9 @@
+import { CountryQuery } from '@/types/generated/graphql';
+
+export const getCountryFlag = (countryList: CountryQuery['country'], country?: string | null) => {
+  if (!country || !countryList?.length) {
+    return null;
+  }
+
+  return countryList.find((c) => c.name === country)?.flag || null;
+};

app/profile/[login]/page.tsx

@@ -9,7 +9,7 @@ import { ProfileTimeline } from './components/profile-timeline';
 import { RanksOverview } from './components/ranks-overview';
 import { RepositoriesOverview } from './components/repositories-overiview';
 import NotFound from './not-found';
-import { fetchProfileData } from './utils/fetch-profile-data';
+import { fetchProfileData } from '../../../graphql/helpers/fetch-profile-data';
 
 export async function generateMetadata({ params }: { params: Promise<{ login: string }> }): Promise<Metadata> {
   const { login } = await params;

app/profile/[login]/ranks/page.tsx

@@ -7,10 +7,10 @@ import { notFound } from 'next/navigation';
 
 import { Button } from '@/components/ui/button';
 
-import { LayoutLeftColumn } from '../components/layout-left-column';
-import { fetchProfileData } from '../utils/fetch-profile-data';
 import { RankCard } from './components/rank-card';
 import { getBestRankType } from './utils/get-best-rank-type';
+import { fetchProfileData } from '../../../../graphql/helpers/fetch-profile-data';
+import { LayoutLeftColumn } from '../components/layout-left-column';
 
 export default async function ProfileRanks({ params }: { params: Promise<{ login: string }> }) {
   const { login } = await params;

app/profile/[login]/repositories/page.tsx

@@ -3,10 +3,10 @@
 import { unstable_cacheLife as cacheLife, unstable_cacheTag as cacheTag } from 'next/cache';
 import { notFound } from 'next/navigation';
 
-import { LayoutLeftColumn } from '../components/layout-left-column';
-import { fetchProfileData } from '../utils/fetch-profile-data';
 import { UserContriutionsList } from './components/user-contriutions-list';
 import { UserRepositoriesList } from './components/user-repositories-list';
+import { fetchProfileData } from '../../../../graphql/helpers/fetch-profile-data';
+import { LayoutLeftColumn } from '../components/layout-left-column';
 
 export default async function ProfileRepositories({ params }: { params: Promise<{ login: string }> }) {
   const { login } = await params;

graphql/country-list.gql

@@ -0,0 +1,6 @@
+query Country {
+  country {
+    name
+    flag
+  }
+}

badge/queries/rank-by-login.query.gql graphql/global-rank-by-login.gqlbadge/queries/rank-by-login.query.gql renamed to graphql/global-rank-by-login.gql

@@ -14,6 +14,7 @@ query GlobalRankings($order: RankOrder, $offset: Int) {
       c
       f
       location
+      country
     }
   }
 }

graphql/global-rankings.gql

@@ -0,0 +1,18 @@
+import { unstable_cacheLife as cacheLife } from 'next/cache';
+import { cache } from 'react';
+
+import { graphqlDirect } from '@/lib/graphql/graphql-direct';
+import { CountryDocument } from '@/types/generated/graphql';
+
+export const fetchCountryList = cache(async () => {
+  'use cache';
+  cacheLife('max');
+
+  const { country } = (await graphqlDirect(CountryDocument)) ?? {};
+
+  if (!country) {
+    return [];
+  }
+
+  return country;
+});