add Conferences card

Author: Chouikane

src/Constants.js

@@ -1,5 +1,4 @@
 import React from 'react'
-import ConferencesCard from './cards/ConferencesCard'
 import { SiGithub } from 'react-icons/si'
 import { SiYcombinator } from 'react-icons/si'
 import { FaDev } from 'react-icons/fa'
@@ -20,6 +19,8 @@ import { HashnodeCard } from 'src/features/hashnodeCard'
 import { MediumCard } from 'src/features/mediumCard'
 import { FreecodecampCard } from 'src/features/freecodecampCard'
 import { GithubCard } from 'src/features/githubCard'
+import { ConferencesCard } from 'src/features/conferencesCard'
+
 
 
 

src/components/List/types.ts

@@ -1,10 +1,10 @@
 import React from 'react'
-import { ArticleType } from 'src/types'
+import { ArticleType, ConferenceType } from 'src/types'
 
 export type ListComponentPropsType = {
-  items: ArticleType[], // <== TODO: Unified Article Type
+  items: ArticleType[] | ConferenceType[]
   isLoading: boolean,
-  renderItem: (item: ArticleType, index: number) => React.ReactNode,
+  renderItem: (item: any, index: number) => React.ReactNode,
   withAds: boolean,
   placeholder?: React.ReactNode,
   refresh?: boolean,

src/features/conferencesCard/api/getConferences.ts

@@ -0,0 +1,27 @@
+import { useQueries, UseQueryOptions } from '@tanstack/react-query'
+import { QueryConfig } from 'src/lib/react-query'
+import { ConferenceType } from 'src/types'
+import { axios } from 'src/lib/axios'
+
+const getConferences = async (tag: string): Promise<ConferenceType[]> => {
+  return axios.get(`/data/v2/conferences/${tag}.json`)
+}
+
+type QueryFnType = typeof getConferences
+
+type UseGetConferencesOptions = {
+  config?: QueryConfig<QueryFnType>
+  tags: string[]
+}
+
+export const useGetConferences = ({ config, tags }: UseGetConferencesOptions) => {
+  return useQueries({
+    queries: tags.map<UseQueryOptions<ConferenceType[]>>((tag) => {
+      return {
+        ...config,
+        queryKey: ['conferences', tag],
+        queryFn: () => getConferences(tag),
+      }
+    })
+  })
+}

src/features/conferencesCard/components/ConferenceItem.tsx

@@ -0,0 +1,100 @@
+import CardLink from 'src/components/CardLink'
+import CardItemWithActions from 'src/components/CardItemWithActions'
+import { Attributes } from 'src/lib/analytics'
+import { ConferenceItemPropsType } from 'src/types'
+import { MdAccessTime } from 'react-icons/md'
+import ColoredLanguagesBadge from 'src/components/ColoredLanguagesBadge'
+import { flag } from 'country-emoji'
+import { IoIosPin } from 'react-icons/io'
+import { RiCalendarEventFill } from 'react-icons/ri'
+
+const ConferencesItem = (props: ConferenceItemPropsType) => {
+  const { item, index, listingMode } = props
+
+  const ConferenceLocation = () => {
+    if (item.online) {
+      return '🌐 Online'
+    }
+    if (item.country) {
+      return `${flag(item.country.replace(/[^a-zA-Z ]/g, ''))} ${item.city}`
+    }
+  }
+
+  const ConferenceDate = () => {
+    if (!item.start_date) {
+      return ''
+    }
+    const monthNames = [
+      'January',
+      'February',
+      'March',
+      'April',
+      'May',
+      'June',
+      'July',
+      'August',
+      'September',
+      'October',
+      'November',
+      'December',
+    ]
+    const startDate = new Date(item.start_date) 
+    const startMnth = monthNames[startDate.getMonth()]
+    let value = `${startMnth} ${('0' + startDate.getDate()).slice(-2)}`
+    if (!item.end_date || item.end_date  === item.start_date) {
+      return value
+    }
+    const endDate = new Date(item.end_date)
+    let endValue = ('0' + endDate.getDate()).slice(-2)
+    if (endDate.getMonth() !== startDate.getMonth()) {
+      endValue = `${monthNames[endDate.getMonth()]} ${endValue}`
+    }
+    return `${value} - ${endValue}`
+  }
+  return (
+    <CardItemWithActions
+      source={'conferences'}
+      index={index}
+      key={index}
+      item={{ ...item, title: item.name }}
+      cardItem={
+        <>
+          <CardLink
+            link={item.url}
+            analyticsAttributes={{
+              [Attributes.TRIGERED_FROM]: 'card',
+              [Attributes.TITLE]: item.name,
+              [Attributes.LINK]: item.url,
+              [Attributes.SOURCE]: 'conferences',
+            }}>
+            <RiCalendarEventFill className={'rowTitleIcon'} />
+            {item.name}
+          </CardLink>
+          {listingMode === 'normal' ? (
+            <>
+              <div className="rowDescription">
+                <span className="rowItem">
+                  <IoIosPin className="rowItemIcon" /> {ConferenceLocation()}
+                </span>
+                <span className="rowItem">
+                  <MdAccessTime className="rowItemIcon" /> {ConferenceDate()}
+                </span>
+              </div>
+              <div className="rowDetails">
+                <ColoredLanguagesBadge languages={[item.tag]} />
+              </div>
+            </>
+          ) : (
+            <div className="rowDescription">
+              <span className="rowItem">
+                <MdAccessTime className="rowItemIcon" /> {ConferenceDate()}
+              </span>
+            </div>
+          )}
+        </>
+      }
+    />
+  )
+}
+
+export default ConferencesItem

src/features/conferencesCard/components/ConferencesCard.tsx

@@ -0,0 +1,49 @@
+import CardComponent from 'src/components/CardComponent'
+import { ListComponent } from 'src/components/List'
+import { useGetConferences } from '../api/getConferences'
+import { ConferenceType, CardPropsType } from 'src/types'
+import { useUserPreferences } from 'src/stores/preferences'
+import { getCardTagsValue } from 'src/utils/DataEnhancement'
+import ConferenceItem from './ConferenceItem'
+
+
+export function ConferencesCard(props: CardPropsType) {
+  const { label, icon, withAds } = props
+  const { userSelectedTags, listingMode } = useUserPreferences()
+
+  const results = useGetConferences({ tags: getCardTagsValue(userSelectedTags, 'devtoValues') })
+
+  const isLoading = results.some((result) => result.isLoading)
+
+  const getData = () => {
+    return results
+      .reduce((acc: ConferenceType[], curr) => {
+        if (!curr.data) return acc
+        return [...acc, ...curr.data]
+      }, [])
+      .sort((a, b) => a.start_date - b.start_date)
+  }
+
+  const renderItem = (item: ConferenceType, index: number) => (
+    <ConferenceItem
+      item={item}
+      key={`cf-${index}`}
+      index={index}
+      listingMode={listingMode}
+    />
+  )
+
+  return (
+    <CardComponent
+      icon={<span className="blockHeaderIcon">{icon}</span>}
+      link="https://confs.tech/"
+      title={label}>
+      <ListComponent
+        items={getData()}
+        isLoading={isLoading}
+        renderItem={renderItem}
+        withAds={withAds}
+      />
+    </CardComponent>
+  )
+}

src/features/conferencesCard/index.ts

@@ -0,0 +1 @@
+export * from "./components/ConferencesCard";

src/types/index.ts

@@ -54,6 +54,18 @@ export type ArticleType = {
   starsInDateRange?: string
 }
 
+export type ConferenceType = {
+  id: string
+  name: string
+  url: string
+  start_date: number
+  end_date: number
+  tag: string
+  online: Boolean
+  city?: string
+  country?: string
+}
+
 export type CardPropsType = {
   label: string
   icon: React.ReactNode
@@ -72,3 +84,9 @@ export type CardSettingsType = {
   language: string
   dateRange?: string
 }
+
+export type ConferenceItemPropsType = {
+  index: number
+  item: ConferenceType
+  listingMode?: ListingMode
+}