Add sandbox invitations to notifications

CompuIves · CompuIves · commit df2ace41592c · 2020-03-21T19:18:47.000Z
diff --git a/packages/app/src/app/overmind/namespaces/userNotifications/actions.ts b/packages/app/src/app/overmind/namespaces/userNotifications/actions.ts
@@ -18,6 +18,18 @@ export const notificationsOpened: AsyncAction = async ({ state }) => {
       }
     `,
   });
+
+  setTimeout(async () => {
+    await client.mutate({
+      mutation: gql`
+        mutation MarkNotificationsAsRead {
+          markAllNotificationsAsRead {
+            id
+          }
+        }
+      `,
+    });
+  }, 500);
 };
 
 export const notificationsClosed: Action = ({ state }) => {
diff --git a/packages/app/src/app/pages/common/Navigation/Notifications/elements.ts b/packages/app/src/app/pages/common/Navigation/Notifications/elements.ts
@@ -44,7 +44,7 @@ export const NotificationContainer = styled.div<{
   read?: boolean;
   success?: boolean;
 }>`
-  transition: 0.3s ease border-color;
+  transition: 0.3s ease all;
   padding: 0.75rem 1rem;
 
   border-left: 2px solid transparent;
@@ -54,14 +54,18 @@ export const NotificationContainer = styled.div<{
   ${props =>
     props.read
       ? css`
-          border-left-color: rgba(0, 0, 0, 0.3);
-          opacity: 0.6;
+          border-left-color: transparent;
+
+          &:hover {
+            background-color: ${props.theme.background2};
+          }
         `
       : css`
-          border-left-color: ${props.theme.secondary.clearer(0.2)()};
+          border-left-color: ${props.theme.secondary.clearer(0.3)()};
 
           &:hover {
             border-left-color: ${props.theme.secondary()};
+            background-color: ${props.theme.background2};
           }
         `};
 
diff --git a/packages/app/src/app/pages/common/Navigation/Notifications/index.tsx b/packages/app/src/app/pages/common/Navigation/Notifications/index.tsx
@@ -4,6 +4,7 @@ import gql from 'graphql-tag';
 
 import { TeamInvite } from './notifications/TeamInvite';
 import { TeamAccepted } from './notifications/TeamAccepted';
+import { SandboxInvitation } from './notifications/SandboxInvitation';
 
 import {
   Container,
@@ -53,6 +54,19 @@ const getNotificationComponent = (type, data, read) => {
       />
     );
   }
+  if (type === 'sandbox_invitation') {
+    return (
+      <SandboxInvitation
+        read={read}
+        inviterAvatar={parsedData.inviter_avatar}
+        inviterName={parsedData.inviter_name}
+        sandboxId={parsedData.sandbox_id}
+        sandboxAlias={parsedData.sandbox_alias}
+        sandboxTitle={parsedData.sandbox_title}
+        authorization={parsedData.authorization.toUpperCase()}
+      />
+    );
+  }
 
   return <div />;
 };
@@ -85,9 +99,8 @@ export const Notifications = props => (
 
           return (
             <div>
-              {data.me.notifications.map((notification, i) => (
-                /* eslint-disable react/no-array-index-key */
-                <div key={i}>
+              {data.me.notifications.map(notification => (
+                <div key={notification.id}>
                   {getNotificationComponent(
                     notification.type,
                     notification.data,
diff --git a/packages/app/src/app/pages/common/Navigation/Notifications/notifications/SandboxInvitation.tsx b/packages/app/src/app/pages/common/Navigation/Notifications/notifications/SandboxInvitation.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import { sandboxUrl } from '@codesandbox/common/lib/utils/url-generator';
+import { Authorization } from 'app/graphql/types';
+import { NotificationImage as Image } from '../elements';
+import { Container, W } from './elements';
+
+interface ISandboxInvitationProps {
+  read: boolean;
+  inviterAvatar: string;
+  inviterName: string;
+  sandboxId: string;
+  sandboxAlias: string | null;
+  sandboxTitle: string | null;
+  authorization: Authorization;
+}
+
+export const SandboxInvitation = ({
+  read,
+  inviterAvatar,
+  inviterName,
+  sandboxId,
+  sandboxAlias,
+  sandboxTitle,
+  authorization,
+}: ISandboxInvitationProps) => {
+  const niceSandboxTitle = sandboxTitle || sandboxAlias || sandboxId;
+  let nicePermissionName = 'view';
+  if (authorization === Authorization.Comment) {
+    nicePermissionName = 'comment on';
+  } else if (authorization === Authorization.WriteCode) {
+    nicePermissionName = 'edit';
+  }
+
+  return (
+    <div>
+      <Container
+        as={Link}
+        to={sandboxUrl({ id: sandboxId, alias: sandboxAlias })}
+        read={read}
+      >
+        <Image src={inviterAvatar} />
+        <div>
+          <W>{inviterName}</W> invited you to {nicePermissionName}{' '}
+          <W>{niceSandboxTitle}</W>
+        </div>
+      </Container>
+    </div>
+  );
+};
diff --git a/packages/app/src/app/pages/common/Navigation/Notifications/notifications/elements.ts b/packages/app/src/app/pages/common/Navigation/Notifications/notifications/elements.ts
@@ -3,6 +3,8 @@ import { NotificationContainer } from '../elements';
 
 export const Container = styled(NotificationContainer)`
   display: flex;
+  text-decoration: none;
+  color: rgba(255, 255, 255, 0.6);
 `;
 
 export const Buttons = styled.div`
@@ -44,5 +46,5 @@ export const Button = styled.div<{ decline?: boolean; disabled?: boolean }>`
 `;
 
 export const W = styled.span`
-  color: white;
+  color: rgba(255, 255, 255, 0.95);
 `;
