Merge pull request #244 from juddisjudd/main

fix(DisplayMembers): improve member sorting and update prettier-plugin

Author: thelindat

components/DisplayMembers.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect } from 'react';
 import MemberLink from './MemberLink';
 
 interface GithubMember {
@@ -16,55 +16,79 @@ const cacheKey = 'overextendedMembers';
 const cacheExpiry = 24 * 60 * 60 * 1000;
 
 const sponsor = {
-  thelindat: `thelindat`,
-  LukeWasTakenn: `lukewastaken`,
-  DokaDoka: `dokadoka`,
+  thelindat: 'thelindat',
+  LukeWasTakenn: 'lukewastaken',
+  DokaDoka: 'dokadoka',
+  juddisjudd: 'ohitsjudd',
   jag3dagster: `jag3dagster`,
-}
+};
+
+const priorityOrder = ['thelindat', 'LukeWasTakenn'];
 
 async function FetchMembers() {
   const raw = localStorage.getItem(cacheKey);
   const members: MemberData = raw ? JSON.parse(raw) : {};
   const isCacheExpired = members.timestamp ? new Date().getTime() - members.timestamp > cacheExpiry : true;
 
-  if (!isCacheExpired) return members;
-
-  const headers = {}
+  if (!isCacheExpired) {
+    console.log('Using cached members data:', members.data);
+    return members;
+  }
 
+  const headers: Record<string, string> = {};
   if (members.etag) headers['If-None-Match'] = members.etag;
 
-  const response = await fetch(`https://api.github.com/orgs/overextended/members`, {
-      headers: headers
-  })
+  const response = await fetch(`https://api.github.com/orgs/overextended/members`, { headers });
 
   if (response.status === 304) return members;
 
   members.data = await response.json();
   members.etag = response.headers.get('ETag');
   members.timestamp = new Date().getTime();
 
+  members.data = [
+    ...priorityOrder
+      .map((login) => {
+        const foundMember = members.data.find((member) => member.login === login);
+        if (!foundMember) {
+          console.warn(`Member ${login} not found in API response`);
+        }
+        return foundMember;
+      })
+      .filter((member): member is GithubMember => !!member),
+    ...members.data.filter((member) => !priorityOrder.includes(member.login)),
+  ];
+
+  console.log('Sorted members data:', members.data);
+
   localStorage.setItem(cacheKey, JSON.stringify(members));
-  console.log(`fetched data and set cache (etag ${members.etag})`, members.timestamp)
-  
+  console.log(`Fetched, sorted, and cached data (etag ${members.etag})`, members.timestamp);
+
   return members;
 }
 
 const DisplayMembers = () => {
-  const [members, setMembers] = useState(null);
+  const [members, setMembers] = useState<MemberData | null>(null);
 
   useEffect(() => {
-    (async() => setMembers(await FetchMembers()))()
-  }, [])
+    (async () => setMembers(await FetchMembers()))();
+  }, []);
 
   return (
     <>
       {members?.data && (
-        <div className='grid md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-4 grid-cols-1 mt-4 gap-16 place-items-center'>
-          {members.data.map((member) => MemberLink({ image: member.avatar_url, name: member.name ?? member.login, sponsor: sponsor[member.login] }))}
+        <div className="mt-4 grid grid-cols-1 place-items-center gap-16 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-4">
+          {members.data.map((member) =>
+            MemberLink({
+              image: member.avatar_url,
+              name: member.login,
+              sponsor: sponsor[member.login],
+            })
+          )}
         </div>
       )}
     </>
-  )
+  );
 };
 
 export default DisplayMembers;

package.json

@@ -33,7 +33,7 @@
     "@types/node": "18.11.10",
     "autoprefixer": "^10.4.19",
     "postcss": "^8.4.38",
-    "prettier-plugin-tailwindcss": "^0.3.0",
+    "prettier-plugin-tailwindcss": "^0.6.11",
     "tailwindcss": "^3.4.4",
     "typescript": "^4.9.5"
   },