From 5a7a8a1afadb0a832aa99216e336639c8e559392 Mon Sep 17 00:00:00 2001
From: Patrick Heneise <patrick@zentered.co>
Date: Fri, 10 Nov 2023 22:03:48 -0500
Subject: [PATCH] feat: stats

---
 src/graphql/organization.query.js | 13 +++++-
 src/routes/index.jsx              | 70 ++++++++++++++++++++++++++++++-
 2 files changed, 79 insertions(+), 4 deletions(-)

diff --git a/src/graphql/organization.query.js b/src/graphql/organization.query.js
index 9bb3685..6636ab0 100644
--- a/src/graphql/organization.query.js
+++ b/src/graphql/organization.query.js
@@ -2,16 +2,25 @@ import { gql } from '@solid-primitives/graphql'
 
 export default {
   gql: gql`
-    query ($organization: String!) {
+    query ($organization: String!, $repository: String!) {
       organization(login: $organization) {
         name
         description
         url
         email
+        membersWithRole {
+          totalCount
+        }
+      }
+      repository(owner: $organization, name: $repository) {
+        issues(labels: ["Approved :white_check_mark:", "Event :sparkles:"]) {
+          totalCount
+        }
       }
     }
   `,
   vars: {
-    organization: process.env.GH_ORG
+    organization: process.env.GH_ORG,
+    repository: 'events'
   }
 }
diff --git a/src/routes/index.jsx b/src/routes/index.jsx
index a8dc741..9f818c5 100644
--- a/src/routes/index.jsx
+++ b/src/routes/index.jsx
@@ -1,10 +1,19 @@
-import { For, createResource, splitProps, Show, Switch, Match } from 'solid-js'
+import {
+  For,
+  createResource,
+  splitProps,
+  Show,
+  Switch,
+  Match,
+  createMemo
+} from 'solid-js'
 import clsx from 'clsx'
 import { Container } from '~/components/Container'
 import { GitHubIcon, LinkedInIcon } from '~/components/SocialIcons'
 import { A } from 'solid-start'
 import graphql from '~/lib/graphql.server.js'
 import fileQuery from '~/graphql/file.query.js'
+import organizationQuery from '~/graphql/organization.query.js'
 import issuesQuery from '~/graphql/issues.query.js'
 import bodyParser from '@zentered/issue-forms-body-parser'
 import { H1, H2, H3 } from '~/components/Atomic'
@@ -110,12 +119,68 @@ function EventBox(props) {
   )
 }
 
+function Stats(props) {
+  const stats = createMemo(() => {
+    return [
+      {
+        name: 'GitHub Organization Members',
+        value: props.organization()?.organization.membersWithRole.totalCount
+      },
+      {
+        name: 'Users on Discord',
+        value: '300+'
+        // TODO: get this via api
+      },
+      {
+        name: 'Events',
+        value: props.organization()?.repository.issues.totalCount
+      },
+      {
+        name: 'Cyprus',
+        value: '100%'
+      }
+    ]
+  })
+
+  return (
+    <div class="bg-white py-24 sm:py-32">
+      <div class="mx-auto max-w-7xl px-6 lg:px-8">
+        <div class="mx-auto max-w-2xl lg:max-w-none">
+          <div class="text-center">
+            <H2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
+              Your Tech Community in Cyprus
+            </H2>
+            {/* <p class="mt-4 text-lg leading-8 text-gray-600">
+              Lorem ipsum dolor sit amet consect adipisicing possimus.
+            </p> */}
+          </div>
+          <dl class="mt-16 grid grid-cols-1 gap-0.5 overflow-hidden rounded-2xl text-center sm:grid-cols-2 lg:grid-cols-4">
+            <For each={stats()}>
+              {(stat) => (
+                <div class="flex flex-col bg-gray-400/5 p-8">
+                  <dt class="text-sm font-semibold leading-6 text-gray-600">
+                    {stat.name}
+                  </dt>
+                  <dd class="order-first text-3xl font-semibold tracking-tight text-gray-900">
+                    {stat.value}
+                  </dd>
+                </div>
+              )}
+            </For>
+          </dl>
+        </div>
+      </div>
+    </div>
+  )
+}
+
 export default function App() {
   const [readmeFile] = graphql(fileQuery.gql(), {
     repository: 'home',
     path: 'README.md',
     ...fileQuery.vars
   })
+  const [organization] = graphql(organizationQuery.gql, organizationQuery.vars)
   const [readmeData] = createResource(readmeFile, async () => {
     const data = await bodyParser(readmeFile()?.repository.object.text)
     return data
@@ -129,7 +194,7 @@ export default function App() {
     <>
       <Container class="mt-9">
         <div class="max-w-2xl">
-          <H1>Cyprus Developer Community</H1>
+          <H1>{organization()?.organization.name}</H1>
           <Show when={readmeData}>
             <p class="mt-6 text-base text-zinc-600 dark:text-zinc-400">
               {readmeData()?.about?.content}
@@ -150,6 +215,7 @@ export default function App() {
         </div>
       </Container>
       <Photos />
+      <Stats organization={organization} />
       <Container class="bg-white py-24 sm:py-32">
         <H2>Upcoming Events</H2>
         <div class="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-3">