Merge pull request #271 from medyo/develop

New version

Author: medyo

src/App.tsx

@@ -35,7 +35,7 @@ export const App = () => {
   } = useUserPreferences()
 
   useLayoutEffect(() => {
-    document.documentElement.style.setProperty('--max-visible-cards', maxVisibleCards.toString())
+    document.documentElement.style.setProperty('--user-cards-count', maxVisibleCards.toString())
   }, [maxVisibleCards])
 
   useEffect(() => {

src/assets/App.css

@@ -29,6 +29,7 @@ a {
   display: flex;
   flex-direction: column;
   height: 100vh;
+  max-width: 3000px;
 }
 
 .errorMsg {
@@ -104,13 +105,17 @@ a {
   box-sizing: border-box;
   display: flex;
   flex: 1 1 auto;
-  gap: 12px;
+  gap: var(--cards-gap);
   height: 100%;
-  justify-content: space-between;
   overflow-y: hidden;
   padding-top: 20px;
   position: relative;
   scroll-snap-type: x mandatory;
+  flex-wrap: nowrap;
+}
+
+.Cards > * {
+  flex: 0 0 calc((100% - ((var(--visible-cards)) * var(--cards-gap))) / var(--visible-cards));
 }
 
 .HorizontalScroll {
@@ -185,23 +190,16 @@ a {
   fill: var(--app-name-text-color);
 }
 
-.cards {
-  display: flex;
-  align-items: flex-start;
-  flex-direction: row;
-  flex-wrap: wrap;
-}
-
 .block {
   background-color: var(--card-background-color);
   border: 1px solid var(--card-border-color);
   flex-direction: column;
-  flex: 0 0 auto;
   height: calc(100% - 54px);
   overflow: hidden;
   padding-bottom: 56px;
+  box-sizing: border-box;
   scroll-snap-align: start;
-  width: 100vw;
+  width: 100%;
 }
 
 .blockContent {
@@ -1345,8 +1343,43 @@ Producthunt item
   }
 }
 
+@media (min-width: 768px) {
+  html {
+    --max-layout-cards-count: 2;
+  }
+}
+
+@media (min-width: 1200px) {
+  html {
+    --max-layout-cards-count: 4;
+  }
+  .App {
+    margin: 0 auto;
+  }
+}
+
+@media (min-width: 1800px) {
+  html {
+    --max-layout-cards-count: 5;
+  }
+  .App {
+    margin: 0 auto;
+    max-width: 1800px;
+  }
+}
+
+@media (min-width: 2048px) {
+  html {
+    --max-layout-cards-count: 6;
+  }
+  .App {
+    margin: 0 auto;
+    max-width: 3000px;
+  }
+}
+
 /* Small devices (portrait tablets and large phones, 600px and up) */
-@media only screen and (min-width: 768px) {
+@media (min-width: 768px) {
   .floatingFilter {
     display: none;
   }
@@ -1355,7 +1388,6 @@ Producthunt item
     border-radius: 10px;
     height: 100%;
     padding-bottom: 0;
-    width: calc(95vw / min(2, var(--max-visible-cards)));
   }
 
   .blockContent {
@@ -1390,7 +1422,7 @@ Producthunt item
 }
 
 /* Medium devices (landscape tablets, 768px and up) */
-@media only screen and (min-width: 768px) {
+@media (min-width: 768px) {
   .AppHeader {
     height: auto;
   }
@@ -1400,10 +1432,6 @@ Producthunt item
     width: auto;
   }
 
-  .block {
-    width: calc(96vw / min(3, var(--max-visible-cards)));
-  }
-
   .searchBar {
     width: auto;
   }
@@ -1416,41 +1444,6 @@ Producthunt item
   }
 }
 
-/* Large devices (desktops, 992px and up)*/
-@media only screen and (min-width: 992px) {
-  .block {
-    width: calc(96vw / min(3, var(--max-visible-cards)));
-  }
-}
-
-/* X-Large devices (large desktops, 1200px and up)*/
-@media only screen and (min-width: 1200px) {
-  .block {
-    width: calc(96vw / min(4, var(--max-visible-cards)));
-  }
-}
-
-/* XX-Large devices (larger desktops, 1400px and up)*/
-@media only screen and (min-width: 1400px) {
-  .block {
-    width: calc(95vw / min(4, var(--max-visible-cards)));
-  }
-}
-
-@media (min-width: 1800px) {
-  .App {
-    width: 1800px;
-    margin: 0 auto;
-    padding: 0;
-  }
-
-  .block {
-    width: calc(
-      (1800px - 20px * min(5, var(--max-visible-cards))) / min(5, var(--max-visible-cards))
-    );
-  }
-}
-
 /***** PAGE ****/
 .Page {
   max-width: 1024px;

src/assets/variables.css

@@ -11,7 +11,10 @@
 }
 
 html {
-  --max-visible-cards: 4;
+  --user-cards-count: 4;
+  --max-layout-cards-count: 1;
+  --visible-cards: min(var(--max-layout-cards-count), var(--user-cards-count, 1));
+  --cards-gap: 12px;
 }
 
 html.dark {

src/components/Elements/CardWithActions/CardItemWithActions.tsx

@@ -1,12 +1,9 @@
 import React, { useCallback, useEffect, useState } from 'react'
 import { BiBookmarkMinus, BiBookmarkPlus, BiShareAlt } from 'react-icons/bi'
-import { MdBugReport } from 'react-icons/md'
-import { reportLink } from 'src/config'
 import { ShareModal } from 'src/features/shareModal'
 import { ShareModalData } from 'src/features/shareModal/types'
 import { Attributes, trackLinkBookmark, trackLinkUnBookmark } from 'src/lib/analytics'
 import { useBookmarks } from 'src/stores/bookmarks'
-import { useUserPreferences } from 'src/stores/preferences'
 
 type CardItemWithActionsProps = {
   item: {
@@ -72,14 +69,6 @@ export const CardItemWithActions = ({
   const onShareModalClicked = useCallback(() => {
     setShareModalData({ title: item.title, link: item.url, source: source })
   }, [item.title, item.url, source])
-
-  const onReportClicked = useCallback(() => {
-    const tags = useUserPreferences
-      .getState()
-      .userSelectedTags.map((tag) => tag.label.toLocaleLowerCase())
-    window.open(`${reportLink}?tags=${tags.join(',')}&url=${item.url}`, '_blank')
-  }, [item.url])
-
   return (
     <div key={item.id} className="blockRow">
       <ShareModal
@@ -89,14 +78,6 @@ export const CardItemWithActions = ({
       />
       {cardItem}
       <div className={`blockActions ${isBookmarked ? 'active' : ''} `}>
-        {source === 'ai' && (
-          <button
-            className={`blockActionButton `}
-            onClick={onReportClicked}
-            aria-label="Report item">
-            <MdBugReport />
-          </button>
-        )}
         <button
           className={`blockActionButton `}
           onClick={onShareModalClicked}

src/features/adv/api/getAd.ts

@@ -3,15 +3,8 @@ import { axios } from 'src/lib/axios'
 import { ExtractFnReturnType, QueryConfig } from 'src/lib/react-query'
 import { Ad } from '../types'
 
-const getAd = async (
-  keywords: string[],
-  feed: boolean = false,
-  aditionalAdQueries: { [key: string]: string } | undefined
-): Promise<Ad | null> => {
+const getAd = async (keywords: string[], feed: boolean = false): Promise<Ad | null> => {
   let params = { keywords: keywords.join(','), feed: feed ? 'true' : 'false' }
-  if (aditionalAdQueries) {
-    params = { ...params, ...aditionalAdQueries }
-  }
   return axios.get('/engine/ads/', { params })
 }
 
@@ -21,12 +14,11 @@ type UseGetAdOptions = {
   keywords: string[]
   feed?: boolean
   config?: QueryConfig<QueryFnType>
-  aditionalAdQueries: { [key: string]: string } | undefined
 }
-export const useGetAd = ({ keywords, feed, config, aditionalAdQueries }: UseGetAdOptions) => {
+export const useGetAd = ({ keywords, feed, config }: UseGetAdOptions) => {
   return useQuery<ExtractFnReturnType<QueryFnType>>({
     ...config,
     queryKey: ['ad', keywords.join(',')],
-    queryFn: () => getAd(keywords, feed, aditionalAdQueries),
+    queryFn: () => getAd(keywords, feed),
   })
 }

src/features/adv/components/AdvBanner.tsx

@@ -1,7 +1,9 @@
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
 import { AdPlaceholder } from 'src/components/placeholders'
+import { useRemoteConfigStore } from 'src/features/remoteConfig'
 import { useUserPreferences } from 'src/stores/preferences'
 import { useGetAd } from '../api/getAd'
+import { useDelayedFlag } from '../hooks/useDelayedFlag'
 import { Ad } from '../types'
 import './AdvBanner.css'
 
@@ -13,10 +15,9 @@ type AdvBannerProps = {
 
 export const AdvBanner = ({ feedDisplay = false, loadingState, onAdLoaded }: AdvBannerProps) => {
   const { userSelectedTags } = useUserPreferences()
+  const adsFetchDelayMs = useRemoteConfigStore((s) => s.adsFetchDelayMs)
+  const isReady = useDelayedFlag(adsFetchDelayMs)
 
-  const [aditionalAdQueries, setAditionalAdQueries] = useState<
-    { [key: string]: string } | undefined
-  >()
   const {
     isSuccess,
     data: ad,
@@ -25,18 +26,11 @@ export const AdvBanner = ({ feedDisplay = false, loadingState, onAdLoaded }: Adv
   } = useGetAd({
     keywords: userSelectedTags.map((tag) => tag.label.toLocaleLowerCase()),
     feed: true,
-    aditionalAdQueries: aditionalAdQueries,
     config: {
       cacheTime: 0,
       staleTime: 0,
+      enabled: isReady,
       useErrorBoundary: false,
-      refetchInterval(data) {
-        if (data?.nextAd) {
-          setAditionalAdQueries(data.nextAd.queries)
-          return data.nextAd.interval
-        }
-        return false
-      },
     },
   })
 

src/features/adv/hooks/useDelayedFlag.ts

@@ -0,0 +1,16 @@
+import { useEffect, useState, useTransition } from 'react'
+
+export const useDelayedFlag = (ms: number | undefined) => {
+  const [ready, setReady] = useState(false)
+  const [, startTransition] = useTransition()
+  useEffect(() => {
+    if (ms === undefined || ms <= 0) {
+      setReady(true)
+      return
+    }
+    const t = setTimeout(() => startTransition(() => setReady(true)), ms)
+    return () => clearTimeout(t)
+  }, [ms])
+
+  return ready
+}

src/features/cards/components/githubCard/RepoItem.tsx

@@ -22,7 +22,11 @@ const RepoItem = ({
   return (
     <CardItemWithActions
       source={analyticsTag}
-      item={item}
+      item={{
+        title: `${item.owner}/${item.name}`,
+        url: item.url,
+        id: item.id.toString(),
+      }}
       cardItem={
         <>
           <CardLink

src/features/onboarding/components/steps/HelloTab.tsx

@@ -14,7 +14,7 @@ const OCCUPATIONS: Occupation[] = [
     value: 'frontend',
     icon: FaPaintBrush,
     sources: ['devto', 'github', 'medium', 'hashnode'],
-    tags: ['frontend', 'javascript', 'typescript', 'css', 'react', 'vue', 'angular'],
+    tags: ['frontend', 'javascript', 'typescript', 'css', 'react', 'vue.js', 'angularjs'],
   },
   {
     title: 'Back-End Engineer',

src/features/remoteConfig/api/getRemoteConfig.ts

@@ -15,7 +15,7 @@ type UseGetRemoteConfigOptions = {
 export const useGetRemoteConfig = ({ config }: UseGetRemoteConfigOptions = {}) => {
   return useQuery<ExtractFnReturnType<QueryFnType>>({
     ...config,
-    queryKey: ['remote-config', 'v2'],
+    queryKey: ['remote-config', 'v3'],
     queryFn: () => getRemoteConfig(),
   })
 }