dynamic sidebar

nerdgeschoss · Nov 23, 2024 · c5c1215 · c5c1215
1 parent 3951425
commit c5c1215
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 9 deletions.
diff --git a/app/javascript/components/sidebar/sidebar.tsx b/app/javascript/components/sidebar/sidebar.tsx
@@ -1,7 +1,15 @@
 import React from 'react';
 import logo from '../../../frontend/images/logo.svg';
 
-export function Sidebar(): JSX.Element {
+interface Props {
+  user: {
+    id: string;
+    displayName: string;
+    avatarUrl: string;
+  };
+}
+
+export function Sidebar({ user }: Props): JSX.Element {
   return (
     <nav className="sidebar">
       <a className="sidebar__header" href="/">
@@ -22,9 +30,9 @@ export function Sidebar(): JSX.Element {
         </a>
       </div>
       <div className="sidebar__footer">
-        <a className="sidebar__avatar" href="/user">
-          <div className="sidebar__avatar-name">User</div>
-          <img src="" alt="avatar" />
+        <a className="sidebar__avatar" href={`/users/${user.id}`}>
+          <div className="sidebar__avatar-name">{user.displayName}</div>
+          <img src={user.avatarUrl} alt="avatar" />
         </a>
       </div>
     </nav>

diff --git a/app/views/pages/home.props.rb b/app/views/pages/home.props.rb
@@ -1,7 +1,7 @@
 field :current_user, global: :current_user do
   field :id
-  field :email
   field :display_name
+  field :avatar_url, value: -> { avatar_image(size: 200) }
 end
 
 field :upcoming_leaves, array: true, value: -> { @upcoming_leaves } do

diff --git a/app/views/pages/home.tsx b/app/views/pages/home.tsx
@@ -7,7 +7,7 @@ export default function Home({
 }: PageProps<'pages/home'>): JSX.Element {
   return (
     <>
-      <Sidebar />
+      <Sidebar user={currentUser} />
       <div className="content">
         <div className="container">
           <div className="stack">

diff --git a/app/views/users/index.props.rb b/app/views/users/index.props.rb
@@ -1,3 +1,9 @@
+field :current_user, global: :current_user do
+  field :id
+  field :display_name
+  field :avatar_url, value: -> { avatar_image(size: 200) }
+end
+
 field :filter, value: -> { @filter }
 field :users, array: true, value: -> { @users } do
   field :id

diff --git a/app/views/users/index.tsx b/app/views/users/index.tsx
@@ -3,11 +3,11 @@ import { Sidebar } from '../../javascript/components/sidebar/sidebar';
 import { PageProps } from '../../../data.d';
 
 export default function ({
-  data: { filter, users },
+  data: { filter, users, currentUser },
 }: PageProps<'users/index'>): JSX.Element {
   return (
     <>
-      <Sidebar />
+      <Sidebar user={currentUser} />
       <div className="content">
         <div className="container">
           <div className="stack">

diff --git a/data.d.ts b/data.d.ts
@@ -2,8 +2,8 @@ export interface DataSchema {
   'pages/home': {
     currentUser: {
       id: string;
-      email: string;
       displayName: string;
+      avatarUrl: string;
     };
     upcomingLeaves: Array<{
       id: string;
@@ -15,6 +15,11 @@ export interface DataSchema {
     remainingHolidays: string;
   };
   'users/index': {
+    currentUser: {
+      id: string;
+      displayName: string;
+      avatarUrl: string;
+    };
     filter: string;
     users: Array<{
       id: string;