ahmed/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases 6 Activity

Sort socials

Browse Source
This commit is contained in:
Ahmed Al-Taiar
2024-10-06 18:54:26 -04:00
parent fb542bb5b5
commit 49c943c9f3
3 changed files with 104 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
web/src/components/Social/SocialLinks/SocialLinks.tsx
View File

@@ -1,26 +1,24 @@
import { FindSocials } from 'types/graphql' import { FindSocials } from 'types/graphql'
import { baseUrls, getLogoComponent } from 'src/lib/handle' import { baseUrls, getLogoComponent, sortOrder } from 'src/lib/handle'
const SocialLinks = ({ socials }: FindSocials) => { const SocialLinks = ({ socials }: FindSocials) => (
return ( <div className={`grid max-w-68 grid-cols-[repeat(auto-fit,3rem)] gap-2`}>
<div className={`grid max-w-68 grid-cols-[repeat(auto-fit,3rem)] gap-2`}> {[...socials]
{[...socials] .sort((a, b) => sortOrder.indexOf(a.type) - sortOrder.indexOf(b.type))
.sort((a, b) => (a.type > b.type ? 1 : -1)) .map((social, i) => (
.map((social, i) => ( <div key={i} className="tooltip" data-tip={social.name}>
<div key={i} className="tooltip" data-tip={social.name}> <a
<a className="btn btn-square"
className="btn btn-square" href={`${baseUrls[social.type]}${social.username}`}
href={`${baseUrls[social.type]}${social.username}`} target="_blank"
target="_blank" rel="noreferrer"
rel="noreferrer" >
> {getLogoComponent(social.type)}
{getLogoComponent(social.type)} </a>
</a> </div>
</div> ))}
))} </div>
</div> )
)
}
export default SocialLinks export default SocialLinks

120
web/src/components/Social/Socials/Socials.tsx
View File

@@ -13,7 +13,7 @@ import { toast } from '@redwoodjs/web/toast'
import { QUERY } from 'src/components/Social/SocialsCell' import { QUERY } from 'src/components/Social/SocialsCell'
import { truncate } from 'src/lib/formatters' import { truncate } from 'src/lib/formatters'
import { getLogoComponent } from 'src/lib/handle' import { getLogoComponent, sortOrder } from 'src/lib/handle'
const DELETE_SOCIAL_MUTATION: TypedDocumentNode< const DELETE_SOCIAL_MUTATION: TypedDocumentNode<
DeleteSocialMutation, DeleteSocialMutation,
@@ -58,66 +58,70 @@ const SocialsList = ({ socials }: FindSocials) => {
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{socials.map((social) => { {[...socials]
const actionButtons = ( .sort(
<> (a, b) => sortOrder.indexOf(a.type) - sortOrder.indexOf(b.type)
<Link
to={routes.social({ id: social.id })}
title={'Show social ' + social.id + ' detail'}
className="btn btn-xs uppercase"
>
Show
</Link>
<Link
to={routes.editSocial({ id: social.id })}
title={'Edit social ' + social.id}
className="btn btn-primary btn-xs uppercase"
>
Edit
</Link>
<button
type="button"
title={'Delete social ' + social.id}
className="btn btn-error btn-xs uppercase"
onClick={() => onDeleteClick(social.name, social.id)}
>
Delete
</button>
</>
) )
.map((social) => {
const actionButtons = (
<>
<Link
to={routes.social({ id: social.id })}
title={'Show social ' + social.id + ' detail'}
className="btn btn-xs uppercase"
>
Show
</Link>
<Link
to={routes.editSocial({ id: social.id })}
title={'Edit social ' + social.id}
className="btn btn-primary btn-xs uppercase"
>
Edit
</Link>
<button
type="button"
title={'Delete social ' + social.id}
className="btn btn-error btn-xs uppercase"
onClick={() => onDeleteClick(social.name, social.id)}
>
Delete
</button>
</>
)
return ( return (
<tr key={social.id}> <tr key={social.id}>
<th>{getLogoComponent(social.type)}</th> <th>{getLogoComponent(social.type)}</th>
<td>{truncate(social.name)}</td> <td>{truncate(social.name)}</td>
<td>{truncate(social.username)}</td> <td>{truncate(social.username)}</td>
<td> <td>
<nav className="hidden justify-end space-x-2 sm:flex"> <nav className="hidden justify-end space-x-2 sm:flex">
{actionButtons} {actionButtons}
</nav> </nav>
<div className="dropdown dropdown-end flex justify-end sm:hidden"> <div className="dropdown dropdown-end flex justify-end sm:hidden">
<div <div
tabIndex={0} tabIndex={0}
role="button" role="button"
className="btn btn-square btn-ghost btn-sm lg:hidden" className="btn btn-square btn-ghost btn-sm lg:hidden"
> >
<Icon <Icon
path={mdiDotsVertical} path={mdiDotsVertical}
className="text-base-content-100 size-6" className="text-base-content-100 size-6"
/> />
</div>
<div
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
tabIndex={0}
className="menu dropdown-content z-10 -mt-1 mr-10 inline rounded-box bg-base-100 shadow-xl"
>
<nav className="w-46 space-x-2">{actionButtons}</nav>
</div>
</div> </div>
<div </td>
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex </tr>
tabIndex={0} )
className="menu dropdown-content z-10 -mt-1 mr-10 inline rounded-box bg-base-100 shadow-xl" })}
>
<nav className="w-46 space-x-2">{actionButtons}</nav>
</div>
</div>
</td>
</tr>
)
})}
</tbody> </tbody>
</table> </table>
</div> </div>

24
web/src/lib/handle.tsx
View File

@@ -20,7 +20,7 @@ import {
} from '@icons-pack/react-simple-icons' } from '@icons-pack/react-simple-icons'
import { mdiEmail, mdiLink, mdiPhone } from '@mdi/js' import { mdiEmail, mdiLink, mdiPhone } from '@mdi/js'
import Icon from '@mdi/react' import Icon from '@mdi/react'
import type { Handle } from 'types/graphql' import type { Handle, Social } from 'types/graphql'
export const baseUrls: Record<Handle, string> = { export const baseUrls: Record<Handle, string> = {
x: 'https://x.com/', x: 'https://x.com/',
@@ -76,4 +76,26 @@ const logoComponents: Record<Handle, ReactElement> = {
custom: <Icon path={mdiLink} className="size-7" />, 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] export const getLogoComponent = (type: Handle) => logoComponents[type]