fix: User list css (#52)

src/components/common/loader.tsx

@@ -1,6 +1,6 @@
 const Loader = ({ size = "md" }: { size?: "sm" | "md" | "lg" }) => (
-  <div className="flex flex-1 justify-center items-center">
-    <div className={`loader ${size}`}></div>
+  <div className={`loader ${size}`}>
+    <div></div>
   </div>
 )
 

src/components/github-users.tsx

@@ -2,17 +2,13 @@ import { useState } from "react"
 
 import Users from "@/components/users/index"
 import useGithubUsers from "@/services/github"
-// import Loader from "@/components/common/loader"
 import UserList from "@/components/users/user-list"
 import UserProfile from "@/components/users/user-profile"
 
 const GithubUsers = () => {
   const users = useGithubUsers()
   const [selectedUser, setSelectedUser] = useState<GithubUser>()
 
-  // if (!users) return <Loader />
-  // if (!users.length) return <div>Aucun utilisateur pour le moment...</div>
-
   return (
     <Users users={users}>
       <>

src/components/matomo-users.tsx

@@ -1,88 +1,34 @@
 import { useState } from "react"
 
+import Users from "@/components/users/index"
 import useMatomoUsers from "@/services/matomo"
-import Loader from "@/components/common/loader"
 import UserList from "@/components/users/user-list"
 import UserProfile from "@/components/users/user-profile"
 
 const MatomoUsers = () => {
   const users = useMatomoUsers()
   const [selectedUser, setSelectedUser] = useState<MatomoUser>()
 
-  if (!users) return <Loader />
-  if (!users.length) return <div>Aucun utilisateur pour le moment...</div>
-
   return (
-    <div className="github-users">
-      <UserList
-        users={users}
-        selectedUser={selectedUser}
-        getUserData={(user) => user as User}
-        onSelect={(user) => setSelectedUser(user as MatomoUser)}
-      />
-      {selectedUser && (
-        <UserProfile>
-          <div>Login: {selectedUser.login}</div>
-          <div>Email: {selectedUser.email}</div>
-          <div>Date de création: {selectedUser.date_registered}</div>
-          <div>2FA acitvé: {selectedUser.uses_2fa ? "oui" : "non"}</div>
-        </UserProfile>
-      )}
-    </div>
+    <Users users={users}>
+      <>
+        <UserList
+          users={users}
+          selectedUser={selectedUser}
+          getUserData={(user) => user as User}
+          onSelect={(user) => setSelectedUser(user as MatomoUser)}
+        />
+        {selectedUser && (
+          <UserProfile>
+            <div>Login: {selectedUser.login}</div>
+            <div>Email: {selectedUser.email}</div>
+            <div>Date de création: {selectedUser.date_registered}</div>
+            <div>2FA acitvé: {selectedUser.uses_2fa ? "oui" : "non"}</div>
+          </UserProfile>
+        )}
+      </>
+    </Users>
   )
 }
 
 export default MatomoUsers
-
-// import Image from "next/image"
-// import { useState } from "react"
-
-// const Users = ({ users = [] }: { users: MatomoUser[] }) => {
-//   const [selectedUser, setSelectedUser] = useState<MatomoUser>()
-
-//   return (
-//     <div className="github-users">
-//       <ul className="user-list">
-//         {users.map((user, i) => (
-//           <li
-//             key={i}
-//             className={`tile${
-//               selectedUser && selectedUser.login === user.login
-//                 ? " selected"
-//                 : ""
-//             }`}
-//             onClick={() => setSelectedUser(user)}
-//           >
-//             <div className="user">
-//               <Image
-//                 width={48}
-//                 height={48}
-//                 alt="user avatar"
-//                 src="/images/avatar.jpeg"
-//               />
-//               <div className="info">
-//                 <h3>{user.login}</h3>
-//                 <div className="email">{user.email}</div>
-//               </div>
-//             </div>
-//           </li>
-//         ))}
-//       </ul>
-//       {selectedUser && (
-//         <div className="selected-user">
-//           <div className="sticky-container">
-//             <div className="user-profile">
-//               <div>Login: {selectedUser.login}</div>
-//               <div>Email: {selectedUser.email}</div>
-//               <div>Date de création: {selectedUser.date_registered}</div>
-//               <div>2FA acitvé: {selectedUser.uses_2fa ? "oui" : "non"}</div>
-//               <div>Super User: {selectedUser.superuser_access}</div>
-//             </div>
-//           </div>
-//         </div>
-//       )}
-//     </div>
-//   )
-// }
-
-// export default Users

src/components/mattermost-users.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react"
 
-import Loader from "@/components/common/loader"
+import Users from "@/components/users/index"
 import UserList from "@/components/users/user-list"
 import useMattermostUsers from "@/services/mattermost"
 import UserProfile from "@/components/users/user-profile"
@@ -9,39 +9,38 @@ const MattermostUsers = () => {
   const users = useMattermostUsers()
   const [selectedUser, setSelectedUser] = useState<MattermostUser>()
 
-  if (!users) return <Loader />
-  if (!users.length) return <div>Aucun utilisateur pour le moment...</div>
-
   return (
-    <div className="github-users">
-      <UserList
-        users={users}
-        selectedUser={selectedUser}
-        getUserData={(user) => {
-          const { username, first_name, last_name, email } =
-            user as MattermostUser
-          return {
-            email,
-            login: username,
-            name: first_name && `${first_name} ${last_name}`,
-          }
-        }}
-        onSelect={(user) => setSelectedUser(user as MattermostUser)}
-      />
-      {selectedUser && (
-        <UserProfile>
-          <div>
-            Nom:{" "}
-            {selectedUser.first_name
-              ? `${selectedUser.first_name} ${selectedUser.last_name}`
-              : selectedUser.username}
-          </div>
-          <div>Email: {selectedUser.email}</div>
-          <div>ID: {selectedUser.id}</div>
-          <div>Date de création: {selectedUser.create_at}</div>
-        </UserProfile>
-      )}
-    </div>
+    <Users users={users}>
+      <>
+        <UserList
+          users={users}
+          selectedUser={selectedUser}
+          getUserData={(user) => {
+            const { username, first_name, last_name, email } =
+              user as MattermostUser
+            return {
+              email,
+              login: username,
+              name: first_name && `${first_name} ${last_name}`,
+            }
+          }}
+          onSelect={(user) => setSelectedUser(user as MattermostUser)}
+        />
+        {selectedUser && (
+          <UserProfile>
+            <div>
+              Nom:{" "}
+              {selectedUser.first_name
+                ? `${selectedUser.first_name} ${selectedUser.last_name}`
+                : selectedUser.username}
+            </div>
+            <div>Email: {selectedUser.email}</div>
+            <div>ID: {selectedUser.id}</div>
+            <div>Date de création: {selectedUser.create_at}</div>
+          </UserProfile>
+        )}
+      </>
+    </Users>
   )
 }
 

src/components/nextcloud-users.tsx

@@ -1,37 +1,36 @@
 import { useState } from "react"
 
-import useNextCloudUsers from "@/services/nextcloud"
-import Loader from "@/components/common/loader"
+import Users from "@/components/users/index"
 import UserList from "@/components/users/user-list"
+import useNextCloudUsers from "@/services/nextcloud"
 import UserProfile from "@/components/users/user-profile"
 
 const NextCloudUsers = () => {
   const users = useNextCloudUsers()
   const [selectedUser, setSelectedUser] = useState<NextCloudUser>()
 
-  if (!users) return <Loader />
-  if (!users.length) return <div>Aucun utilisateur pour le moment...</div>
-
   return (
-    <div className="github-users">
-      <UserList
-        users={users}
-        selectedUser={selectedUser}
-        getUserData={(user) => {
-          const { displayname: name, email } = user as NextCloudUser
-          return { email, name }
-        }}
-        onSelect={(user) => setSelectedUser(user as NextCloudUser)}
-      />
-      {selectedUser && (
-        <UserProfile>
-          <div>Nom: {selectedUser.displayname}</div>
-          <div>Email: {selectedUser.email}</div>
-          <div>ID: {selectedUser.id}</div>
-          <div>Dernière connexion: {selectedUser.lastLogin}</div>
-        </UserProfile>
-      )}
-    </div>
+    <Users users={users}>
+      <>
+        <UserList
+          users={users}
+          selectedUser={selectedUser}
+          getUserData={(user) => {
+            const { displayname: name, email } = user as NextCloudUser
+            return { email, name }
+          }}
+          onSelect={(user) => setSelectedUser(user as NextCloudUser)}
+        />
+        {selectedUser && (
+          <UserProfile>
+            <div>Nom: {selectedUser.displayname}</div>
+            <div>Email: {selectedUser.email}</div>
+            <div>ID: {selectedUser.id}</div>
+            <div>Dernière connexion: {selectedUser.lastLogin}</div>
+          </UserProfile>
+        )}
+      </>
+    </Users>
   )
 }
 

src/components/ovh-users.tsx

@@ -1,49 +1,48 @@
 import { useState } from "react"
 
 import useOVHUsers from "@/services/ovh"
-import Loader from "@/components/common/loader"
+import Users from "@/components/users/index"
 import UserList from "@/components/users/user-list"
 import UserProfile from "@/components/users/user-profile"
 
 const OVHUsers = () => {
   const users = useOVHUsers()
   const [selectedUser, setSelectedUser] = useState<OVHUser>()
 
-  if (!users) return <Loader />
-  if (!users.length) return <div>Aucun utilisateur pour le moment...</div>
-
   return (
-    <div className="github-users">
-      <UserList
-        users={users}
-        selectedUser={selectedUser}
-        getUserData={(user) => {
-          const { login, firstName, lastName, primaryEmailAddress } =
-            user as OVHUser
-          return {
-            login,
-            name: firstName && `${firstName} ${lastName}`,
-            email: primaryEmailAddress,
-          }
-        }}
-        onSelect={(user) => setSelectedUser(user as OVHUser)}
-      />
-      {selectedUser && (
-        <UserProfile>
-          <div>
-            {" "}
-            Nom:{" "}
-            {selectedUser.firstName
-              ? `${selectedUser.firstName} ${selectedUser.lastName}`
-              : selectedUser.displayName}{" "}
-          </div>
-          <div>Login: {selectedUser.login}</div>
-          <div>Email: {selectedUser.primaryEmailAddress}</div>
-          <div>ID: {selectedUser.id}</div>
-          <div>Date de création: {selectedUser.creationDate}</div>
-        </UserProfile>
-      )}
-    </div>
+    <Users users={users}>
+      <>
+        <UserList
+          users={users}
+          selectedUser={selectedUser}
+          getUserData={(user) => {
+            const { login, firstName, lastName, primaryEmailAddress } =
+              user as OVHUser
+            return {
+              login,
+              name: firstName && `${firstName} ${lastName}`,
+              email: primaryEmailAddress,
+            }
+          }}
+          onSelect={(user) => setSelectedUser(user as OVHUser)}
+        />
+        {selectedUser && (
+          <UserProfile>
+            <div>
+              {" "}
+              Nom:{" "}
+              {selectedUser.firstName
+                ? `${selectedUser.firstName} ${selectedUser.lastName}`
+                : selectedUser.displayName}{" "}
+            </div>
+            <div>Login: {selectedUser.login}</div>
+            <div>Email: {selectedUser.primaryEmailAddress}</div>
+            <div>ID: {selectedUser.id}</div>
+            <div>Date de création: {selectedUser.creationDate}</div>
+          </UserProfile>
+        )}
+      </>
+    </Users>
   )
 }