get channels list from server

src/components/Members/LeftPanel/Channels.tsx

@@ -1,7 +1,15 @@
 import { FaCog } from "react-icons/fa";
+import { Pb } from "../../EspaceMembres";
+import { useContext, useState } from "preact/hooks";
+import type { ChannelsRecord } from "../../../types/pb_types";
 
 export default function Channels() {
-  const channels = ["Discussion", "Nature", "Portrait", "Architecture"];
+  const pb = useContext(Pb);
+  const [channels, setChannels] = useState<Array<ChannelsRecord>>([]);
+  pb.collection('channels').getFullList<ChannelsRecord>().then((data) => {
+    if (!data) return;
+    setChannels(data);
+  });
 
   return (
     <div className="flex flex-col flex-grow border-b-2 border-b-gray-200">
@@ -15,7 +23,7 @@ export default function Channels() {
         {channels.map((channel) => (
           <li className="p-2 hover:bg-gray-100 cursor-pointer text-xl flex items-center" key={channel}>
             <p className="flex-grow">
-              <span className="text-gray-400">#</span> {channel}
+              <span className="text-gray-400">#</span> {channel.name}
             </p>
             <FaCog className="transition hover:text-gray-700" />
           </li>

src/types/pb_types.d.ts

@@ -6,9 +6,11 @@ import type PocketBase from 'pocketbase'
 import type { RecordService } from 'pocketbase'
 
 export enum Collections {
+	Albums = "albums",
 	Channels = "channels",
-	Files = "files",
+	Messages = "messages",
 	Pages = "pages",
+	Photos = "photos",
 	Users = "users",
 }
 
@@ -36,14 +38,22 @@ export type AuthSystemFields<T = never> = {
 
 // Record types for each collection
 
+export type AlbumsRecord = {
+	description?: string
+	pictures?: RecordIdString[]
+	title?: string
+}
+
 export type ChannelsRecord = {
-	field1?: RecordIdString[]
+	creator?: RecordIdString
 	name?: string
 }
 
-export type FilesRecord = {
+export type MessagesRecord = {
-	alt?: string
+	attachment?: string
-	file: string
+	author?: RecordIdString
+	channel?: RecordIdString
+	content?: string
 }
 
 export type PagesRecord<Tcontent = unknown> = {
@@ -52,6 +62,13 @@ export type PagesRecord<Tcontent = unknown> = {
 	title?: string
 }
 
+export type PhotosRecord = {
+	alt?: string
+	description?: string
+	image?: string
+	title?: string
+}
+
 export type UsersRecord = {
 	avatar?: string
 	firstname?: string
@@ -59,24 +76,30 @@ export type UsersRecord = {
 }
 
 // Response types include system fields and match responses from the PocketBase API
+export type AlbumsResponse<Texpand = unknown> = Required<AlbumsRecord> & BaseSystemFields<Texpand>
 export type ChannelsResponse<Texpand = unknown> = Required<ChannelsRecord> & BaseSystemFields<Texpand>
-export type FilesResponse<Texpand = unknown> = Required<FilesRecord> & BaseSystemFields<Texpand>
+export type MessagesResponse<Texpand = unknown> = Required<MessagesRecord> & BaseSystemFields<Texpand>
 export type PagesResponse<Tcontent = unknown, Texpand = unknown> = Required<PagesRecord<Tcontent>> & BaseSystemFields<Texpand>
+export type PhotosResponse<Texpand = unknown> = Required<PhotosRecord> & BaseSystemFields<Texpand>
 export type UsersResponse<Texpand = unknown> = Required<UsersRecord> & AuthSystemFields<Texpand>
 
 // Types containing all Records and Responses, useful for creating typing helper functions
 
 export type CollectionRecords = {
+	albums: AlbumsRecord
 	channels: ChannelsRecord
-	files: FilesRecord
+	messages: MessagesRecord
 	pages: PagesRecord
+	photos: PhotosRecord
 	users: UsersRecord
 }
 
 export type CollectionResponses = {
+	albums: AlbumsResponse
 	channels: ChannelsResponse
-	files: FilesResponse
+	messages: MessagesResponse
 	pages: PagesResponse
+	photos: PhotosResponse
 	users: UsersResponse
 }
 
@@ -84,8 +107,10 @@ export type CollectionResponses = {
 // https://github.com/pocketbase/js-sdk#specify-typescript-definitions
 
 export type TypedPocketBase = PocketBase & {
+	collection(idOrName: 'albums'): RecordService<AlbumsResponse>
 	collection(idOrName: 'channels'): RecordService<ChannelsResponse>
-	collection(idOrName: 'files'): RecordService<FilesResponse>
+	collection(idOrName: 'messages'): RecordService<MessagesResponse>
 	collection(idOrName: 'pages'): RecordService<PagesResponse>
+	collection(idOrName: 'photos'): RecordService<PhotosResponse>
 	collection(idOrName: 'users'): RecordService<UsersResponse>
 }