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
|
id: string
|
||||||
icon: string
|
icon: string
|
||||||
name: string
|
name: string
|
||||||
|
@ -22,26 +22,3 @@ export function MemberCard(
|
||||||
</div>
|
</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