| Prefix | Values |
|---|---|
| gap- |
|
Contenu du post
', state: 'PUBLISHED' } ); // Upload de fichier const formData = new FormData(); formData.append('file', file, file.name); const uploaded = await odeServices.http().postFileNouveau contenu
' }); // Requête DELETE await odeServices.http().delete('/blog/post/123'); ``` -------------------------------- ### Session Management Service (TS) Source: https://context7.com/edificeio/edifice-frontend-framework/llms.txt The Session service handles user authentication and retrieves connected user information. It provides methods to get user details, descriptions, and check authentication status. ```typescript import { odeServices } from '@edifice.io/client'; // Obtenir les informations de l'utilisateur courant const user = await odeServices.session().getUser(); console.log('Utilisateur:', user?.userId, user?.username); // Obtenir la description complète de l'utilisateur const description = await odeServices.session().getUserDescription(); console.log('Profil:', description?.firstName, description?.lastName); // Vérifier si l'utilisateur est connecté const isAuthenticated = await odeServices.session().isAuthenticated(); // Exemple d'utilisation dans un composant function SessionInfo() { const [sessionData, setSessionData] = useState(null); useEffect(() => { async function loadSession() { const user = await odeServices.session().getUser(); const description = await odeServices.session().getUserDescription(); setSessionData({ user, description }); } loadSession(); }, []); if (!sessionData) returnConnecté en tant que: {sessionData.user.username}
Établissement: {sessionData.description.structureNames?.join(', ')}
Application: {currentApp?.displayName}
Utilisateur: {user?.username}
Langue: {currentLanguage}
Contenu du post
', state: 'PUBLISHED' } ); ``` ### Request Example (POST File) ```typescript const formData = new FormData(); formData.append('file', file, file.name); const uploaded = await odeServices.http().postFileNouveau contenu
' }); ``` ### Request Example (DELETE) ```typescript await odeServices.http().delete('/blog/post/123'); ``` ### Error Handling - **isResponseError()** (boolean) - Checks if the last response resulted in an error. - **latestResponse.statusText** (string) - Accesses the status text of the latest response. ### Response #### Success Response (200) - **(Varies)** (type) - The type depends on the endpoint and the generic type provided (e.g., `User[]`, `Document[]`, `Resource`, `WorkspaceElement`). #### Response Example (GET users) ```json [ { "id": "user-1", "name": "John Doe" } ] ``` ``` -------------------------------- ### Workspace File and Folder Management Source: https://context7.com/edificeio/edifice-frontend-framework/llms.txt The Workspace service enables comprehensive management of files and folders, including uploads, updates, deletions, transfers, and thumbnail generation. It requires the '@edifice.io/client' package and operates on WorkspaceElement objects. ```tsx import { odeServices, WorkspaceElement } from '@edifice.io/client'; // Upload d'un fichier const file = event.target.files[0]; const uploadedFile = await odeServices.workspace().saveFile(file, { parentId: 'folder-id', visibility: 'protected', application: 'blog' }); // Mettre à jour un fichier existant const updatedFile = await odeServices.workspace().updateFile( 'document-id', newFile, { name: 'nouveau-nom.pdf', alt: 'Description alternative' } ); // Lister les documents d'un dossier const documents = await odeServices.workspace().listDocuments('owner', 'parent-folder-id'); // Recherche avancée de documents const results = await odeServices.workspace().searchDocuments({ filter: 'shared', search: 'rapport', limit: 20, includeall: true }); // Lister les dossiers avec hiérarchie const folders = await odeServices.workspace().listOwnerFolders(true); const sharedFolders = await odeServices.workspace().listSharedFolders(true, 'parent-id'); // Créer un nouveau dossier await odeServices.workspace().createFolder('Nouveau dossier', 'parent-folder-id'); // Supprimer des fichiers const filesToDelete: WorkspaceElement[] = [doc1, doc2, doc3]; await odeServices.workspace().deleteFile(filesToDelete); // Transférer des documents vers une visibilité différente const transferredDocs = await odeServices.workspace().transferDocuments( selectedDocuments, 'blog', 'public' ); // Obtenir l'URL d'une miniature const thumbnailUrl = odeServices.workspace().getThumbnailUrl(document, 300, 200); // Ou avec taille par défaut const defaultThumb = odeServices.workspace().getThumbnailUrl(document); ``` -------------------------------- ### Implement useDebounce Hook in React Source: https://github.com/edificeio/edifice-frontend-framework/blob/develop/packages/react/src/hooks/useDebounce/useDebounce.mdx Demonstrates how to integrate the useDebounce hook into a functional React component to delay state-dependent logic. It accepts a value and a delay duration, returning a debounced version of the input. ```typescript import useDebounce from './useDebounce'; function Component() { const [value, setValue] = useState(''); const debouncedValue = useDebounce(value, 500); useEffect(() => { // Do something with debouncedValue }, [debouncedValue]); return ( setValue(e.target.value)} /> ); } ``` ```typescript import React, { useState } from 'react'; import useDebounce from './useDebounce'; function SearchInput() { const [query, setQuery] = useState(''); const debouncedQuery = useDebounce(query, 300); useEffect(() => { if (debouncedQuery) { // Fetch data or perform some action with debouncedQuery } }, [debouncedQuery]); return ( setQuery(e.target.value)} placeholder="Search..." /> ); } ``` -------------------------------- ### MediaLibrary Component for Media Selection and Upload (React) Source: https://context7.com/edificeio/edifice-frontend-framework/llms.txt The MediaLibrary component provides a modal interface for users to select, upload, or capture media files (images, audio, video, links). It supports various configurations for media types, visibility, and multiple selections. The component uses a ref for programmatic control and provides callbacks for success and cancellation. ```tsx import { MediaLibrary, MediaLibraryRef, useRef } from '@edifice.io/react'; import { WorkspaceElement } from '@edifice.io/client'; function EditeurAvecMedias() { const mediaLibraryRef = useRef
setSearchTerm(e.target.value)}
/>
);
}
```
--------------------------------
### ImageResizer Utility for Client-Side Image Optimization (React)
Source: https://context7.com/edificeio/edifice-frontend-framework/llms.txt
The ImageResizer utility class allows for client-side resizing and compression of images before they are uploaded. This helps optimize performance by reducing file sizes. It can be used to resize images to specific dimensions and quality levels, and it returns a new File object representing the processed image.
```tsx
import { ImageResizer } from '@edifice.io/utilities';
// Redimensionner une image avant upload
async function handleImageUpload(event: React.ChangeEvent-
{results.map((item) => (
- {item.name} ))}
{permissions['org.entcore.workspace.controllers.WorkspaceController|addDocument'] && (
)}
{permissions['org.entcore.blog.controllers.BlogController|create'] && (
)}
);
}
```
--------------------------------
### Retrieve user profile with useUser
Source: https://context7.com/edificeio/edifice-frontend-framework/llms.txt
The useUser hook provides access to the authenticated user's information, including avatar and profile details, retrieved from the Edifice application context.
```tsx
import { useUser } from '@edifice.io/react';
function ProfilUtilisateur() {
const { user, avatar, userDescription } = useUser();
if (!user) {
return Chargement...
;
}
return (
{user.username}
Prénom: {userDescription?.firstName}
Nom: {userDescription?.lastName}
Email: {userDescription?.email}
Profil: {user.type}
{isOpen && (
);
}
```
--------------------------------
### Select Component: Customizable Selection Lists (React)
Source: https://context7.com/edificeio/edifice-frontend-framework/llms.txt
The Select component provides a customizable selection list based on Dropdown, supporting icons, and controlled/uncontrolled modes. It requires '@edifice.io/react' and optionally '@edifice.io/react/icons'.
```tsx
import { Select } from '@edifice.io/react';
import { IconFolder, IconFile, IconImage } from '@edifice.io/react/icons';
// Select simple avec options string
Contenu du panneau
)}