feat(island): ✨ implement member card list
This commit is contained in:
parent
759bb90e18
commit
708dfe1b71
|
@ -1,4 +1,4 @@
|
|||
type MemberCardProps = {
|
||||
export type MemberCardProps = {
|
||||
id: string
|
||||
icon: string
|
||||
name: string
|
||||
|
@ -22,26 +22,3 @@ export function MemberCard(
|
|||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export const memberMock: MemberCardProps[] = Array(50).fill(undefined).map(
|
||||
(_, index) => {
|
||||
return {
|
||||
name: `Michel ${randomLastName()}`,
|
||||
groups: ['FabManager', 'Étudiant'],
|
||||
icon: `url("https://thispersondoesnotexist.com/")`,
|
||||
id: String(index),
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
function randomLastName() {
|
||||
const randomArray = Math.round(Math.random() * 1e8).toString().split('').map(
|
||||
Number,
|
||||
)
|
||||
|
||||
const [first, ...tail] = randomArray.map((number) =>
|
||||
String.fromCodePoint(number + 97)
|
||||
)
|
||||
|
||||
return [first.toLocaleUpperCase(), ...tail].join('')
|
||||
}
|
||||
|
|
60
islands/MemberCardList.tsx
Normal file
60
islands/MemberCardList.tsx
Normal file
|
@ -0,0 +1,60 @@
|
|||
import { MemberCard } from ':components/MemberCard.tsx'
|
||||
import CardList from ':islands/CardList.tsx'
|
||||
import type { Ref } from 'preact'
|
||||
|
||||
export default function MemberCardList(
|
||||
{ limit, filters, usePlaceholder, useObserver }: {
|
||||
filters?: [string, string][]
|
||||
limit?: number
|
||||
usePlaceholder?: boolean
|
||||
useObserver?: boolean
|
||||
},
|
||||
) {
|
||||
const query = new URL('members/fetchAll', 'https://null/')
|
||||
filters?.forEach((filter) => query.searchParams.set(...filter))
|
||||
|
||||
const apiRoute = `${query.pathname}${query.search}`
|
||||
|
||||
if (usePlaceholder) {
|
||||
return (
|
||||
<CardList
|
||||
apiRoute={apiRoute}
|
||||
builder={MemberCard}
|
||||
limit={limit}
|
||||
placeholder={Placeholder}
|
||||
fallback={Fallback}
|
||||
useObserver={useObserver}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<CardList
|
||||
apiRoute={apiRoute}
|
||||
builder={MemberCard}
|
||||
limit={limit}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function Placeholder({ ref }: { ref?: Ref<HTMLDivElement> | undefined }) {
|
||||
return (
|
||||
<div
|
||||
// class='components__blog_block components__blog_block--card components__blog_block--placeholder'
|
||||
ref={ref}
|
||||
>
|
||||
<h3>Chargement ...</h3>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function Fallback() {
|
||||
return (
|
||||
<div
|
||||
// class='components__blog_block components__blog_block--card components__blog_block--fallback'
|
||||
inert
|
||||
>
|
||||
<h3>Pas d'utilisateur</h3>
|
||||
</div>
|
||||
)
|
||||
}
|
45
src/members/mod.ts
Normal file
45
src/members/mod.ts
Normal file
|
@ -0,0 +1,45 @@
|
|||
import { MemberCardProps } from ':components/MemberCard.tsx'
|
||||
import { db } from ':src/db/mod.ts'
|
||||
import { Db, Ref, User } from '@cohabit/ressources_manager/mod.ts'
|
||||
|
||||
export async function fetchCarnet(login: string): Promise<string> {
|
||||
try {
|
||||
const response = await fetch(
|
||||
`https://git.cohabit.fr/${login}/.carnet/raw/branch/main/index.md`,
|
||||
)
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`[${response.status}] "${response.statusText}"`)
|
||||
}
|
||||
|
||||
return response.text()
|
||||
} catch (error) {
|
||||
return `# Carnet introuvable\n\`\`\`js\n${String(error)}\n\`\`\``
|
||||
}
|
||||
}
|
||||
|
||||
const resolver = Ref.dbResolver(db)
|
||||
|
||||
export async function userToMemberCardProps(user: User) {
|
||||
const groupNames = user.groups.map(async (group) => {
|
||||
const resolved = await group.ref(resolver)
|
||||
return resolved.name
|
||||
})
|
||||
|
||||
return {
|
||||
name: user.name,
|
||||
groups: await Promise.all(groupNames),
|
||||
icon: `url("${user.avatar}")`,
|
||||
id: user.uuid,
|
||||
}
|
||||
}
|
||||
|
||||
export function dbToMemberCardProps(
|
||||
db: Db,
|
||||
): AsyncIterableIterator<MemberCardProps> {
|
||||
const memberList = db.ressource.user
|
||||
.list()
|
||||
.map(userToMemberCardProps)
|
||||
|
||||
return memberList as AsyncIterableIterator<MemberCardProps>
|
||||
}
|
Loading…
Reference in a new issue