Sort socials

web/src/components/Social/SocialLinks/SocialLinks.tsx

@@ -1,12 +1,11 @@
 import { FindSocials } from 'types/graphql'
 
-import { baseUrls, getLogoComponent } from 'src/lib/handle'
+import { baseUrls, getLogoComponent, sortOrder } from 'src/lib/handle'
 
-const SocialLinks = ({ socials }: FindSocials) => {
-  return (
+const SocialLinks = ({ socials }: FindSocials) => (
   <div className={`grid max-w-68 grid-cols-[repeat(auto-fit,3rem)] gap-2`}>
     {[...socials]
-        .sort((a, b) => (a.type > b.type ? 1 : -1))
+      .sort((a, b) => sortOrder.indexOf(a.type) - sortOrder.indexOf(b.type))
       .map((social, i) => (
         <div key={i} className="tooltip" data-tip={social.name}>
           <a
@@ -21,6 +20,5 @@ const SocialLinks = ({ socials }: FindSocials) => {
       ))}
   </div>
 )
-}
 
 export default SocialLinks

web/src/components/Social/Socials/Socials.tsx

@@ -13,7 +13,7 @@ import { toast } from '@redwoodjs/web/toast'
 
 import { QUERY } from 'src/components/Social/SocialsCell'
 import { truncate } from 'src/lib/formatters'
-import { getLogoComponent } from 'src/lib/handle'
+import { getLogoComponent, sortOrder } from 'src/lib/handle'
 
 const DELETE_SOCIAL_MUTATION: TypedDocumentNode<
   DeleteSocialMutation,
@@ -58,7 +58,11 @@ const SocialsList = ({ socials }: FindSocials) => {
           </tr>
         </thead>
         <tbody>
-          {socials.map((social) => {
+          {[...socials]
+            .sort(
+              (a, b) => sortOrder.indexOf(a.type) - sortOrder.indexOf(b.type)
+            )
+            .map((social) => {
               const actionButtons = (
                 <>
                   <Link

web/src/lib/handle.tsx

@@ -20,7 +20,7 @@ import {
 } from '@icons-pack/react-simple-icons'
 import { mdiEmail, mdiLink, mdiPhone } from '@mdi/js'
 import Icon from '@mdi/react'
-import type { Handle } from 'types/graphql'
+import type { Handle, Social } from 'types/graphql'
 
 export const baseUrls: Record<Handle, string> = {
   x: 'https://x.com/',
@@ -76,4 +76,26 @@ const logoComponents: Record<Handle, ReactElement> = {
   custom: <Icon path={mdiLink} className="size-7" />,
 }
 
+export const sortOrder: Social['type'][] = [
+  'phone',
+  'email',
+  'custom',
+  'linkedin',
+  'leetcode',
+  'github',
+  'gitea',
+  'forgejo',
+  'gitlab',
+  'bitbucket',
+  'youtube',
+  'x',
+  'instagram',
+  'tiktok',
+  'facebook',
+  'threads',
+  'twitch',
+  'discord',
+  'steam',
+]
+
 export const getLogoComponent = (type: Handle) => logoComponents[type]