add indiehackers source

Author: medyo

src/App.css

@@ -344,6 +344,8 @@ a {
   font-size: 16px;
   text-decoration: none;
   display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
 }
 .rowTitle:hover {
   color: var(--primary-hover-text-color);
@@ -392,10 +394,12 @@ a {
 .rowDescription .rowItem {
   font-size: 12px;
 }
-.rowDetails  .hnRowItem {
+.rowDetails .hnRowItem {
   color: #F6682F
 }
-
+.rowDetails .inRowItem {
+  color: #4799EB
+}
 .rowDetails .redditRowItem {
   color: #FA481D;
 }

src/Constants.js

@@ -7,6 +7,7 @@ import ProductHuntCard from './cards/ProductHuntCard'
 import RedditCard from './cards/RedditCard'
 import LobstersCard from './cards/LobstersCard'
 import HashNodeCard from './cards/HashNodeCard'
+import IndieHackersCard from './cards/IndieHackersCard'
 import FreeCodeCampCard from './cards/FreeCodeCampCard'
 import { SiGithub } from 'react-icons/si'
 import { SiYcombinator } from 'react-icons/si'
@@ -17,6 +18,7 @@ import { HiTicket } from 'react-icons/hi'
 import HashNodeIcon from './static/icon_hashnode.png'
 import LobstersIcon from './static/icon_lobsters.png'
 import { FaFreeCodeCamp } from 'react-icons/fa'
+import { CgIndieHackers } from 'react-icons/cg'
 
 const APP = {
   name: 'Hackertab.dev',
@@ -100,6 +102,13 @@ export const SUPPORTED_CARDS = [
     label: 'FreeCodeCamp',
     component: FreeCodeCampCard,
   },
+  {
+    value: 'indiehackers',
+    icon: <CgIndieHackers className="blockHeaderWhite" />,
+    analyticsTag: 'indiehackers',
+    label: 'IndieHackers',
+    component: IndieHackersCard,
+  },
 ]
 
 export const SUPPORTED_SEARCH_ENGINES = [

src/cards/IndieHackersCard.js

@@ -0,0 +1,75 @@
+import React, { useContext } from 'react'
+import { VscTriangleUp } from 'react-icons/vsc'
+import CardComponent from '../components/CardComponent'
+import ListComponent from '../components/ListComponent'
+import indiehackersApi from '../services/indiehackers'
+import { BiCommentDetail } from 'react-icons/bi'
+import { MdAccessTime } from 'react-icons/md'
+import CardLink from '../components/CardLink'
+import CardItemWithActions from '../components/CardItemWithActions'
+import PreferencesContext from '../preferences/PreferencesContext'
+import { FaChevronUp } from 'react-icons/fa'
+import { format } from 'timeago.js'
+
+const StoryItem = ({ item, index, analyticsTag }) => {
+  const { listingMode } = useContext(PreferencesContext)
+
+  return (
+    <CardItemWithActions
+      source={'indiehackers'}
+      index={index}
+      item={item}
+      key={index}
+      cardItem={
+        <>
+          <p className="rowTitle">
+            <CardLink link={item.url} analyticsSource={analyticsTag}>
+              {listingMode === 'compact' && (
+                <span className="counterWrapper">
+                  <VscTriangleUp />
+                  <span className="value">{item.score}</span>
+                </span>
+              )}
+
+              <span className="subTitle">{item.title}</span>
+            </CardLink>
+          </p>
+          {listingMode === 'normal' && (
+            <div className="rowDetails">
+              <span className="rowItem inRowItem">
+                <FaChevronUp className="rowItemIcon" /> {item.likes} points
+              </span>
+              <span className="rowItem">
+                <MdAccessTime className="rowItemIcon" /> {format(new Date(item.published_at))}
+              </span>
+              <span className="rowItem">
+                <BiCommentDetail className="rowItemIcon" /> {item.comments} comments
+              </span>
+            </div>
+          )}
+        </>
+      }
+    />
+  )
+}
+
+function IndieHackersCard({ analyticsTag, label, icon, withAds }) {
+  const fetchStories = async () => {
+    return await indiehackersApi.getTopStories()
+  }
+
+  const renderItem = (item, index) => (
+    <StoryItem item={item} key={`st-${index}`} index={index} analyticsTag={analyticsTag} />
+  )
+
+  return (
+    <CardComponent
+      icon={<span className="blockHeaderIcon">{icon}</span>}
+      link="https://indiehackers.com/"
+      title={label}>
+      <ListComponent fetchData={fetchStories} renderItem={renderItem} withAds={withAds} />
+    </CardComponent>
+  )
+}
+
+export default IndieHackersCard

src/services/indiehackers.js

@@ -0,0 +1,11 @@
+import cachedRequest from './cachedRequest'
+
+const getTopStories = async () => {
+  const url = `/data/indiehackers.json`
+  const data = await cachedRequest(url)
+  return data
+}
+
+export default {
+  getTopStories: getTopStories,
+}