@os-team/profile 1.2.1 → 1.2.2

package/src/lib/components/session/SessionListItem.tsx

@@ -0,0 +1,318 @@
+import React, { useCallback, useMemo } from 'react';
+import graphql from 'babel-plugin-relay/macro';
+import { useFragment, useMutation } from 'react-relay';
+import styled from '@emotion/styled';
+import { useTranslation } from 'react-i18next';
+import pluralForms from '@os-team/plural-forms';
+import { Button, message } from '@os-design/core';
+import {
+  ellipsisStyles,
+  horizontalPaddingStyles,
+  transitionStyles,
+} from '@os-design/styles';
+import { clr, type Color } from '@os-design/theming';
+import { isTouchDevice, omitEmotionProps, useSwipe } from '@os-design/utils';
+import { SignOut } from '@os-design/icons';
+import { css } from '@emotion/react';
+import { type SessionListItem_session$key } from './__generated__/SessionListItem_session.graphql';
+import getLastSeen from './getLastSeen';
+import formatDate from './formatDate';
+import { type SessionListItemDestroySessionMutation } from './__generated__/SessionListItemDestroySessionMutation.graphql';
+import UnknownDeviceIcon from '../shared/icons/UnknownDeviceIcon';
+import BrowserIcon from '../shared/icons/BrowserIcon';
+import AppleIcon from '../shared/icons/AppleIcon';
+import AndroidIcon from '../shared/icons/AndroidIcon';
+
+const sessionListItemFragment = graphql`
+  fragment SessionListItem_session on SessionPayload {
+    id
+    isApp
+    browserName
+    browserVersion
+    osName
+    osVersion
+    deviceType
+    deviceName
+    deviceManufacturer
+    deviceBrand
+    deviceModel
+    ip
+    country
+    city
+    lastSeenAt
+  }
+`;
+
+interface SessionListItemProps {
+  sessionKey: SessionListItem_session$key;
+  hideLastSeenAt?: boolean;
+}
+
+export const Container = styled.div`
+  display: flex;
+  position: relative;
+  padding: 0.5em 0;
+  overflow: hidden;
+
+  &:not(:last-of-type) {
+    border-bottom: 1px solid ${(p) => clr(p.theme.listItemColorBorder)};
+  }
+
+  @media (hover: hover) {
+    // Hide actions by default
+    & > nav {
+      opacity: 0;
+    }
+
+    // Display actions either on focus, or on hover
+    &:hover,
+    &:focus-within {
+      & > nav {
+        opacity: 1;
+      }
+    }
+  }
+
+  ${horizontalPaddingStyles()};
+`;
+
+const Info = styled.div`
+  font-size: ${(p) => p.theme.sizes.small}em;
+  ${ellipsisStyles};
+`;
+
+export const Content = styled.div`
+  flex: 1;
+  overflow: hidden;
+`;
+
+const Title = styled(Info)`
+  font-weight: 500;
+`;
+
+const LastSeen = styled(Info)`
+  color: ${(p) => clr(p.theme.inputColorPlaceholder)};
+`;
+
+const hasSwipeStyles = (p) =>
+  p.hasSwipe &&
+  css`
+    transform: translateX(100%);
+    ${transitionStyles('transform')(p)};
+  `;
+
+const openedStyles = (p) =>
+  p.opened &&
+  css`
+    transform: translateX(0);
+  `;
+
+interface ActionsProps {
+  hasSwipe: boolean;
+  opened: boolean;
+}
+const Actions = styled(
+  'nav',
+  omitEmotionProps('hasSwipe', 'opened')
+)<ActionsProps>`
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+
+  display: flex;
+  align-items: center;
+
+  background: linear-gradient(
+    to right,
+    ${(p) => clr([...p.theme.colorBg.slice(0, 3), 0] as Color)},
+    ${(p) => clr(p.theme.colorBg)}
+      ${(p) => p.theme.listItemActionsPaddingLeft}em
+  );
+
+  ${hasSwipeStyles};
+  ${openedStyles};
+  ${horizontalPaddingStyles('right')};
+`;
+
+export const IconContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 0.6em;
+`;
+
+interface IconProps {
+  bgColor: string;
+}
+export const Icon = styled('div', omitEmotionProps('bgColor'))<IconProps>`
+  font-size: 1.4em;
+  width: 1.3em;
+  height: 1.3em;
+
+  svg {
+    height: 1.3em;
+  }
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  border-radius: ${(p) => p.theme.borderRadius}em;
+  background-color: ${(p) => p.bgColor};
+  color: hsl(0, 0%, 100%);
+`;
+
+const nameVersionToString = (
+  name?: string | null,
+  version?: string | null
+): string | null => {
+  if (!name) return null;
+  return `${name}${version ? ` ${version}` : ''}`;
+};
+
+const mergeInfo = (...args: Array<string | null | undefined>): string | null =>
+  args.filter((item) => item !== null && item !== undefined).join(', ') || null;
+
+const SessionListItem: React.FC<SessionListItemProps> = ({
+  sessionKey,
+  hideLastSeenAt,
+}) => {
+  const session = useFragment(sessionListItemFragment, sessionKey);
+  const { t, i18n } = useTranslation(['profile']);
+  const touchDevice = useMemo(() => isTouchDevice(), []);
+  const { opened, handlers } = useSwipe();
+
+  const browser = useMemo(
+    () => nameVersionToString(session.browserName, session.browserVersion),
+    [session.browserName, session.browserVersion]
+  );
+
+  const os = useMemo(
+    () => nameVersionToString(session.osName, session.osVersion),
+    [session.osName, session.osVersion]
+  );
+
+  const deviceBrandModel = useMemo(() => {
+    const arr = [session.deviceBrand, session.deviceModel];
+    // Include the manufacturer name only if it does not equal to the brand name.
+    // For example, it allows to avoid "Apple Apple iPhone 6".
+    if (session.deviceManufacturer !== session.deviceBrand) {
+      arr.unshift(session.deviceManufacturer);
+    }
+    return arr.filter((item) => item !== null).join(' ') || null;
+  }, [session.deviceBrand, session.deviceManufacturer, session.deviceModel]);
+
+  const title = useMemo(() => {
+    let deviceType = (session.deviceType || 'unknown').toLowerCase();
+    if (browser) deviceType = 'browser';
+    return `${
+      t('profile:sessions.deviceType', { returnObjects: true })[deviceType]
+    }${session.deviceName ? ` ${session.deviceName}` : ''}`;
+  }, [browser, session.deviceName, session.deviceType, t]);
+
+  const deviceInfo = useMemo(
+    () =>
+      session.isApp ? mergeInfo(deviceBrandModel, os) : mergeInfo(browser, os),
+    [browser, deviceBrandModel, os, session.isApp]
+  );
+
+  const ip = useMemo(() => {
+    if (!session.ip) return null;
+    const location = mergeInfo(session.city, session.country);
+    return `${session.ip}${location ? ` (${location})` : ''}`;
+  }, [session.city, session.country, session.ip]);
+
+  const lastSeen = useMemo(() => {
+    const lsa = getLastSeen(session.lastSeenAt);
+    if (!lsa) {
+      return `${t('profile:sessions.lastSeenOn')} ${formatDate(
+        session.lastSeenAt,
+        t,
+        i18n.language
+      )}`;
+    }
+    return `${t('profile:sessions.lastSeen')} ${lsa[0]} ${pluralForms({
+      language: i18n.language,
+      forms: t(`profile:sessions.${lsa[1]}`, { returnObjects: true }),
+      number: lsa[0],
+    })} ${t('profile:sessions.ago')}`;
+  }, [i18n.language, session.lastSeenAt, t]);
+
+  const [iconComponent, iconColor] = useMemo(() => {
+    if (browser) return [<BrowserIcon key='icon' />, 'hsl(30, 60%, 50%)'];
+    if (session.isApp) {
+      if (session.osName === 'iOS' || session.osName === 'iPhone OS') {
+        return [<AppleIcon key='icon' />, 'hsl(0, 0%, 50%)'];
+      }
+      if (session.osName === 'Android')
+        return [<AndroidIcon key='icon' />, 'hsl(150, 60%, 50%)'];
+    }
+    return [<UnknownDeviceIcon key='icon' />, 'hsl(5, 60%, 50%)'];
+  }, [browser, session.isApp, session.osName]);
+
+  const [commitDestroySession, loadingDestroySession] =
+    useMutation<SessionListItemDestroySessionMutation>(graphql`
+      mutation SessionListItemDestroySessionMutation(
+        $input: DestroySessionInput!
+      ) {
+        destroySession(input: $input) {
+          ok
+        }
+      }
+    `);
+
+  const destroySession = useCallback(() => {
+    commitDestroySession({
+      variables: {
+        input: {
+          id: session.id,
+        },
+      },
+      updater: (store) => {
+        // Delete the session from the store
+        const rootRP = store.getRoot();
+        const sessionsRP = rootRP
+          .getLinkedRecords('sessions')
+          ?.filter((item) => item.getDataID() !== session.id);
+        if (!sessionsRP) return;
+        rootRP.setLinkedRecords(sessionsRP, 'sessions');
+      },
+      onError: (error) => {
+        message.error(error.message);
+      },
+      onCompleted: () => {
+        message.success(t('profile:sessions.destroyed'));
+      },
+    });
+  }, [commitDestroySession, session.id, t]);
+
+  return (
+    <Container {...handlers}>
+      <IconContainer>
+        <Icon bgColor={iconColor}>{iconComponent}</Icon>
+      </IconContainer>
+
+      <Content>
+        <Title>{title}</Title>
+        {deviceInfo && <Info>{deviceInfo}</Info>}
+        {ip && <Info>{ip}</Info>}
+        {!hideLastSeenAt && <LastSeen>{lastSeen}</LastSeen>}
+      </Content>
+
+      <Actions hasSwipe={touchDevice} opened={opened}>
+        <Button
+          type='ghost'
+          wide='never'
+          size='small'
+          loading={loadingDestroySession}
+          onClick={destroySession}
+        >
+          <SignOut />
+        </Button>
+      </Actions>
+    </Container>
+  );
+};
+
+export default SessionListItem;

package/src/lib/components/session/SessionListSkeleton.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Skeleton } from '@os-design/core';
+import styled from '@emotion/styled';
+import { Container, Content, IconContainer } from './SessionListItem';
+import { Title, List } from './SessionList';
+
+const IconSkeleton = styled(Skeleton)`
+  width: 1.82em;
+  height: 1.82em;
+`;
+
+const ContainerSkeleton = styled(Container)`
+  padding: 0.8em 0;
+`;
+
+const TitleSkeleton = styled(Skeleton)`
+  height: ${(p) => p.theme.sizes.small}em;
+`;
+
+const InfoSkeleton = styled(TitleSkeleton)`
+  margin-top: 0.3em;
+`;
+
+const SessionListSkeleton: React.FC = () => {
+  const { t } = useTranslation(['profile']);
+
+  return (
+    <>
+      <Title>{t('profile:sessions.current')}</Title>
+      <List>
+        <ContainerSkeleton>
+          <IconContainer>
+            <IconSkeleton />
+          </IconContainer>
+
+          <Content>
+            <TitleSkeleton width='50%' />
+            <InfoSkeleton />
+            <InfoSkeleton width='90%' />
+          </Content>
+        </ContainerSkeleton>
+      </List>
+    </>
+  );
+};
+
+export default SessionListSkeleton;

package/src/lib/components/session/__generated__/SessionDrawerContentQuery.graphql.ts

@@ -0,0 +1,181 @@
+/**
+ * @generated SignedSource<<64df87dd058f26f9e4849449241ada0f>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+import { FragmentRefs } from "relay-runtime";
+export type SessionDrawerContentQuery$variables = Record<PropertyKey, never>;
+export type SessionDrawerContentQuery$data = {
+  readonly " $fragmentSpreads": FragmentRefs<"SessionList_sessions">;
+};
+export type SessionDrawerContentQuery = {
+  response: SessionDrawerContentQuery$data;
+  variables: SessionDrawerContentQuery$variables;
+};
+
+const node: ConcreteRequest = {
+  "fragment": {
+    "argumentDefinitions": [],
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "SessionDrawerContentQuery",
+    "selections": [
+      {
+        "args": null,
+        "kind": "FragmentSpread",
+        "name": "SessionList_sessions"
+      }
+    ],
+    "type": "Query",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": [],
+    "kind": "Operation",
+    "name": "SessionDrawerContentQuery",
+    "selections": [
+      {
+        "alias": null,
+        "args": null,
+        "concreteType": "SessionPayload",
+        "kind": "LinkedField",
+        "name": "sessions",
+        "plural": true,
+        "selections": [
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "id",
+            "storageKey": null
+          },
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "current",
+            "storageKey": null
+          },
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "lastSeenAt",
+            "storageKey": null
+          },
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "isApp",
+            "storageKey": null
+          },
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "browserName",
+            "storageKey": null
+          },
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "browserVersion",
+            "storageKey": null
+          },
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "osName",
+            "storageKey": null
+          },
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "osVersion",
+            "storageKey": null
+          },
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "deviceType",
+            "storageKey": null
+          },
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "deviceName",
+            "storageKey": null
+          },
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "deviceManufacturer",
+            "storageKey": null
+          },
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "deviceBrand",
+            "storageKey": null
+          },
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "deviceModel",
+            "storageKey": null
+          },
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "ip",
+            "storageKey": null
+          },
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "country",
+            "storageKey": null
+          },
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "city",
+            "storageKey": null
+          }
+        ],
+        "storageKey": null
+      }
+    ]
+  },
+  "params": {
+    "cacheID": "cc7ef83584759c724bbad21b528477c2",
+    "id": null,
+    "metadata": {},
+    "name": "SessionDrawerContentQuery",
+    "operationKind": "query",
+    "text": "query SessionDrawerContentQuery {\n  ...SessionList_sessions\n}\n\nfragment SessionListItem_session on SessionPayload {\n  id\n  isApp\n  browserName\n  browserVersion\n  osName\n  osVersion\n  deviceType\n  deviceName\n  deviceManufacturer\n  deviceBrand\n  deviceModel\n  ip\n  country\n  city\n  lastSeenAt\n}\n\nfragment SessionList_sessions on Query {\n  sessions {\n    id\n    current\n    lastSeenAt\n    ...SessionListItem_session\n  }\n}\n"
+  }
+};
+
+(node as any).hash = "1643ac6b9bd324d389dab9011e55b1ba";
+
+export default node;

package/src/lib/components/session/__generated__/SessionListDestroyAllOtherSessionsMutation.graphql.ts

@@ -0,0 +1,74 @@
+/**
+ * @generated SignedSource<<2218d8fc90b51a497af7a28a79b5b1cf>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+export type SessionListDestroyAllOtherSessionsMutation$variables = Record<PropertyKey, never>;
+export type SessionListDestroyAllOtherSessionsMutation$data = {
+  readonly destroyAllOtherSessions: {
+    readonly ok: boolean;
+  };
+};
+export type SessionListDestroyAllOtherSessionsMutation = {
+  response: SessionListDestroyAllOtherSessionsMutation$data;
+  variables: SessionListDestroyAllOtherSessionsMutation$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = [
+  {
+    "alias": null,
+    "args": null,
+    "concreteType": "StatusPayload",
+    "kind": "LinkedField",
+    "name": "destroyAllOtherSessions",
+    "plural": false,
+    "selections": [
+      {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "ok",
+        "storageKey": null
+      }
+    ],
+    "storageKey": null
+  }
+];
+return {
+  "fragment": {
+    "argumentDefinitions": [],
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "SessionListDestroyAllOtherSessionsMutation",
+    "selections": (v0/*: any*/),
+    "type": "Mutation",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": [],
+    "kind": "Operation",
+    "name": "SessionListDestroyAllOtherSessionsMutation",
+    "selections": (v0/*: any*/)
+  },
+  "params": {
+    "cacheID": "c6f556336ccb31f27b1c2f13c2ea9c06",
+    "id": null,
+    "metadata": {},
+    "name": "SessionListDestroyAllOtherSessionsMutation",
+    "operationKind": "mutation",
+    "text": "mutation SessionListDestroyAllOtherSessionsMutation {\n  destroyAllOtherSessions {\n    ok\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "016b6b5e7ae228f7df552d97fa43bd40";
+
+export default node;