Merge pull request #278 from medyo/develop

Fix Rss card display

Author: medyo

src/assets/App.css

@@ -116,6 +116,7 @@ a {
 
 .Cards > * {
   flex: 0 0 calc((100% - ((var(--visible-cards)) * var(--cards-gap))) / var(--visible-cards));
+  min-width: 0;
 }
 
 .HorizontalScroll {
@@ -535,6 +536,8 @@ a {
   text-decoration: none;
   display: flex;
   flex-direction: row;
+  word-break: break-word;
+  overflow-wrap: anywhere;
 }
 
 .rowTitle:hover {

src/components/Elements/Card/Card.tsx

@@ -1,6 +1,7 @@
 import clsx from 'clsx'
 import React, { useEffect, useState } from 'react'
 import { AdvBanner } from 'src/features/adv'
+import { useAuth } from 'src/features/auth'
 import { DesktopBreakpoint } from 'src/providers/DesktopBreakpoint'
 import { MobileBreakpoint } from 'src/providers/MobileBreakpoint'
 import { CardPropsType } from 'src/types'
@@ -27,6 +28,7 @@ export const Card = React.forwardRef<HTMLDivElement, RootCardProps>(
   ) => {
     const { icon, label, badge } = meta
     const [canAdsLoad, setCanAdsLoad] = useState(true)
+    const { user } = useAuth()
 
     useEffect(() => {
       if (!withAds) {
@@ -65,7 +67,7 @@ export const Card = React.forwardRef<HTMLDivElement, RootCardProps>(
           {badge && <span className="blockHeaderBadge">{badge}</span>}
         </div>
 
-        {canAdsLoad && withAds && (
+        {canAdsLoad && withAds && !user?.isSupporter && (
           <div className="ad-wrapper blockRow">
             <AdvBanner />
           </div>

src/features/auth/types/index.ts

@@ -4,4 +4,5 @@ export type User = {
   connectedAt?: string
   imageURL?: string
   streak?: number
+  isSupporter?: boolean
 }

src/providers/AuthProvider.tsx

@@ -38,15 +38,24 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
         : GithubAuthProvider.credential(token)
 
     return signInWithCredential(firebaseAuth, authProvider)
-      .then((userCredential) => {
+      .then(async (userCredential) => {
         const user = userCredential.user
 
+        let isSupporter = false
+        try {
+          const idToken = await user.getIdTokenResult()
+          isSupporter = Boolean(idToken.claims?.['supporter'])
+        } catch (e) {
+          console.error('Failed to fetch ID token', e)
+        }
+
         initState({
           user: {
             id: user.uid,
             connectedAt: new Date().toISOString(),
             name: user.displayName || 'Anonymous',
             imageURL: user.photoURL || '',
+            isSupporter: isSupporter,
           },
           providerId: authProvider.providerId,
         })