Merge pull request #156 from MaZderMind/link-to-public-page

Add Links to Public Pages

components/Shell.tsx

@@ -74,6 +74,7 @@ export default function Shell(props) {
                                             {
                                                 profileDropdownExpanded && (
                                                     <div className="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
+                                                        <Link href={"/" + session.user.username}><a target="_blank" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Your Public Page</a></Link>
                                                         <Link href="/settings/profile"><a className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Your Profile</a></Link>
                                                         <Link href="/settings/password"><a className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Login &amp; Security</a></Link>
                                                         <button onClick={logoutHandler} className="w-full text-left block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Sign out</button>
@@ -145,4 +146,4 @@ export default function Shell(props) {
             </main>
         </div>
 );
-}
+}

pages/api/auth/[...nextauth].tsx

@@ -40,4 +40,18 @@ export default NextAuth({
             }
         })
     ],
-});
+    callbacks: {
+        async jwt(token, user, account, profile, isNewUser) {
+            // Add username to the token right after signin
+            if (user?.username) {
+                token.username = user.username
+            }
+            return token;
+        },
+        async session(session, token) {
+            session.user = session.user || {}
+            session.user.username = token.username;
+            return session;
+        },
+    },
+});

pages/availability/index.tsx

@@ -158,7 +158,7 @@ export default function Availability(props) {
                                                     {eventType.length} minutes
                                                 </td>
                                                 <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                                                    {eventType.hidden && <Link href={"/" + props.user.username + "/" + eventType.slug}><a className="text-blue-600 hover:text-blue-900 mr-2">View</a></Link>}
+                                                    <Link href={"/" + props.user.username + "/" + eventType.slug}><a target="_blank" className="text-blue-600 hover:text-blue-900 mr-2">View</a></Link>
                                                     <Link href={"/availability/event/" + eventType.id}><a className="text-blue-600 hover:text-blue-900">Edit</a></Link>
                                                 </td>
                                             </tr>
@@ -382,4 +382,4 @@ export async function getServerSideProps(context) {
     return {
       props: {user, types}, // will be passed to the page component as props
     }
-}
+}