add repo type

Author: Chouikane

src/components/List/types.ts

@@ -1,8 +1,8 @@
 import React from 'react'
-import { ArticleType, ConferenceType } from 'src/types'
+import { ArticleType, ConferenceType, RepoType } from 'src/types'
 
 export type ListComponentPropsType = {
-  items: ArticleType[] | ConferenceType[]
+  items: ArticleType[] | ConferenceType[] | RepoType[],
   isLoading: boolean,
   renderItem: (item: any, index: number) => React.ReactNode,
   withAds: boolean,

src/features/githubCard/api/getArticles.ts

@@ -0,0 +1,28 @@
+import { useQueries, UseQueryOptions } from '@tanstack/react-query'
+import { QueryConfig, ExtractFnReturnType } from 'src/lib/react-query'
+import { RepoType } from 'src/types'
+import { axios } from 'src/lib/axios'
+
+const getRepos = async (tag: string, dateRange: string): Promise<RepoType[]> => {
+  return axios.get(`/data/v2/github/${tag}/${dateRange}.json?s`)
+}
+
+type QueryFnType = typeof getRepos
+
+type UseGetReposOptions = {
+  config?: QueryConfig<QueryFnType>
+  tags: string[]
+  dateRange: "daily" | "monthly" | "weekly"
+}
+
+export const useGetRepos = ({ config, tags, dateRange }: UseGetReposOptions) => {
+  return useQueries({
+    queries: tags.map<UseQueryOptions<RepoType[]>>((tag) => {
+      return {
+        ...config,
+        queryKey: ['githubArticles', tag, dateRange],
+        queryFn: () => getRepos(tag, dateRange),
+      }
+    })
+  })
+}

src/features/githubCard/api/getRepos.ts

@@ -1,11 +1,11 @@
 import { useState, useEffect } from 'react'
 import CardComponent from 'src/components/CardComponent'
 import { ListComponent } from 'src/components/List'
-import { useGetArticles } from '../api/getArticles'
-import { ArticleType, CardPropsType } from 'src/types'
+import { useGetRepos } from '../api/getRepos'
+import { RepoType, CardPropsType } from 'src/types'
 import { useUserPreferences } from 'src/stores/preferences'
 import { getCardTagsValue } from 'src/utils/DataEnhancement'
-import ArticleItem from './ArticleItem'
+import RepoItem from './RepoItem'
 import { Tag } from 'src/features/remoteConfig'
 import { GLOBAL_TAG, MY_LANGUAGES_TAG } from 'src/config'
 import { trackCardLanguageSelect, trackCardDateRangeSelect } from 'src/lib/analytics'
@@ -56,7 +56,7 @@ export function GithubCard(props: CardPropsType) {
     return selectedTag.githubValues
   }
 
-  const results = useGetArticles({
+  const results = useGetRepos({
     tags: getQueryTags(),
     dateRange: selectedDateRange.value,
     config: {
@@ -68,15 +68,15 @@ export function GithubCard(props: CardPropsType) {
 
   const getData = () => {
     return results
-      .reduce((acc: ArticleType[], curr) => {
+      .reduce((acc: RepoType[], curr) => {
         if (!curr.data) return acc
         return [...acc, ...curr.data]
       }, [])
-      .sort((a, b) => b.reactions - a.reactions)
+      .sort((a, b) => b.stars - a.stars)
   }
 
-  const renderItem = (item: ArticleType, index: number) => (
-    <ArticleItem
+  const renderItem = (item: RepoType, index: number) => (
+    <RepoItem
       item={item}
       key={`rp-${index}`}
       index={index}

src/features/githubCard/components/GithubCard.tsx

@@ -1,15 +1,19 @@
 import CardLink from 'src/components/CardLink'
 import CardItemWithActions from 'src/components/CardItemWithActions'
 import { Attributes } from 'src/lib/analytics'
-import { ArticleItemPropsType } from 'src/types'
+import { RepoItemPropsType } from 'src/types'
 import ColoredLanguagesBadge from 'src/components/ColoredLanguagesBadge'
 import { VscRepo, VscRepoForked, VscStarFull } from 'react-icons/vsc'
 
 const sourceName = 'github'
 
-const ArticleItem = (props: ArticleItemPropsType) => {
-  const { item, index, listingMode, selectedTag } = props
+function numberWithCommas(x:number|string) {
+  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+}
 
+const RepoItem = (props: RepoItemPropsType) => {
+  const { item, index, listingMode, selectedTag } = props
+  
   return (
     <CardItemWithActions
       source={sourceName}
@@ -22,7 +26,7 @@ const ArticleItem = (props: ArticleItemPropsType) => {
             className="githubTitle"
             link={item.url}
             analyticsAttributes={{
-              [Attributes.POINTS]: item.reactions,
+              [Attributes.POINTS]: numberWithCommas(item.stars),
               [Attributes.TRIGERED_FROM]: 'card',
               [Attributes.TITLE]: item.title,
               [Attributes.LINK]: item.url,
@@ -35,15 +39,15 @@ const ArticleItem = (props: ArticleItemPropsType) => {
           <p className="rowDescription">{item.description}</p>
           {listingMode === 'normal' && (
             <div className="rowDetails">
-              <ColoredLanguagesBadge languages={item.tags} />
-              {item.reactions && (
+              <ColoredLanguagesBadge languages={[item.programmingLanguage]} />
+              {numberWithCommas(item.stars) && (
                 <span className="rowItem">
-                  <VscStarFull className="rowItemIcon" /> {item.reactions} stars
+                  <VscStarFull className="rowItemIcon" /> {numberWithCommas(item.stars)} stars
                 </span>
               )}
               {item.forks && (
                 <span className="rowItem">
-                  <VscRepoForked className="rowItemIcon" /> {item.forks} forks
+                  <VscRepoForked className="rowItemIcon" /> {numberWithCommas(item.forks)} forks
                 </span>
               )}
             </div>
@@ -54,4 +58,4 @@ const ArticleItem = (props: ArticleItemPropsType) => {
   )
 }
 
-export default ArticleItem
+export default RepoItem

…es/githubCard/components/ArticleItem.tsx …tures/githubCard/components/RepoItem.tsxsrc/features/githubCard/components/ArticleItem.tsx renamed to src/features/githubCard/components/RepoItem.tsx src/features/githubCard/components/ArticleItem.tsx renamed to src/features/githubCard/components/RepoItem.tsx

@@ -49,10 +49,20 @@ export type ArticleType = {
   flair_text?: string
   flair_background_color?: string
   flair_text_color?: string
-  owner?: string
-  forks?: string
-  starsInDateRange?: string
-  name?: string
+}
+
+export type RepoType = {
+  id: string
+  title: string
+  url: string
+  programmingLanguage: string
+  stars: number
+  source: string
+  description: string
+  owner: string
+  forks: number
+  starsInDateRange?: number
+  name: string
 }
 
 export type ConferenceType = {
@@ -90,4 +100,11 @@ export type ConferenceItemPropsType = {
   index: number
   item: ConferenceType
   listingMode?: ListingMode
+}
+
+export type RepoItemPropsType = {
+  index: number
+  item: RepoType
+  listingMode?: ListingMode,
+  selectedTag?: SelectedTag
 }