Merge pull request #5077 from thematters/develop

Release: v5.9.2

.env.dev

@@ -27,7 +27,6 @@ NEXT_PUBLIC_LOGBOOKS_URL=https://logbooks-vercel.matters.town
 NEXT_PUBLIC_ALCHEMY_KEY=1dMo8xjAFo8M6Y4sQ45WTD3Zie2-MA4C
 NEXT_PUBLIC_GOOGLE_CLIENT_ID=315393900359-2r9fundftis7dc0tdeo2hf8630nfdd8h.apps.googleusercontent.com
 NEXT_PUBLIC_TWITTER_CLIENT_ID=X3d6Szg5bnVCMm5wRWxSVmhXUTc6MTpjaQ
-NEXT_PUBLIC_FACEBOOK_CLIENT_ID=1072677713882819
 NEXT_PUBLIC_CF_TURNSTILE_SITE_KEY=0x4AAAAAAAKiedvR5qiLUhIs
 NEXT_PUBLIC_NOMAD_MATTERS_CAMPAIGN_LINK=/@rsdyobw/22048-launching-the-nomad-matters-initiative
 NEXT_PUBLIC_BILLBOARD_OPERATOR_ADDRESS=0xBcEAD54De463C083F348b530305e2471652D59A3

.env.prod

@@ -28,7 +28,6 @@ NEXT_PUBLIC_ALCHEMY_KEY=bOu-fCphi9mvePsxg968Qe-pidHQNdlT
 NEXT_PUBLIC_CF_TURNSTILE_SITE_KEY=0x4AAAAAAAKVODkJMwfIxG78
 NEXT_PUBLIC_GOOGLE_CLIENT_ID=751677068109-rkml7q9ujf8ems09cclh7qckf14svcgs.apps.googleusercontent.com
 NEXT_PUBLIC_TWITTER_CLIENT_ID=cmdKbUlyd1ZZZDZYa3dTampidGo6MTpjaQ
-NEXT_PUBLIC_FACEBOOK_CLIENT_ID=161556310354354
 NEXT_PUBLIC_NOMAD_MATTERS_CAMPAIGN_LINK_EN=/@hi176/476405-a-guide-to-invite
 NEXT_PUBLIC_NOMAD_MATTERS_CAMPAIGN_LINK=/@hi176/476404
 NEXT_PUBLIC_BILLBOARD_OPERATOR_ADDRESS=0x92a117aeA74963Cd0CEdF9C50f99435451a291F7

lang/default.json

@@ -2858,10 +2858,6 @@
     "defaultMessage": "Pass and ask me next time",
     "description": "src/components/Forms/PaymentForm/BindWallet/index.tsx"
   },
-  "mzCz0Z": {
-    "defaultMessage": "Tags",
-    "description": "src/views/Tags/index.tsx"
-  },
   "n/w6lW": {
     "defaultMessage": "Most Supporters",
     "description": "src/views/Me/Works/Published/SortTabs.tsx"

lang/en.json

@@ -2858,10 +2858,6 @@
     "defaultMessage": "Pass and ask me next time",
     "description": "src/components/Forms/PaymentForm/BindWallet/index.tsx"
   },
-  "mzCz0Z": {
-    "defaultMessage": "Tags",
-    "description": "src/views/Tags/index.tsx"
-  },
   "n/w6lW": {
     "defaultMessage": "Most Supporters",
     "description": "src/views/Me/Works/Published/SortTabs.tsx"

lang/zh-Hans.json

@@ -2694,7 +2694,7 @@
     "description": "src/views/Me/Settings/Misc/LikerID.tsx"
   },
   "kc79d3": {
-    "defaultMessage": "找你想看的"
+    "defaultMessage": "热门标签"
   },
   "kkZioy": {
     "defaultMessage": "确认移出",
@@ -2858,10 +2858,6 @@
     "defaultMessage": "先不要，下次再说",
     "description": "src/components/Forms/PaymentForm/BindWallet/index.tsx"
   },
-  "mzCz0Z": {
-    "defaultMessage": "全部标签",
-    "description": "src/views/Tags/index.tsx"
-  },
   "n/w6lW": {
     "defaultMessage": "最多支持",
     "description": "src/views/Me/Works/Published/SortTabs.tsx"

lang/zh-Hant.json

@@ -2694,7 +2694,7 @@
     "description": "src/views/Me/Settings/Misc/LikerID.tsx"
   },
   "kc79d3": {
-    "defaultMessage": "找你想看的"
+    "defaultMessage": "熱門標籤"
   },
   "kkZioy": {
     "defaultMessage": "確認移出",
@@ -2858,10 +2858,6 @@
     "defaultMessage": "先不要，下次再說",
     "description": "src/components/Forms/PaymentForm/BindWallet/index.tsx"
   },
-  "mzCz0Z": {
-    "defaultMessage": "全部標籤",
-    "description": "src/views/Tags/index.tsx"
-  },
   "n/w6lW": {
     "defaultMessage": "最多支持",
     "description": "src/views/Me/Works/Published/SortTabs.tsx"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "matters-web",
-  "version": "5.9.1",
+  "version": "5.9.2",
   "description": "codebase of Matters' website",
   "author": "Matters <[email protected]>",
   "engines": {

src/common/enums/oauth.ts

@@ -302,7 +302,6 @@ export const CALLBACK_VERIFIER = {
 
 export const OAUTH_CALLBACK_PROVIDERS = {
   Google: 'google',
-  Facebook: 'facebook',
   Twitter: 'twitter',
 }
 

src/common/utils/oauth.ts

@@ -89,14 +89,6 @@ export const twitterOauthUrl = async (type: OauthType, oauthToken: string) => {
   return url
 }
 
-export const facebookOauthUrl = async (type: OauthType) => {
-  const { state, codeChallenge } = await generateSocialOauthParams(type)
-  const clientId = process.env.NEXT_PUBLIC_FACEBOOK_CLIENT_ID
-  const redirectUri = `https://${process.env.NEXT_PUBLIC_SITE_DOMAIN}/callback/${CALLBACK_PROVIDERS.Facebook}`
-  const url = `https://www.facebook.com/v18.0/dialog/oauth?response_type=code&scope=openid&client_id=${clientId}&redirect_uri=${redirectUri}&state=${state}&code_challenge=${codeChallenge}&code_challenge_method=S256`
-  return url
-}
-
 export const signupCallbackUrl = (email: string, referralCode?: string) => {
   return `https://${process.env.NEXT_PUBLIC_SITE_DOMAIN}/callback/${
     CALLBACK_PROVIDERS.EmailSignup

src/components/AuthMethodFeed/AuthNormalFeed.tsx

@@ -6,12 +6,7 @@ import { ReactComponent as IconGoogle2 } from '@/public/static/icons/24px/google
 import { ReactComponent as IconMail } from '@/public/static/icons/24px/mail.svg'
 import { ReactComponent as IconX2 } from '@/public/static/icons/24px/x2.svg'
 import { PATHS } from '~/common/enums'
-import {
-  // facebookOauthUrl,
-  googleOauthUrl,
-  sleep,
-  twitterOauthUrl,
-} from '~/common/utils'
+import { googleOauthUrl, sleep, twitterOauthUrl } from '~/common/utils'
 import { Icon, Spinner, useRoute } from '~/components'
 
 import { OAUTH_REQUEST_TOKEN } from '../GQL/queries/oauthRequestToken'
@@ -28,7 +23,7 @@ export const AuthNormalFeed = ({ gotoEmailSignup, gotoEmailLogin }: Props) => {
   const [loadingState, setLoadingState] = useState('')
   const isGoogleLoading = loadingState === 'Google'
   const isTwitterLoading = loadingState === 'Twitter'
-  // const isFacebookLoading = loadingState === 'Facebook'
+
   useEffect(() => {
     return setLoadingState('')
   }, [])
@@ -60,12 +55,6 @@ export const AuthNormalFeed = ({ gotoEmailSignup, gotoEmailLogin }: Props) => {
     }
   }
 
-  // const gotoFacebook = async () => {
-  //   setLoadingState('Facebook')
-  //   const url = await facebookOauthUrl(oauthType)
-  //   router.push(url)
-  // }
-
   return (
     <>
       <ul className={styles.feed}>
@@ -99,17 +88,6 @@ export const AuthNormalFeed = ({ gotoEmailSignup, gotoEmailLogin }: Props) => {
             </span>
           )}
         </li>
-        {/* <li className={styles.item} role="button" onClick={gotoFacebook}>
-          <span className={styles.icon}>
-            <Icon icon={IconFacebook} size={22} />
-          </span>
-          <span className={styles.name}>Facebook</span>
-          {isFacebookLoading && (
-            <span className={styles.right}>
-              <Spinner color="grey" size={22} />
-            </span>
-          )}
-        </li> */}
       </ul>
       <section className={styles.info}>
         <section className={styles.title}>

src/components/Billboard/styles.module.css

@@ -9,6 +9,23 @@
     max-width: 100%;
   }
 
+  & .genieeContainer {
+    display: flex;
+    justify-content: center;
+
+    @media (--sm-up) {
+      & iframe {
+        width: 16.5rem;
+        height: auto;
+
+        & img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+
   & a {
     @mixin flex-center-all;
 

src/components/Buttons/Shuffle.tsx

@@ -18,15 +18,11 @@ export const ShuffleButton: React.FC<ShuffleButtonProps> = ({
   <Button
     size={[null, '1.25rem']}
     spacing={[0, 8]}
-    bgActiveColor="greyLighter"
+    textColor="greyDarker"
+    textActiveColor="black"
     {...props}
   >
-    <TextIcon
-      icon={<Icon icon={IconReset} size={12} />}
-      color={color || 'grey'}
-      size={12}
-      weight="medium"
-    >
+    <TextIcon icon={<Icon icon={IconReset} size={20} />} size={14}>
       <FormattedMessage defaultMessage="Shuffle" id="Pp/0po" />
     </TextIcon>
   </Button>

src/components/Dialogs/SetUserNameDialog/hook.ts

@@ -23,15 +23,11 @@ export const useAvailableUserName = ({
   const googleId = viewer.info.socialAccounts.find(
     (s) => s.type === SocialAccountType.Google
   )?.email
-  const facebookId = viewer.info.socialAccounts.find(
-    (s) => s.type === SocialAccountType.Facebook
-  )?.userName
   const twitterId = viewer.info.socialAccounts.find(
     (s) => s.type === SocialAccountType.Twitter
   )?.userName
 
-  const presetUserName =
-    (viewer.info.email as string) || googleId || facebookId || twitterId
+  const presetUserName = (viewer.info.email as string) || googleId || twitterId
 
   const [loading, setLoading] = useState(enable && !!presetUserName)
   const [index, setIndex] = useState(0)

src/components/FileUploader/MomentAssetsUploader/Item.tsx

@@ -102,7 +102,11 @@ export const Item = memo(function Item({
         const { id: assetId, path, uploadURL } = data?.directImageUpload || {}
 
         if (assetId && path && uploadURL) {
-          await uploadImage({ uploadURL, file })
+          const { id: cfImageId } = await uploadImage({ uploadURL, file })
+
+          if (!cfImageId || !path.includes(cfImageId)) {
+            throw new Error()
+          }
 
           // (async) mark asset draft as false
           directImageUploadDone({

src/components/Hook/useDirectImageUpload.tsx

@@ -25,7 +25,16 @@ export const useDirectImageUpload = () => {
       ) {
         throw new Error('directUpload error: non json response')
       }
-      const resData = await res.json()
+
+      const resData = (await res.json()) as {
+        success: boolean
+        errors: { message: string }[]
+        result?: {
+          id?: string
+          filename?: string
+        }
+      }
+
       if (resData?.success !== true) {
         // errors: Uploaded image must have image/jpeg, image/png, image/webp, image/gif or image/svg+xml content-type
         throw new Error(
@@ -40,6 +49,10 @@ export const useDirectImageUpload = () => {
         // performance.now() = Date.now() - performance.timing.navigationStart
         delay_msecs: (window?.performance.now() ?? -1) - started,
       })
+
+      return {
+        id: resData?.result?.id,
+      }
     } finally {
       setUploading(false)
     }

src/components/Slides/styles.module.css

@@ -1,5 +1,5 @@
 .slides {
-  padding: var(--sp16) 0;
+  padding: var(--sp24) 0 var(--sp8);
 
   & ul {
     @mixin hide-scrollbar;

src/components/SquareTabs/styles.module.css

@@ -67,10 +67,10 @@
   }
 
   &.spacingMd {
-    padding: var(--sp16);
+    padding: var(--sp24) var(--sp16) var(--sp4);
 
     @media (--sm-up) {
-      padding: var(--sp16) 0 var(--sp16);
+      padding: var(--sp32) 0 var(--sp12);
     }
   }
 }

src/components/TagDigest/Concise/index.tsx

@@ -11,8 +11,12 @@ import styles from './styles.module.css'
 
 export type TagDigestConciseTagProps = {
   tag: TagDigestConciseTagFragment
-  textSize?: 14 | 15
+  textSize?: 14 | 15 | 16
+  textWeight?: 'normal' | 'medium'
+  iconSize?: 20
   showArticlesNum?: boolean
+  textLineClamp?: boolean
+  onClick?: () => void
 }
 
 const fragments = {
@@ -28,21 +32,30 @@ const fragments = {
 const Concise = ({
   tag,
   textSize = 15,
+  textWeight = 'medium',
   showArticlesNum,
+  iconSize,
+  textLineClamp,
+  onClick,
 }: TagDigestConciseTagProps) => {
   const path = toPath({
     page: 'tagDetail',
     tag,
   })
   return (
-    <LinkWrapper {...path} testId={TEST_ID.DIGEST_TAG_CONCISE}>
+    <LinkWrapper
+      {...path}
+      testId={TEST_ID.DIGEST_TAG_CONCISE}
+      onClick={onClick}
+    >
       <section className={styles.content}>
         <TextIcon
-          icon={<Icon icon={IconHashTag} color="grey" />}
+          icon={<Icon icon={IconHashTag} color="grey" size={iconSize} />}
           color="black"
           size={textSize}
           spacing={4}
-          weight="medium"
+          weight={textWeight}
+          textLineClamp={textLineClamp}
         >
           {tag.content}
         </TextIcon>

src/components/TagDigest/Concise/styles.module.css

@@ -1,4 +1,6 @@
 .content {
+  word-break: break-all;
+
   & span + span {
     margin-left: 0.625rem;
   }

src/components/TagDigest/Feed/index.tsx

@@ -29,7 +29,7 @@ const Feed = ({ tag, onClick }: TagDigestFeedProps) => {
     tag,
   })
 
-  const numArticles = abbr(tag.numArticles, 2)
+  const numArticles = abbr(tag.numArticles, 1)
 
   return (
     <Link {...path} legacyBehavior onClick={onClick}>

src/components/TextIcon/index.tsx

@@ -34,6 +34,8 @@ export interface TextIconProps {
   decoration?: 'underline'
 
   allowUserSelect?: boolean
+
+  textLineClamp?: boolean
 }
 
 /**
@@ -61,6 +63,7 @@ export const TextIcon: React.FC<React.PropsWithChildren<TextIconProps>> = ({
   weight,
   placement = 'right',
   decoration,
+  textLineClamp,
 
   allowUserSelect = false,
 
@@ -76,6 +79,7 @@ export const TextIcon: React.FC<React.PropsWithChildren<TextIconProps>> = ({
     [styles[`text${capitalizeFirstLetter(placement)}`]]: true,
     [decoration ? styles[`text${capitalizeFirstLetter(decoration)}`] : '']:
       true,
+    [textLineClamp ? styles.textLineClamp : '']: textLineClamp,
     [weight ? styles[`weight${capitalizeFirstLetter(weight)}`] : '']: !!weight,
     [styles.noneSelect]: !allowUserSelect,
     [styles.hasIcon]: !!icon,

src/components/TextIcon/styles.module.css

@@ -225,3 +225,11 @@
 .textUnderline {
   text-decoration: underline;
 }
+
+.textLineClamp {
+  & .text {
+    @mixin line-clamp;
+
+    display: -webkit-inline-box;
+  }
+}

src/views/Callback/index.tsx

@@ -18,9 +18,6 @@ const Callback = () => {
       {provider === CALLBACK_PROVIDERS.Twitter && (
         <SocialCallback type={SocialAccountType.Twitter} />
       )}
-      {provider === CALLBACK_PROVIDERS.Facebook && (
-        <SocialCallback type={SocialAccountType.Facebook} />
-      )}
       {provider === CALLBACK_PROVIDERS.EmailVerification && (
         <EmailVerification />
       )}