Defining and using Auth type

ozziexsh · Feb 16, 2023 · cbb67bc · cbb67bc
1 parent c83ef0b
commit cbb67bc
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 27 deletions.
diff --git a/src/stubs/resources/js/Layouts/AppLayout.tsx b/src/stubs/resources/js/Layouts/AppLayout.tsx
@@ -88,7 +88,7 @@ export default function AppLayout({
                             type="button"
                             className="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:bg-gray-50 hover:text-gray-700 focus:outline-none focus:bg-gray-50 active:bg-gray-50 transition"
                           >
-                            {page.props.user.current_team?.name}
+                            {page.props.auth.user.current_team?.name}
 
                             <svg
                               className="ml-2 -mr-0.5 h-4 w-4"
@@ -117,7 +117,7 @@ export default function AppLayout({
                             {/* <!-- Team Settings --> */}
                             <DropdownLink
                               href={route('teams.show', [
-                                page.props.user.current_team!,
+                                page.props.auth.user.current_team!,
                               ])}
                             >
                               Team Settings
@@ -136,15 +136,15 @@ export default function AppLayout({
                               Switch Teams
                             </div>
 
-                            {page.props.user.all_teams?.map(team => (
+                            {page.props.auth.user.all_teams?.map(team => (
                               <form
                                 onSubmit={e => switchToTeam(e, team)}
                                 key={team.id}
                               >
                                 <DropdownLink as="button">
                                   <div className="flex items-center">
                                     {team.id ==
-                                      page.props.user.current_team_id && (
+                                      page.props.auth.user.current_team_id && (
                                       <svg
                                         className="mr-2 h-5 w-5 text-green-400"
                                         fill="none"
@@ -179,8 +179,8 @@ export default function AppLayout({
                         <button className="flex text-sm border-2 border-transparent rounded-full focus:outline-none focus:border-gray-300 transition">
                           <img
                             className="h-8 w-8 rounded-full object-cover"
-                            src={page.props.user.profile_photo_url}
-                            alt={page.props.user.name}
+                            src={page.props.auth.user.profile_photo_url}
+                            alt={page.props.auth.user.name}
                           />
                         </button>
                       ) : (
@@ -189,7 +189,7 @@ export default function AppLayout({
                             type="button"
                             className="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:text-gray-700 focus:outline-none transition"
                           >
-                            {page.props.user.name}
+                            {page.props.auth.user.name}
 
                             <svg
                               className="ml-2 -mr-0.5 h-4 w-4"
@@ -296,18 +296,18 @@ export default function AppLayout({
                   <div className="flex-shrink-0 mr-3">
                     <img
                       className="h-10 w-10 rounded-full object-cover"
-                      src={page.props.user.profile_photo_url}
-                      alt={page.props.user.name}
+                      src={page.props.auth.user.profile_photo_url}
+                      alt={page.props.auth.user.name}
                     />
                   </div>
                 ) : null}
 
                 <div>
                   <div className="font-medium text-base text-gray-800">
-                    {page.props.user.name}
+                    {page.props.auth.user.name}
                   </div>
                   <div className="font-medium text-sm text-gray-500">
-                    {page.props.user.email}
+                    {page.props.auth.user.email}
                   </div>
                 </div>
               </div>
@@ -348,7 +348,7 @@ export default function AppLayout({
                     {/* <!-- Team Settings --> */}
                     <ResponsiveNavLink
                       href={route('teams.show', [
-                        page.props.user.current_team!,
+                        page.props.auth.user.current_team!,
                       ])}
                       active={route().current('teams.show')}
                     >
@@ -370,11 +370,11 @@ export default function AppLayout({
                     <div className="block px-4 py-2 text-xs text-gray-400">
                       Switch Teams
                     </div>
-                    {page.props.user?.all_teams?.map(team => (
+                    {page.props.auth.user?.all_teams?.map(team => (
                       <form onSubmit={e => switchToTeam(e, team)} key={team.id}>
                         <ResponsiveNavLink as="button">
                           <div className="flex items-center">
-                            {team.id == page.props.user.current_team_id && (
+                            {team.id == page.props.auth.user.current_team_id && (
                               <svg
                                 className="mr-2 h-5 w-5 text-green-400"
                                 fill="none"

diff --git a/src/stubs/resources/js/Pages/Profile/Partials/TwoFactorAuthenticationForm.tsx b/src/stubs/resources/js/Pages/Profile/Partials/TwoFactorAuthenticationForm.tsx
@@ -29,7 +29,7 @@ export default function TwoFactorAuthenticationForm({
   const confirmationForm = useForm({
     code: '',
   });
-  const twoFactorEnabled = !enabling && page.props?.user?.two_factor_enabled;
+  const twoFactorEnabled = !enabling && page.props?.auth?.user?.two_factor_enabled;
 
   function enableTwoFactorAuthentication() {
     setEnabling(true);

diff --git a/src/stubs/resources/js/Pages/Profile/Show.tsx b/src/stubs/resources/js/Pages/Profile/Show.tsx
@@ -33,7 +33,7 @@ export default function Show({
         <div className="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
           {page.props.jetstream.canUpdateProfileInformation ? (
             <div>
-              <UpdateProfileInformationForm user={page.props.user} />
+              <UpdateProfileInformationForm user={page.props.auth.user} />
 
               <SectionBorder />
             </div>

diff --git a/src/stubs/resources/js/Pages/Teams/Partials/CreateTeamForm.tsx b/src/stubs/resources/js/Pages/Teams/Partials/CreateTeamForm.tsx
@@ -50,13 +50,13 @@ export default function CreateTeamForm() {
         <div className="flex items-center mt-2">
           <img
             className="w-12 h-12 rounded-full object-cover"
-            src={page.props.user.profile_photo_url}
-            alt={page.props.user.name}
+            src={page.props.auth.user.profile_photo_url}
+            alt={page.props.auth.user.name}
           />
 
           <div className="ml-4 leading-tight">
-            <div>{page.props.user.name}</div>
-            <div className="text-gray-700 text-sm">{page.props.user.email}</div>
+            <div>{page.props.auth.user.name}</div>
+            <div className="text-gray-700 text-sm">{page.props.auth.user.email}</div>
           </div>
         </div>
       </div>

diff --git a/src/stubs/resources/js/Pages/Teams/Partials/TeamMemberManager.tsx b/src/stubs/resources/js/Pages/Teams/Partials/TeamMemberManager.tsx
@@ -98,7 +98,7 @@ export default function TeamMemberManager({
 
   function leaveTeam() {
     leaveTeamForm.delete(
-      route('team-members.destroy', [team, page.props.user]),
+      route('team-members.destroy', [team, page.props.auth.user]),
     );
   }
 
@@ -340,7 +340,7 @@ export default function TeamMemberManager({
                     ) : null}
 
                     {/* <!-- Leave Team --> */}
-                    {page.props.user.id === user.id ? (
+                    {page.props.auth.user.id === user.id ? (
                       <button
                         className="cursor-pointer ml-6 text-sm text-red-500"
                         onClick={confirmLeavingTeam}

diff --git a/src/stubs/resources/js/Pages/Welcome.tsx b/src/stubs/resources/js/Pages/Welcome.tsx
@@ -26,7 +26,7 @@ export default function Welcome({
 
       {canLogin ? (
         <div className="hidden fixed top-0 right-0 px-6 py-4 sm:block">
-          {page.props.user ? (
+          {page.props.auth.user ? (
             <InertiaLink
               href={route('dashboard')}
               className="text-sm text-gray-700 dark:text-gray-500 underline"

diff --git a/src/stubs/resources/js/types.ts b/src/stubs/resources/js/types.ts
@@ -23,6 +23,13 @@ export interface User {
   updated_at: DateTime;
 }
 
+export interface Auth {
+  user: User & {
+    all_teams?: Team[];
+    current_team?: Team;
+  }
+}
+
 export type InertiaSharedProps<T = {}> = T & {
   jetstream: {
     canCreateTeams: boolean;
@@ -36,10 +43,7 @@ export type InertiaSharedProps<T = {}> = T & {
     hasTermsAndPrivacyPolicyFeature: boolean;
     managesProfilePhotos: boolean;
   };
-  user: User & {
-    all_teams?: Team[];
-    current_team?: Team;
-  };
+  auth: Auth;
   errorBags: any;
   errors: any;
 };