fix: speaker mini profile

cyprus-developer-community · Nov 12, 2023 · 7370e81 · 7370e81
1 parent 8f6749d
commit 7370e81
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 52 deletions.
diff --git a/src/components/Speaker.jsx b/src/components/Speaker.jsx
@@ -1,65 +1,41 @@
 import speakerQuery from '~/graphql/speaker.query'
 import graphql from '~/lib/graphql.server'
+import { Show } from 'solid-js'
+import { GitHubIcon } from './SocialIcons'
 
 export default function Speaker(props) {
-  const [data] = graphql(speakerQuery.gql, {
+  const [user] = graphql(speakerQuery.gql, {
     login: props.person
   })
-  console.log(data())
+  // Fetch the "special repo" readme that's shown on a user profile page
+  // const [readmeFile] = graphql(fileQuery.gql('README.md'), {
+  //   repository: props.person,
+  //   organization: props.person
+  // })
 
-  const { person } = props
   return (
-    <>
+    <Show when={user}>
       <img
         class="aspect-[4/5] w-52 flex-none rounded-2xl object-cover"
-        src={person.imageUrl}
+        src={user().user.avatarUrl}
         alt=""
       />
+
       <div class="max-w-xl flex-auto">
         <h3 class="text-lg font-semibold leading-8 tracking-tight text-gray-900">
-          {person.name}
+          {user().user.name}
         </h3>
-        <p class="text-base leading-7 text-gray-600">{person.role}</p>
-        <p class="mt-6 text-base leading-7 text-gray-600">{person.bio}</p>
+        {/* <p class="text-base leading-7 text-gray-600">{person.role}</p> */}
+        <p class="mt-6 text-base leading-7 text-gray-600">{user().user.bio}</p>
         <ul role="list" class="mt-6 flex gap-x-6">
           <li>
-            <a
-              href={person.twitterUrl}
-              class="text-gray-400 hover:text-gray-500"
-            >
-              <span class="sr-only">Twitter</span>
-              <svg
-                class="h-5 w-5"
-                aria-hidden="true"
-                fill="currentColor"
-                viewBox="0 0 20 20"
-              >
-                <path d="M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0020 3.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 010 16.407a11.616 11.616 0 006.29 1.84" />
-              </svg>
-            </a>
-          </li>
-          <li>
-            <a
-              href={person.linkedinUrl}
-              class="text-gray-400 hover:text-gray-500"
-            >
-              <span class="sr-only">LinkedIn</span>
-              <svg
-                class="h-5 w-5"
-                aria-hidden="true"
-                fill="currentColor"
-                viewBox="0 0 20 20"
-              >
-                <path
-                  fillRule="evenodd"
-                  d="M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z"
-                  clipRule="evenodd"
-                />
-              </svg>
+            <a href={user().user.url} class="text-gray-400 hover:text-gray-500">
+              <span class="sr-only">GitHub</span>
+              <GitHubIcon class="w-5 h-5" />
             </a>
           </li>
         </ul>
       </div>
-    </>
+    </Show>
   )
 }
diff --git a/src/graphql/speaker.query.js b/src/graphql/speaker.query.js
@@ -5,21 +5,14 @@ export default {
     query ($login: String!) {
       user(login: $login) {
         login
+        name
+        url
         avatarUrl
         status {
           message
           emoji
         }
         bio
-        repository(name: $login) {
-          id
-          name
-          object(expression: "main:README.md") {
-            ... on Blob {
-              text
-            }
-          }
-        }
       }
     }
   `

diff --git a/src/routes/speakers/index.jsx b/src/routes/speakers/index.jsx
@@ -7,7 +7,9 @@ import graphql from '~/lib/graphql.server'
 
 export function routeData() {
   const [data] = graphql(talksQuery.gql, talksQuery.vars)
-  const authors = data()?.repository?.issues?.nodes.map((t) => t.author.login)
+  const authors = data()
+    ?.repository?.issues?.nodes.map((t) => t.author.login)
+    .filter((t, i, a) => a.indexOf(t) === i)
   return {
     authors
   }