feat: implement more actions on user context menu like intra profile …

…and slack (#192)
42atomys · Jul 22, 2022 · b4671ef · b4671ef
1 parent 7b90533
commit b4671ef
Show file tree

Hide file tree

Showing 8 changed files with 59 additions and 29 deletions.
diff --git a/.devcontainer/postStartCommand.sh b/.devcontainer/postStartCommand.sh
@@ -20,5 +20,6 @@ EOF
 git config pull.rebase true
 git config core.hooksPath /workspace/githooks
 git config commit.gpgsign true
+git update-index --assume-unchanged .devcontainer/.env
 
 make -f build/Makefile devcontainer-init
diff --git a/web/ui/package.json b/web/ui/package.json
@@ -45,7 +45,7 @@
     "js-cookie": "^3.0.1",
     "jsonwebtoken": "^8.5.1",
     "jwks-rsa": "^2.1.4",
-    "next": "^12.1.6",
+    "next": "^12.2.1",
     "next-auth": "^4.9.0",
     "protoc-gen-ts": "^0.8.2",
     "react": "17",
@@ -80,7 +80,7 @@
     "cypress": "^10.1.0",
     "eslint": "^8.14.0",
     "eslint-config-airbnb-typescript": "^17.0.0",
-    "eslint-config-next": "12.1.6",
+    "eslint-config-next": "12.2.1",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-import": "^2.26.0",
     "husky": "^8.0.1",

diff --git a/web/ui/src/components/UserCard/DropDownMenu.tsx b/web/ui/src/components/UserCard/DropDownMenu.tsx
@@ -1,14 +1,14 @@
 import {
   useCreateFriendshipMutation,
-  useDeleteFriendshipMutation,
+  useDeleteFriendshipMutation
 } from '@graphql.d';
 import { Menu, Transition } from '@headlessui/react';
 import classNames from 'classnames';
 import { Fragment } from 'react';
 import { DropdownMenuComponent } from './types';
 
 const DropdownMenu: DropdownMenuComponent = ({
-  userID,
+  user,
   isFriend = false,
   buttonAlwaysShow = false,
   refetchQueries = [],
@@ -38,23 +38,47 @@ const DropdownMenu: DropdownMenuComponent = ({
         >
           <Menu.Items
             className={classNames(
-              'absolute right-0 w-56 mt-2 origin-top-right bg-white dark:bg-slate-900 divide-y divide-gray-100 dark:divide-slate-800 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none',
+              'absolute right-0 w-56 mt-2 origin-top-right bg-white dark:bg-slate-900 divide-y divide-gray-100 dark:divide-slate-800/75 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none',
               buttonAlwaysShow ? 'visible' : 'invisible group-hover:visible'
             )}
           >
+            <div className="px-1 py-1">
+              <Menu.Item>
+                <a
+                  className="hover:bg-indigo-500 hover:text-white group flex rounded-md items-center w-full px-2 py-2 text-sm"
+                  href={`https://profile.intra.42.fr/users/${user.duoLogin}`}
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  <i className="fa-light fa-fw fa-address-card pr-2"></i>
+                  <span>Show Intranet profile</span>
+                </a>
+              </Menu.Item>
+              <Menu.Item>
+                <a
+                  className="hover:bg-indigo-500 hover:text-white group flex rounded-md items-center w-full px-2 py-2 text-sm"
+                  href={`https://42born2code.slack.com/messages/@${user.duoLogin}`}
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  <i className="fa-brands fa-fw fa-slack pr-2"></i>
+                  <span>Contact on Slack</span>
+                </a>
+              </Menu.Item>
+            </div>
             <div className="px-1 py-1">
               {!isFriend && (
                 <Menu.Item>
                   <button
                     onClick={() => {
                       addFriendship({
-                        variables: { userID: userID },
+                        variables: { userID: user.id },
                         refetchQueries: refetchQueries,
                       });
                     }}
                     className="hover:bg-indigo-500 hover:text-white text-indigo-500 group flex rounded-md items-center w-full px-2 py-2 text-sm"
                   >
-                    <i className="fa-light fa-user-plus pr-2"></i>
+                    <i className="fa-light fa-fw fa-user-plus pr-2"></i>
                     <span>Add Friend</span>
                   </button>
                 </Menu.Item>
@@ -64,13 +88,13 @@ const DropdownMenu: DropdownMenuComponent = ({
                   <button
                     onClick={() => {
                       deleteFriendship({
-                        variables: { userID: userID },
+                        variables: { userID: user.id },
                         refetchQueries: refetchQueries,
                       });
                     }}
                     className="hover:bg-red-500 hover:text-white text-red-500 group flex rounded-md items-center w-full px-2 py-2 text-sm"
                   >
-                    <i className="fa-light fa-user-xmark pr-2"></i>
+                    <i className="fa-light fa-fw fa-user-xmark pr-2"></i>
                     <span>Remove Friend</span>
                   </button>
                 </Menu.Item>

diff --git a/web/ui/src/components/UserCard/UserCard.tsx b/web/ui/src/components/UserCard/UserCard.tsx
@@ -33,7 +33,7 @@ export const UserCard: UserCardComponent = ({
       <LocationBadge location={location} />
       {!user.isMe && (
         <DropdownMenu
-          userID={user.id}
+          user={user}
           isFriend={user.isFollowing}
           buttonAlwaysShow={buttonAlwaysShow}
           refetchQueries={refetchQueries}

diff --git a/web/ui/src/components/UserCard/types.d.ts b/web/ui/src/components/UserCard/types.d.ts
@@ -15,7 +15,7 @@ type UserCardComponent = (
 ) => JSX.Element | null;
 
 type DropdownMenuProps = {
-  userID: User['id'];
+  user: Pick<User, 'id', 'duoLogin'>;
   isFriend: bool = false;
   buttonAlwaysShow?: boolean = false;
   refetchQueries?: InternalRefetchQueriesInclude;

diff --git a/web/ui/src/lib/apollo.ts b/web/ui/src/lib/apollo.ts
@@ -72,13 +72,16 @@ export const queryAuthenticatedSSR = async <T = any>(
 ): Promise<ApolloQueryResult<T>> => {
   const { query, context, ...rest } = opts;
 
+  const token =
+    typeof req.cookies?.get === 'function'
+      ? req.cookies.get(tokenCookieName)
+      : // @ts-ignore
+        req.cookies[tokenCookieName];
+
   return apolloClient.query<T>({
     query,
     context: {
-      // @ts-ignore this will works anytime. a NextJS update breaks this rules
-      // on NextMiddleware due to the implementation of NextCookies. Wait the
-      // resolution of typescript type
-      authToken: req.cookies[tokenCookieName],
+      authToken: token,
       ...context,
     },
     ...rest,

diff --git a/web/ui/src/pages/_middleware.ts → web/ui/src/middleware.ts b/web/ui/src/pages/_middleware.ts → web/ui/src/middleware.ts
@@ -8,14 +8,16 @@ export const middleware: NextMiddleware = async (req) => {
   if (
     pathname.startsWith('/api') ||
     pathname.startsWith('/assets') ||
-    pathname.startsWith('/beta')
+    pathname.startsWith('/beta') ||
+    pathname.startsWith('/_next')
   ) {
     return NextResponse.next();
   }
 
-  const { data } = await queryAuthenticatedSSR<MeWithFlagsQuery>(req, {
-    query: MeWithFlagsDocument,
-  });
+  const { data, error, errors, networkStatus } =
+    await queryAuthenticatedSSR<MeWithFlagsQuery>(req, {
+      query: MeWithFlagsDocument,
+    });
 
   if (pathname.startsWith('/auth')) {
     if (data) return NextResponse.redirect(new URL('/', req.url));

diff --git a/web/ui/yarn.lock b/web/ui/yarn.lock
@@ -1898,10 +1898,10 @@
   resolved "https://registry.yarnpkg.com/@next/env/-/env-12.2.2.tgz#cc1a0a445bd254499e30f632968c03192455f4cc"
   integrity sha512-BqDwE4gDl1F608TpnNxZqrCn6g48MBjvmWFEmeX5wEXDXh3IkAOw6ASKUgjT8H4OUePYFqghDFUss5ZhnbOUjw==
 
-"@next/eslint-plugin-next@12.1.6":
-  version "12.1.6"
-  resolved "https://registry.yarnpkg.com/@next/eslint-plugin-next/-/eslint-plugin-next-12.1.6.tgz#dde3f98831f15923b25244588d924c716956292e"
-  integrity sha512-yNUtJ90NEiYFT6TJnNyofKMPYqirKDwpahcbxBgSIuABwYOdkGwzos1ZkYD51Qf0diYwpQZBeVqElTk7Q2WNqw==
+"@next/eslint-plugin-next@12.2.1":
+  version "12.2.1"
+  resolved "https://registry.yarnpkg.com/@next/eslint-plugin-next/-/eslint-plugin-next-12.2.1.tgz#18030efbb55b0c6f48add0ac5ad74c7f66949462"
+  integrity sha512-TeixNZNtKIZl8+HSq2hioWGL7/+YVcmKCExW7p075iVNZb/wbEAgTsrfiZJfTtHwXVuyuX7dUxiaMin1yvHzjA==
   dependencies:
     glob "7.1.7"
 
@@ -4630,12 +4630,12 @@ eslint-config-airbnb-typescript@^17.0.0:
   dependencies:
     eslint-config-airbnb-base "^15.0.0"
 
-eslint-config-next@12.1.6:
-  version "12.1.6"
-  resolved "https://registry.yarnpkg.com/eslint-config-next/-/eslint-config-next-12.1.6.tgz#55097028982dce49159d8753000be3916ac55254"
-  integrity sha512-qoiS3g/EPzfCTkGkaPBSX9W0NGE/B1wNO3oWrd76QszVGrdpLggNqcO8+LR6MB0CNqtp9Q8NoeVrxNVbzM9hqA==
+eslint-config-next@12.2.1:
+  version "12.2.1"
+  resolved "https://registry.yarnpkg.com/eslint-config-next/-/eslint-config-next-12.2.1.tgz#01a331601d5e96ef1ae4c253ccfa49ca5004d060"
+  integrity sha512-/lHPdvP1MC1ceKgH/hffjQ9IqtcAMCOPOyR4SsZ5R2/KFlra2EBW/e1tXdR+HhkkbNSkRO4N/ZgAFDmC5AYS2Q==
   dependencies:
-    "@next/eslint-plugin-next" "12.1.6"
+    "@next/eslint-plugin-next" "12.2.1"
     "@rushstack/eslint-patch" "^1.1.3"
     "@typescript-eslint/parser" "^5.21.0"
     eslint-import-resolver-node "^0.3.6"
@@ -7113,7 +7113,7 @@ next-auth@^4.9.0:
     preact-render-to-string "^5.1.19"
     uuid "^8.3.2"
 
-next@^12.1.6:
+next@^12.2.1:
   version "12.2.2"
   resolved "https://registry.yarnpkg.com/next/-/next-12.2.2.tgz#029bf5e4a18a891ca5d05b189b7cd983fd22c072"
   integrity sha512-zAYFY45aBry/PlKONqtlloRFqU/We3zWYdn2NoGvDZkoYUYQSJC8WMcalS5C19MxbCZLUVCX7D7a6gTGgl2yLg==