ode-explorer 1.0.0-explorer

package/public/locales/en/translations.json

@@ -0,0 +1,3 @@
+{
+  "explorer": "Explorer"
+}

package/public/locales/fr/translations.json

@@ -0,0 +1,3 @@
+{
+  "explorer": "Explorateur"
+}

package/src/app/App.tsx

@@ -0,0 +1,175 @@
+import React, { useEffect, useRef } from "react";
+
+import "../index.css";
+
+import AppHeader from "@components/AppHeader";
+import FakeCard from "@components/FakeCard";
+import { useExplorerContext } from "@contexts/ExplorerContext";
+import { useOdeContext } from "@contexts/OdeContext";
+import useExplorerAdapter from "@hooks/adapters/explorer/useExplorerAdapter";
+import useI18n from "@hooks/useI18n";
+import {
+  AppCard,
+  Button,
+  FormControl,
+  Grid,
+  Header,
+  Input,
+  SearchButton,
+  TreeView,
+} from "@ode-react-ui/core";
+import { Plus } from "@ode-react-ui/icons";
+
+import libraryIMG from "../assets/images/library.jpg";
+
+function App() {
+  const { session, currentApp } = useOdeContext();
+  const { i18n } = useI18n();
+  const { context, onOpen, onCreate } = useExplorerContext();
+  const { treeData, listData } = useExplorerAdapter();
+  // const { is1d } = useThemeContext();
+
+  useEffect(() => {
+    // TODO initialize search parameters. Here and/or in the dedicated React component
+    context.getSearchParameters().pagination.pageSize = 2;
+    // Do explore...
+    context.initialize();
+    // ...results (latestResources()) are observed in treeview adapter
+  }, []);
+
+  // Form
+  const formRef = useRef(null);
+
+  function handleOnSubmit(e: React.FormEvent) {
+    e.preventDefault();
+  }
+
+  function handleKeyDown(assetId: string) {
+    window.addEventListener("keydown", () => {
+      onOpen(assetId);
+    });
+  }
+
+  if (!session || session.notLoggedIn) {
+    return (
+      <div>
+        <a href="http://localhost:8090/" target="_blank" rel="noreferrer">
+          S'identifier
+        </a>
+        sur le backend...
+      </div>
+    );
+  }
+
+  function handleViewMore() {
+    context.getResources();
+  }
+
+  return (
+    <div className="App">
+      <Header />
+      {/* <button type="button" onClick={handleSwitchTheme}>
+        Switch theme
+      </button> */}
+      <main className="container-fluid bg-white">
+        <AppHeader>
+          <AppCard app={currentApp} isHeading headingStyle="h3" level="h1">
+            <AppCard.Icon size="40" />
+            <AppCard.Name />
+          </AppCard>
+          <Button
+            type="button"
+            color="primary"
+            variant="filled"
+            leftIcon={<Plus />}
+            className="ms-auto"
+            onClick={onCreate}
+          >
+            {i18n("blog.create.title")}
+          </Button>
+        </AppHeader>
+        <Grid style={{ minHeight: "calc(100vh - 14rem)" }}>
+          <Grid.Col
+            sm="3"
+            className="border-end pt-16 pe-16 d-none d-lg-block"
+            as="aside"
+          >
+            <TreeView data={treeData} />
+            <div className="d-grid my-16">
+              <Button
+                type="button"
+                color="primary"
+                variant="outline"
+                leftIcon={<Plus />}
+              >
+                {i18n("blog.folder.new")}
+              </Button>
+            </div>
+            <div>
+              <img src={libraryIMG} alt="ODE Library" />
+            </div>
+          </Grid.Col>
+          <Grid.Col sm="4" md="8" lg="9">
+            <form
+              ref={formRef}
+              noValidate
+              className="bg-light p-16 ps-24 ms-n24 me-n16"
+              onSubmit={handleOnSubmit}
+            >
+              <FormControl id="search" className="input-group">
+                <Input
+                  type="search"
+                  placeholder={i18n("label.search")}
+                  size="lg"
+                  noValidationIcon
+                />
+                <SearchButton type="submit" aria-label={i18n("label.search")} />
+              </FormControl>
+            </form>
+            <h2 className="py-24 body">{i18n("filters.mine")}</h2>
+            <ul className="grid ps-0">
+              {listData.map((item: any) => {
+                return (
+                  <FakeCard
+                    key={item.assetId}
+                    // eslint-disable-next-line react/jsx-props-no-spreading
+                    {...item}
+                    currentApp={currentApp}
+                    onClick={() => onOpen(item.assetId)}
+                    onKeyDown={() => handleKeyDown(item.assetId)}
+                  />
+                );
+              })}
+            </ul>
+            <div className="d-grid">
+              <Button
+                type="button"
+                color="secondary"
+                variant="filled"
+                // eslint-disable-next-line react/jsx-no-bind
+                onClick={handleViewMore}
+              >
+                Voir plus
+              </Button>
+            </div>
+          </Grid.Col>
+          {/* <Grid.Col sm="3" className="g-start-7">
+            <div className="d-grid">
+              <Button
+                type="button"
+                color="secondary"
+                variant="filled"
+                // eslint-disable-next-line react/jsx-no-bind
+                onClick={handleViewMore}
+              >
+                Voir plus
+              </Button>
+            </div>
+          </Grid.Col> */}
+        </Grid>
+      </main>
+    </div>
+  );
+}
+
+export default App;

package/src/assets/images/react.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

package/src/assets/images/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/src/components/AppHeader.tsx

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+
+interface AppHeaderProps {
+  children: ReactNode;
+}
+export default function AppHeader({ children }: AppHeaderProps) {
+  return (
+    <div className="d-flex justify-content-between p-16 mx-n16 border-bottom">
+      {children}
+    </div>
+  );
+}

package/src/components/FakeCard.tsx

@@ -0,0 +1,47 @@
+import { AppCard } from "@ode-react-ui/core";
+import { Users } from "@ode-react-ui/icons";
+import { OneProfile } from "@ode-react-ui/icons/nav";
+
+function FakeCard({
+  currentApp,
+  name,
+  updatedAt,
+  creatorName,
+  onClick,
+  onKeyDown,
+}: any) {
+  return (
+    <div
+      className="card g-col-4 shadow border-0"
+      role="button"
+      tabIndex={0}
+      onClick={onClick}
+      onKeyDown={onKeyDown}
+    >
+      <div className="card-body p-16 d-flex align-items-center gap-12">
+        <AppCard app={currentApp} variant="square">
+          <AppCard.Icon size="48" />
+        </AppCard>
+        <div>
+          <h3 className="card-title body">
+            <strong>{name}</strong>
+          </h3>
+          <span className="card-text small">
+            <em>{updatedAt}</em>
+          </span>
+        </div>
+      </div>
+      <div className="card-footer py-8 px-16 bg-light rounded-2 m-2 border-0 d-flex align-items-center justify-content-between">
+        <div className="d-inline-flex align-items-center gap-8">
+          <OneProfile />
+          <p className="small">{creatorName}</p>
+        </div>
+        <p className="d-inline-flex align-items-center gap-4 caption">
+          <Users width={16} height={16} /> <strong>23</strong>
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export default FakeCard;

package/src/contexts/ExplorerContext.tsx

@@ -0,0 +1,100 @@
+import {
+  useMemo,
+  createContext,
+  useContext,
+  ReactNode,
+  useEffect,
+} from "react";
+
+import {
+  ACTION,
+  IExplorerContext,
+  IExplorerFramework,
+  ResourceType,
+} from "ode-ts-client";
+
+import { useOdeContext } from "./OdeContext";
+
+interface ExplorerContextProps {
+  explorer: IExplorerFramework;
+  context: IExplorerContext;
+  onOpen: (assetId: string) => void;
+  onCreate: () => void;
+}
+
+interface ExplorerProviderProps {
+  children: ReactNode;
+  types: ResourceType[];
+}
+
+const ExplorerContext = createContext<ExplorerContextProps | null>(null!);
+
+export default function ExplorerContextProvider({
+  children,
+  types,
+}: ExplorerProviderProps) {
+  const { params, explorer } = useOdeContext();
+
+  const context = explorer.createContext(types, params.app);
+
+  function onOpen(assetId: string) {
+    return explorer
+      .getBus()
+      .publish(types[0], ACTION.OPEN, { resourceId: assetId });
+  }
+
+  function onCreate() {
+    return explorer.getBus().publish(types[0], ACTION.CREATE, "test proto");
+  }
+
+  const values = useMemo(
+    () => ({
+      explorer,
+      context,
+      onOpen,
+      onCreate,
+    }),
+    [],
+  );
+
+  // Observe streamed search results
+  useEffect(() => {
+    const subscription = context.latestResources().subscribe({
+      next: (resultset) => {
+        // Prepare searching next page
+        const { pagination } = context.getSearchParameters();
+        pagination.maxIdx = resultset.output.pagination.maxIdx;
+        pagination.startIdx =
+          resultset.output.pagination.startIdx +
+          resultset.output.pagination.pageSize;
+        if (
+          typeof pagination.maxIdx !== "undefined" &&
+          pagination.startIdx > pagination.maxIdx
+        ) {
+          pagination.startIdx = pagination.maxIdx;
+        }
+      },
+    });
+
+    return () => {
+      if (subscription) {
+        subscription.unsubscribe();
+      }
+    };
+  }, []); // execute effect only once
+
+  return (
+    <ExplorerContext.Provider value={values}>
+      {children}
+    </ExplorerContext.Provider>
+  );
+}
+
+export const useExplorerContext = () => {
+  const context = useContext(ExplorerContext);
+
+  if (!context) {
+    throw new Error(`Cannot be used outside of ExplorerContextProvider`);
+  }
+  return context;
+};

package/src/contexts/OdeContext.tsx

@@ -0,0 +1,115 @@
+import {
+  useMemo,
+  createContext,
+  useContext,
+  useEffect,
+  ReactNode,
+  useState,
+} from "react";
+
+import useOdeBackend from "@hooks/useOdeBackend";
+import {
+  App,
+  IConfigurationFramework,
+  IExplorerFramework,
+  IHttp,
+  IIdiom,
+  INotifyFramework,
+  ISession,
+  IWebApp,
+} from "ode-ts-client";
+
+interface OdeContextProps {
+  session: ISession | null;
+  configure: IConfigurationFramework;
+  notif: INotifyFramework;
+  explorer: IExplorerFramework;
+  http: IHttp;
+  idiom: IIdiom;
+  params: OdeProviderParams;
+  currentApp: IWebApp;
+  login: () => void;
+  logout: () => void;
+}
+const OdeContext = createContext<OdeContextProps | null>(null!);
+
+export type OdeProviderParams = {
+  app: App;
+  alternativeApp?: boolean;
+  version?: string | null;
+  cdnDomain?: string | null;
+};
+
+interface OdeProviderProps {
+  children: ReactNode;
+  params: OdeProviderParams;
+}
+
+type Apps = {
+  [key: string]: any;
+};
+
+export default function OdeProvider({ children, params }: OdeProviderProps) {
+  const { session, configure, notif, explorer, http, login, logout } =
+    useOdeBackend(params.version || null, params.cdnDomain || null);
+
+  const [idiom, setIdiom] = useState<IIdiom>(configure.Platform.idiom);
+
+  const [currentApp, setCurrentApp] = useState<IWebApp>(null!);
+
+  function getCurrentApp(list: [], param: App) {
+    const { apps }: Apps = list;
+    const filteredList = apps.filter((item: any) => {
+      const prefix = item.prefix.replace("/", "");
+      return prefix === param;
+    });
+    const [app] = filteredList;
+    return app;
+  }
+
+  useEffect(() => {
+    console.log("OdeContext INIT ONLY ONCE, PLEASE !");
+    const initOnce = async () => {
+      try {
+        console.log(`init ${params.app}`);
+        await configure.Platform.apps.initialize(
+          params.app,
+          params.alternativeApp,
+        );
+        const appsList = await configure.Platform.apps.getAppsList();
+        setCurrentApp(getCurrentApp(appsList, params.app));
+        setIdiom(configure.Platform.idiom); // ...same object, but triggers React.
+      } catch (e) {
+        console.log(e);
+      }
+    };
+    initOnce();
+  }, []);
+
+  const values = useMemo(
+    () => ({
+      configure,
+      currentApp,
+      explorer,
+      http,
+      idiom,
+      login,
+      logout,
+      notif,
+      params,
+      session,
+    }),
+    [session, idiom, currentApp],
+  );
+
+  return <OdeContext.Provider value={values}>{children}</OdeContext.Provider>;
+}
+
+export const useOdeContext = () => {
+  const context = useContext(OdeContext);
+
+  if (!context) {
+    throw new Error(`Cannot be used outside of OdeProvider`);
+  }
+  return context;
+};

package/src/hooks/adapters/explorer/ResourceCardWrapper.tsx

@@ -0,0 +1,27 @@
+import { IResource } from "ode-ts-client";
+
+import { Card } from "./types";
+
+export default class ResourceCardWrapper implements Card {
+  constructor(private res: IResource) {}
+
+  get id() {
+    return this.res.id;
+  }
+
+  get name() {
+    return this.res.name;
+  }
+
+  get thumbnail() {
+    return this.res.thumbnail;
+  }
+
+  get authorId() {
+    return this.res.authorId;
+  }
+
+  get authorName() {
+    return this.res.creatorName;
+  }
+}

package/src/hooks/adapters/explorer/TreeNodeFolderWrapper.tsx

@@ -0,0 +1,24 @@
+import { IFolder } from "ode-ts-client";
+
+import { TreeNode } from "./types";
+
+/** Utility inner class that wraps an IFolder into a TreeNode. */
+export default class TreeNodeFolderWrapper implements TreeNode {
+  constructor(private folder: IFolder) {}
+
+  public section = false;
+
+  public readonly children: Array<TreeNode> = [];
+
+  get id() {
+    return this.folder.id;
+  }
+
+  get name() {
+    return this.folder.name;
+  }
+
+  get childNumber() {
+    return this.folder.childNumber;
+  }
+}

package/src/hooks/adapters/explorer/types.tsx

@@ -0,0 +1,13 @@
+/* TODO exporter TreeNode depuis ode-react-ui/advanced */
+export interface TreeNode {
+  id: string;
+  name: string;
+  section?: boolean;
+  children?: TreeNode[];
+}
+
+export interface Card {
+  id: string;
+  name: string;
+  thumbnail: string;
+}

package/src/hooks/adapters/explorer/useExplorerAdapter.tsx

@@ -0,0 +1,63 @@
+import { useEffect, useState } from "react";
+
+import { useExplorerContext } from "@contexts/ExplorerContext";
+import { IFolder, IResource } from "ode-ts-client";
+
+// import ResourceCardWrapper from "./ResourceCardWrapper";
+import TreeNodeFolderWrapper from "./TreeNodeFolderWrapper";
+import { TreeNode } from "./types";
+
+/**
+ * This hook acts as a data-model adapter.
+ * It allows a TreeView component to explore and display folders streamed from an IExplorerContext.
+ */
+export default function useExplorerAdapter() {
+  const { context } = useExplorerContext();
+
+  const [treeData, setTreeData] = useState<TreeNode>({
+    id: "root",
+    name: "Blogs",
+    section: true,
+    children: [],
+  });
+
+  const [listData, setListData] = useState<IResource[]>([]);
+
+  // TODO  const selectedNode = treeData;
+
+  function wrapTreeData(folders?: IFolder[]) {
+    if (treeData && treeData.children && folders && folders.length) {
+      treeData.children.push(
+        ...folders.map((f) => new TreeNodeFolderWrapper(f)),
+      );
+      setTreeData(treeData); // ça ressemble à un hack :)
+    }
+  }
+
+  function wrapResourceData(resources?: IResource[]) {
+    if (resources && resources.length) {
+      setListData((d) => d.concat(resources));
+    }
+  }
+
+  // Observe streamed search results
+  useEffect(() => {
+    const subscription = context.latestResources().subscribe({
+      next: (resultset) => {
+        wrapTreeData(resultset?.output?.folders);
+        wrapResourceData(resultset?.output?.resources);
+      },
+    });
+
+    return () => {
+      if (subscription) {
+        subscription.unsubscribe();
+      }
+    };
+  }, []); // execute effect only once
+
+  return {
+    treeData,
+    listData,
+  };
+}

package/src/hooks/useI18n.tsx

@@ -0,0 +1,9 @@
+import { useOdeContext } from "@contexts/OdeContext";
+
+/** Custom Hook for ode-ts-client integration */
+export default function useI18n() {
+  const { idiom } = useOdeContext();
+  return {
+    i18n: idiom.translate,
+  };
+}

package/src/hooks/useOdeBackend.tsx

@@ -0,0 +1,64 @@
+import { useEffect, useState } from "react";
+
+import {
+  ConfigurationFrameworkFactory,
+  ExplorerFrameworkFactory,
+  ISession,
+  NotifyFrameworkFactory,
+  SessionFrameworkFactory,
+  TransportFrameworkFactory,
+} from "ode-ts-client";
+
+/** Custom Hook for ode-ts-client integration */
+export default function useOdeBackend(
+  version: string | null,
+  cdnDomain: string | null,
+) {
+  const sessionFramework = SessionFrameworkFactory.instance();
+  const configure = ConfigurationFrameworkFactory.instance();
+  const explorer = ExplorerFrameworkFactory.instance();
+  const notif = NotifyFrameworkFactory.instance();
+  const { http } = TransportFrameworkFactory.instance();
+
+  const [session, setSession] = useState<ISession | null>(null);
+
+  // Exécuté au premier render du Composant
+  useEffect(() => {
+    console.log("useOdeBackend INIT ONLY ONCE, PLEASE !");
+    const initOnce = async () => {
+      try {
+        await sessionFramework.initialize();
+        await configure.initialize(version, cdnDomain);
+        setSession(sessionFramework.session); // ...same object, but triggers React.
+      } catch (e) {
+        console.log(e); // An unrecovable error occured
+      }
+    };
+    initOnce();
+  }, []);
+
+  /** The custom-hook-ized login process */
+  function login(/* email: string, password: string */) {
+    // sessionFramework.login(email, password).then(() => {
+    //   setSession(sessionFramework.session); // ...same session object, but triggers React rendering.
+    // });
+  }
+
+  /** The custom-hook-ized logout process */
+  function logout() {
+    // sessionFramework.logout().then(() => {
+    //   setSession(sessionFramework.session); // ...same session object, but triggers React rendering.
+    // });
+  }
+
+  // Return instances, to be initialized later.
+  return {
+    login,
+    logout,
+    session,
+    configure,
+    explorer,
+    notif,
+    http,
+  };
+}