Context React

https://github.com/edificeio/blog/blob/develop-b2school/frontend/src/routes/post/index.tsx

Est-ce que le PostProvider est vraiment nécessaire ?

Vu les composant dans la vue, passer les infos en props drilling (parent vers enfants) et gérer les canPublish, .. soit dans un custom hook soit directement dans le composant paraissait suffisant

A nettoyer / refacto

https://github.com/edificeio/blog/blob/develop-b2school/frontend/src/features/BlogHeader/BlogHeader.tsx

app props

On a accès à currentApp avec useOdeClient

Plutôt utiliser ça que passer l'objet en dur

const { currentApp } = useOdeClient();

<Breadcrumb
        app={currentApp}
        name={blog?.title}
      />

A nettoyer / Refacto :

https://github.com/edificeio/blog/blob/develop-b2school/frontend/src/components/BlogPostCard/BlogPostCard.tsx

Avatar

Le hook useUser permet déjà de récupérer l'image de l'utilisateur (voir explorer)

const getAvatarURL = (post: Post): string => {
    return directoryService.getAvatarUrl(post.author.userId, "user");
  };

Regroupement (clean code)

les useState ensemble, les useEffects ensemble, les objet destructurés ensemble, les variables ensemble, ...

// exemple
const { fromNow } = useDate();
const { t } = useTranslation();
const { contrib, manager, creator } = useActionDefinitions([]);

const directoryService = odeServices.directory();
const sidebarHighlightedPost = useSidebarHighlightedPost();
const editorRef = useRef<EditorRef>(null);
const navigate = useNavigate();

useEffect

Extraire ça dans un ou plusieurs custom hook si pas liés .

useState

Si des useState sont "communs", les fusionner ensemble via un objet ou alors passer par useReducer

const [summaryContent, setSummaryContent] = useState<string>("");
const [summaryContentPlain, setSummaryContentPlain] = useState<string>("");

Voir niveau fonctionnel, si on a pas des empty screen à afficher ou affichage de toaster ou redirection dans le cas où un blog ou post ne sont pas dispos plutôt que

if (!blogId || !post) {
    return <></>;
  }

A nettoyer / refacto

https://github.com/edificeio/blog/blob/develop-b2school/frontend/src/features/Post/PostViewHeader.tsx

currentApp

Idem que pour le composant précédent, on a accès à currentApp avec useOdeClient. Ne pas passer en dur l'objet dans le breadcrumb

const  { currentApp } = useOdeClient();

<Breadcrumb
        app={currentApp}
        name={post.title}
      />

A nettoyer / refacto

https://github.com/edificeio/blog/blob/develop-b2school/frontend/src/features/Post/PostViewContent.tsx

C'est pas encore fini je pense ce composant :) mais quand ce sera le cas

• Extraire la logique qui va ensemble dans un custom hook
• Regrouper les states ensemble, les destructurations ensemble, ..

// Exemple
  const { t } = useTranslation();
  const { blogId, post, mustSubmit, readOnly, canPublish } = usePostContext();

  const editorRef = useRef<EditorRef>(null);
  const titleRef = useRef(null);

  const [title, setTitle] = useState(post?.title ?? "");
  const [content, setContent] = useState(post?.content ?? "");
  const [mode, setMode] = useState<"read" | "edit">("read");
  const [variant, setVariant] = useState<"ghost" | "outline">("ghost");

• Si plusieurs useState "liés", les combinés dans un state d'objet ou passer par useReducer

i18n

Ajouter les clés, et ne pas oublier le namspace {ns: appCode}