♻️ front: Implemented user display logic in grouped rows user molecule (#50)

tdrive/frontend/src/app/molecules/grouped-rows/user/index.stories.tsx

@@ -1,54 +1,54 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import React from 'react';
 import { ComponentStory } from '@storybook/react';
 
 import UserBlock from '.';
-import Avatar from '@atoms/avatar';
 import { CheckIcon } from '@atoms/icons-agnostic';
+import type { UserType } from '@features/users/types/user';
 
 export default {
   title: '@molecules/grouped-rows',
 };
 
+const mockUser = (first_name: string, last_name: string, email: string, thumbnail?: string) : UserType =>
+  ({
+    username: 'anonymous if this is empty',
+    first_name, last_name, email, thumbnail,
+  } as UserType);
+
 const Template: ComponentStory<any> = (props: {
-  title: string;
-  subtitle: string;
+  first_name: string;
+  last_name: string;
+  email: string;
+  thumbnail?: string;
+  className: string;
   checked: boolean;
 }) => {
   return (
     <div className="flex">
-      <div className="w-96 border border-gray-300 rounded-sm px-2 m-2">
+      <div className="w-96 border border-gray-300 dark:border-zinc-600 rounded-sm m-2">
         <UserBlock
-          avatar={
-            <Avatar avatar="https://images.freeimages.com/images/small-previews/d67/experimenting-with-nature-1547377.jpg" />
-          }
-          title="Romaric Mourgues"
-          subtitle="r.mourgues@linagora.com"
+          className="p-2"
+          user={mockUser("Romaric", "Mourgues", "r.mourgues@linagora.com", "https://images.freeimages.com/images/small-previews/d67/experimenting-with-nature-1547377.jpg")}
           suffix={
             <div className="text-blue-500">
               <CheckIcon fill="currentColor" />
             </div>
           }
-          className="py-2 border-b border-gray-300"
         />
         <UserBlock
-          avatar={<Avatar title="Diana Potokina" />}
-          title="Diana Potokina"
-          subtitle="r.potokina@linagora.com"
-          className="py-2 border-b border-gray-300"
-        />
-        <UserBlock
-          avatar={<Avatar title={props.title} />}
-          title={props.title}
-          subtitle={props.subtitle}
+          className={props.className}
+          user={mockUser(props.first_name, props.last_name, props.email, props.thumbnail)}
           suffix={
             (props.checked && (
               <div className="text-blue-500">
                 <CheckIcon fill="currentColor" />
               </div>
-            )) || <></>
+            ))
           }
-          className="py-2"
+        />
+        <UserBlock
+          className="p-2 border-t border-gray-300 dark:border-zinc-600"
+          user={mockUser("Diana", "Potokina", "r.potokina@linagora.com")}
         />
       </div>
     </div>
@@ -57,7 +57,10 @@ const Template: ComponentStory<any> = (props: {
 
 export const User = Template.bind({});
 User.args = {
-  title: 'Another user',
-  subtitle: 'Just a test user',
+  first_name: 'fred ✏️',
+  last_name: 'ictitiuS editable',
+  email: "sampleemail@example.com",
+  className: "p-2 border-t border-gray-300 dark:border-zinc-600",
+  thumbnail: "",
   checked: false,
 };

tdrive/frontend/src/app/molecules/grouped-rows/user/index.tsx

@@ -1,16 +1,43 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import React from 'react';
+import { Base, Info } from '@atoms/text';
+import Avatar from '@atoms/avatar';
 import BaseBlock from '@molecules/grouped-rows/base';
+import Languages from '@features/global/services/languages-service';
+import type { UserType } from '@features/users/types/user';
+import { getFullName } from '@features/users/utils/get-full-name';
 
-// @ts-ignore
-interface UserBlockProps extends React.InputHTMLAttributes<HTMLInputElement> {
-  avatar: JSX.Element;
-  title: JSX.Element | string;
-  subtitle: JSX.Element | string;
-  suffix?: JSX.Element | string;
+interface UserBlockProps {
   className?: string;
+  suffix?: JSX.Element | string | false;
+  title_suffix?: JSX.Element | string | false;
+  subtitle_suffix?: JSX.Element | string | false;
+  user?: UserType;
+  isSelf?: boolean;
 }
 
 export default function UserBlock(props: UserBlockProps) {
-  return BaseBlock(props);
+  return <BaseBlock
+    className={props.className}
+    suffix={props.suffix}
+    title_suffix={props.title_suffix}
+    subtitle_suffix={props.subtitle_suffix}
+
+    avatar={
+      <Avatar
+        avatar={props.user?.thumbnail || ''}
+        title={props.user ? getFullName(props.user) : '-'}
+        size="sm"
+        />
+    }
+    title={
+      <>
+        <Base>{!!props.user && getFullName(props.user)}</Base>
+        {props.isSelf && <Info>{' ' + Languages.t('components.internal-access_specific_rules_you')}</Info>}
+      </>
+    }
+    subtitle={
+      <div className='text-sm text-slate-500'>{props.user?.email || ""}</div>
+    }
+    />
 }