clients/web: fix OG image

polarsource · Jul 23, 2024 · 5c55934 · 5c55934
1 parent 5b3a6b3
commit 5c55934
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 39 deletions.
diff --git a/clients/apps/web/src/app/og/route.tsx b/clients/apps/web/src/app/og/route.tsx
@@ -22,7 +22,7 @@ const renderFundingOG = async (
   org_name: string,
   repository: Repository | undefined,
   issue_count: number,
-  avatar: string,
+  avatar: string | undefined,
   issues: Issue[],
   largeIssue: boolean,
 ) => {
@@ -125,23 +125,21 @@ const renderArticleOG = async (article: Article) => {
 }
 
 const listIssues = async (
-  org: string,
-  repo: string | null,
+  org: Organization,
+  repo: Repository | undefined,
 ): Promise<ListResourceIssue> => {
   const params = new URLSearchParams()
   params.set('platform', 'github')
-  params.set('organization_name', org)
+  params.set('organization_id', org.id)
   if (repo) {
-    params.set('repository_name', repo)
+    params.set('repository_name', repo.name)
   }
-  params.set('have_badge', 'true')
-  params.set('sort', 'funding_goal_desc_and_most_positive_reactions')
-  return await fetch(
-    `${getServerURL()}/v1/issues/search?${params.toString()}`,
-    {
-      method: 'GET',
-    },
-  ).then((response) => {
+  params.set('is_badged', 'true')
+  params.append('sorting', '-funding_goal')
+  params.append('sorting', '-positive_reactions')
+  return await fetch(`${getServerURL()}/v1/issues/?${params.toString()}`, {
+    method: 'GET',
+  }).then((response) => {
     if (!response.ok) {
       throw new Error(`Unexpected ${response.status} status code`)
     }
@@ -266,7 +264,7 @@ export async function GET(req: NextRequest) {
       issues = [issueData]
       largeIssue = true
     } else {
-      const res = await listIssues(org, repo)
+      const res = await listIssues(orgData, repoData)
       if (res.items) {
         issues = res.items
         total_issue_count = res.pagination.total_count

diff --git a/clients/apps/web/src/components/Organization/OpenGraphImageCreator.tsx b/clients/apps/web/src/components/Organization/OpenGraphImageCreator.tsx
@@ -11,7 +11,7 @@ const generatePostOGFallbackPath = (slug: string, maxInt: number) => {
 
 const imageBaseURL = 'https://polar.sh/assets/posts/og'
 
-const OpenGraphImageArticle = ({
+const OpenGraphImageCreator = ({
   organization,
 }: {
   organization: Organization
@@ -44,17 +44,19 @@ const OpenGraphImageArticle = ({
         textWrap: 'balance',
       }}
     >
-      <img
-        src={organization.avatar_url}
-        height={160}
-        width={160}
-        style={{
-          height: 160,
-          width: 160,
-          borderRadius: 160,
-          flexShrink: 0,
-        }}
-      />
+      {organization.avatar_url && (
+        <img
+          src={organization.avatar_url}
+          height={160}
+          width={160}
+          style={{
+            height: 160,
+            width: 160,
+            borderRadius: 160,
+            flexShrink: 0,
+          }}
+        />
+      )}
       <div
         style={{
           fontWeight: 500,
@@ -69,4 +71,4 @@ const OpenGraphImageArticle = ({
   )
 }
 
-export default OpenGraphImageArticle
+export default OpenGraphImageCreator
diff --git a/clients/apps/web/src/components/Organization/OpenGraphImageFunding.tsx b/clients/apps/web/src/components/Organization/OpenGraphImageFunding.tsx
@@ -5,7 +5,7 @@ const OpenGraphImageFunding = (props: {
   org_name: string
   repo_name?: string
   issue_count: number
-  avatar: string
+  avatar?: string
   issues: Issue[]
   largeIssue: boolean
 }) => {
@@ -82,17 +82,19 @@ const OpenGraphImageFunding = (props: {
               justifyContent: 'center',
             }}
           >
-            <img
-              src={props.avatar}
-              height={48}
-              width={48}
-              style={{
-                height: 48,
-                width: 48,
-                borderRadius: 48,
-                flexShrink: 0,
-              }}
-            />
+            {props.avatar && (
+              <img
+                src={props.avatar}
+                height={48}
+                width={48}
+                style={{
+                  height: 48,
+                  width: 48,
+                  borderRadius: 48,
+                  flexShrink: 0,
+                }}
+              />
+            )}
             <div
               style={{
                 fontWeight: 'bold',

diff --git a/clients/apps/web/src/stories/OpenGraphImageFunding.stories.tsx b/clients/apps/web/src/stories/OpenGraphImageFunding.stories.tsx
@@ -32,6 +32,20 @@ export const Default: Story = {
   },
 }
 
+export const OrganizationNoAvatar: Story = {
+  args: {
+    org_name: org.name,
+    issues: [],
+  },
+  render: (args) => {
+    return (
+      <div className="absolute">
+        <OpenGraphImageFunding {...args} />
+      </div>
+    )
+  },
+}
+
 export const IssueToday: Story = {
   args: {
     org_name: org.name,