@os-team/profile 1.2.1 → 1.2.2

package/src/lib/components/profile/__generated__/ProfileUpdateNameModalMutation.graphql.ts

@@ -0,0 +1,124 @@
+/**
+ * @generated SignedSource<<0e663480ed80dc8424202b84f5f750a1>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+export type UpdateProfileInput = {
+  firstName?: string | null | undefined;
+  lastName?: string | null | undefined;
+};
+export type ProfileUpdateNameModalMutation$variables = {
+  input: UpdateProfileInput;
+};
+export type ProfileUpdateNameModalMutation$data = {
+  readonly updateProfile: {
+    readonly firstName: string | null | undefined;
+    readonly lastName: string | null | undefined;
+  };
+};
+export type ProfileUpdateNameModalMutation = {
+  response: ProfileUpdateNameModalMutation$data;
+  variables: ProfileUpdateNameModalMutation$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = [
+  {
+    "defaultValue": null,
+    "kind": "LocalArgument",
+    "name": "input"
+  }
+],
+v1 = [
+  {
+    "kind": "Variable",
+    "name": "input",
+    "variableName": "input"
+  }
+],
+v2 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "firstName",
+  "storageKey": null
+},
+v3 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "lastName",
+  "storageKey": null
+};
+return {
+  "fragment": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "ProfileUpdateNameModalMutation",
+    "selections": [
+      {
+        "alias": null,
+        "args": (v1/*: any*/),
+        "concreteType": "User",
+        "kind": "LinkedField",
+        "name": "updateProfile",
+        "plural": false,
+        "selections": [
+          (v2/*: any*/),
+          (v3/*: any*/)
+        ],
+        "storageKey": null
+      }
+    ],
+    "type": "Mutation",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Operation",
+    "name": "ProfileUpdateNameModalMutation",
+    "selections": [
+      {
+        "alias": null,
+        "args": (v1/*: any*/),
+        "concreteType": "User",
+        "kind": "LinkedField",
+        "name": "updateProfile",
+        "plural": false,
+        "selections": [
+          (v2/*: any*/),
+          (v3/*: any*/),
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "id",
+            "storageKey": null
+          }
+        ],
+        "storageKey": null
+      }
+    ]
+  },
+  "params": {
+    "cacheID": "f70f0aaabf917dc446c3a71cf7b4f25f",
+    "id": null,
+    "metadata": {},
+    "name": "ProfileUpdateNameModalMutation",
+    "operationKind": "mutation",
+    "text": "mutation ProfileUpdateNameModalMutation(\n  $input: UpdateProfileInput!\n) {\n  updateProfile(input: $input) {\n    firstName\n    lastName\n    id\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "7264a05b6738d5417df9f1dc462486aa";
+
+export default node;

package/src/lib/components/profile/__generated__/ProfileUpdatePasswordModalMutation.graphql.ts

@@ -0,0 +1,93 @@
+/**
+ * @generated SignedSource<<98f5f690dc69060f35dc48468bd2f481>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+export type UpdatePasswordInput = {
+  currentPassword: string;
+  password: string;
+};
+export type ProfileUpdatePasswordModalMutation$variables = {
+  input: UpdatePasswordInput;
+};
+export type ProfileUpdatePasswordModalMutation$data = {
+  readonly updatePassword: {
+    readonly id: string;
+  };
+};
+export type ProfileUpdatePasswordModalMutation = {
+  response: ProfileUpdatePasswordModalMutation$data;
+  variables: ProfileUpdatePasswordModalMutation$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = [
+  {
+    "defaultValue": null,
+    "kind": "LocalArgument",
+    "name": "input"
+  }
+],
+v1 = [
+  {
+    "alias": null,
+    "args": [
+      {
+        "kind": "Variable",
+        "name": "input",
+        "variableName": "input"
+      }
+    ],
+    "concreteType": "User",
+    "kind": "LinkedField",
+    "name": "updatePassword",
+    "plural": false,
+    "selections": [
+      {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "id",
+        "storageKey": null
+      }
+    ],
+    "storageKey": null
+  }
+];
+return {
+  "fragment": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "ProfileUpdatePasswordModalMutation",
+    "selections": (v1/*: any*/),
+    "type": "Mutation",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Operation",
+    "name": "ProfileUpdatePasswordModalMutation",
+    "selections": (v1/*: any*/)
+  },
+  "params": {
+    "cacheID": "64308136a7a18e3fb1ab2d16aa93add7",
+    "id": null,
+    "metadata": {},
+    "name": "ProfileUpdatePasswordModalMutation",
+    "operationKind": "mutation",
+    "text": "mutation ProfileUpdatePasswordModalMutation(\n  $input: UpdatePasswordInput!\n) {\n  updatePassword(input: $input) {\n    id\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "efa37ccbe82fbace709f7e3992643c05";
+
+export default node;

package/src/lib/components/profile/__generated__/ProtectedWrapperQuery.graphql.ts

@@ -0,0 +1,106 @@
+/**
+ * @generated SignedSource<<a105331072d86f186651d3270145cc53>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+export type ProtectedWrapperQuery$variables = Record<PropertyKey, never>;
+export type ProtectedWrapperQuery$data = {
+  readonly profile: {
+    readonly avatar: string | null | undefined;
+    readonly email: string;
+    readonly firstName: string | null | undefined;
+    readonly id: string;
+    readonly lastName: string | null | undefined;
+  };
+};
+export type ProtectedWrapperQuery = {
+  response: ProtectedWrapperQuery$data;
+  variables: ProtectedWrapperQuery$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = [
+  {
+    "alias": null,
+    "args": null,
+    "concreteType": "User",
+    "kind": "LinkedField",
+    "name": "profile",
+    "plural": false,
+    "selections": [
+      {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "id",
+        "storageKey": null
+      },
+      {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "email",
+        "storageKey": null
+      },
+      {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "firstName",
+        "storageKey": null
+      },
+      {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "lastName",
+        "storageKey": null
+      },
+      {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "avatar",
+        "storageKey": null
+      }
+    ],
+    "storageKey": null
+  }
+];
+return {
+  "fragment": {
+    "argumentDefinitions": [],
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "ProtectedWrapperQuery",
+    "selections": (v0/*: any*/),
+    "type": "Query",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": [],
+    "kind": "Operation",
+    "name": "ProtectedWrapperQuery",
+    "selections": (v0/*: any*/)
+  },
+  "params": {
+    "cacheID": "c77ada94a5456167ef4c0c17a1fd7cd7",
+    "id": null,
+    "metadata": {},
+    "name": "ProtectedWrapperQuery",
+    "operationKind": "query",
+    "text": "query ProtectedWrapperQuery {\n  profile {\n    id\n    email\n    firstName\n    lastName\n    avatar\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "903b234e48f53b4a44dc0b4974ebc521";
+
+export default node;

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

@@ -0,0 +1,50 @@
+import styled from '@emotion/styled';
+import {
+  Alert,
+  Drawer,
+  type DrawerProps,
+  Layout,
+  PageHeader,
+} from '@os-design/core';
+import { useIsMinWidth } from '@os-design/media';
+import { type Theme, ThemeOverrider } from '@os-design/theming';
+import React, { lazy, Suspense } from 'react';
+import { useTranslation } from 'react-i18next';
+import SessionListSkeleton from './SessionListSkeleton';
+
+const LazySessionDrawerContent = lazy(() => import('./SessionDrawerContent'));
+
+const overrides: Partial<Theme> = { horizontalPadding: [1, 1] };
+
+const StyledPageHeader = styled(PageHeader)`
+  position: relative;
+`;
+
+const StyledAlert = styled(Alert)`
+  border-radius: 0;
+`;
+
+const SessionDrawer: React.FC<DrawerProps> = (props) => {
+  const { t } = useTranslation(['profile']);
+  const isMinSm = useIsMinWidth('sm');
+
+  return (
+    <Drawer placement='right' width={isMinSm ? '24em' : '90%'} {...props}>
+      <ThemeOverrider overrides={overrides}>
+        <Layout>
+          <StyledPageHeader title={t('profile:sessions.title')} />
+
+          <StyledAlert type='info' size='small'>
+            {t('profile:sessions.description')}
+          </StyledAlert>
+
+          <Suspense fallback={<SessionListSkeleton />}>
+            <LazySessionDrawerContent />
+          </Suspense>
+        </Layout>
+      </ThemeOverrider>
+    </Drawer>
+  );
+};
+
+export default SessionDrawer;

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

@@ -0,0 +1,34 @@
+import React, { Suspense } from 'react';
+import { useLazyLoadQuery } from 'react-relay';
+import { ErrorBoundary, type FallbackFn } from '@os-design/utils';
+import graphql from 'babel-plugin-relay/macro';
+import ErrorResult from '../shared/ErrorResult';
+import SessionList from './SessionList';
+import SessionListSkeleton from './SessionListSkeleton';
+import { type SessionDrawerContentQuery } from './__generated__/SessionDrawerContentQuery.graphql';
+
+const SessionDrawerContentLoader: React.FC = () => {
+  const props = useLazyLoadQuery<SessionDrawerContentQuery>(
+    graphql`
+      query SessionDrawerContentQuery {
+        ...SessionList_sessions
+      }
+    `,
+    {},
+    { fetchPolicy: 'network-only' }
+  );
+
+  return <SessionList sessionsKey={props} />;
+};
+
+const errorFallback: FallbackFn = ({ error }) => <ErrorResult error={error} />;
+
+const SessionDrawerContent: React.FC = () => (
+  <ErrorBoundary fallback={errorFallback}>
+    <Suspense fallback={<SessionListSkeleton />}>
+      <SessionDrawerContentLoader />
+    </Suspense>
+  </ErrorBoundary>
+);
+
+export default SessionDrawerContent;

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

@@ -0,0 +1,138 @@
+import styled from '@emotion/styled';
+import { Button, message } from '@os-design/core';
+import { clr } from '@os-design/theming';
+import graphql from 'babel-plugin-relay/macro';
+import React, { useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useFragment, useMutation } from 'react-relay';
+import SessionListItem from './SessionListItem';
+import { type SessionListDestroyAllOtherSessionsMutation } from './__generated__/SessionListDestroyAllOtherSessionsMutation.graphql';
+import { type SessionList_sessions$key } from './__generated__/SessionList_sessions.graphql';
+
+const sessionsFragment = graphql`
+  fragment SessionList_sessions on Query
+  @refetchable(queryName: "SessionListRefetchQuery") {
+    sessions {
+      id
+      current
+      lastSeenAt
+      ...SessionListItem_session
+    }
+  }
+`;
+
+interface SessionListProps {
+  sessionsKey: SessionList_sessions$key;
+}
+
+export const Title = styled.div`
+  font-weight: 500;
+  margin: 1em 1em 0.5em;
+`;
+
+export const List = styled.div`
+  border-top: 1px solid ${(p) => clr(p.theme.listItemColorBorder)};
+  border-bottom: 1px solid ${(p) => clr(p.theme.listItemColorBorder)};
+`;
+
+const DestroyAllOtherSessionsButton = styled(Button)`
+  & > span {
+    flex: 1;
+    text-align: left;
+  }
+`;
+
+const OtherSessions = styled.div`
+  margin-top: 2em;
+`;
+
+export const SESSION_LIST_PADDING_VERTICAL = 0.5;
+
+const SessionList: React.FC<SessionListProps> = ({ sessionsKey }) => {
+  const { sessions } = useFragment(sessionsFragment, sessionsKey);
+  const { t } = useTranslation(['profile']);
+
+  const currentSession = useMemo(
+    () => sessions.find((session) => session.current),
+    [sessions]
+  );
+
+  const otherSessions = useMemo(
+    () =>
+      sessions
+        .filter((session) => !session.current)
+        .sort((a, b) => b.lastSeenAt - a.lastSeenAt),
+    [sessions]
+  );
+
+  const [commitDestroyAllOtherSessions, loadingDestroyAllOtherSessions] =
+    useMutation<SessionListDestroyAllOtherSessionsMutation>(graphql`
+      mutation SessionListDestroyAllOtherSessionsMutation {
+        destroyAllOtherSessions {
+          ok
+        }
+      }
+    `);
+
+  const destroyAllOtherSessions = useCallback(() => {
+    commitDestroyAllOtherSessions({
+      variables: {},
+      updater: (store) => {
+        // Delete all other sessions from the store
+        const rootRP = store.getRoot();
+        const sessionsRP = rootRP
+          .getLinkedRecords('sessions')
+          ?.filter((item) => item.getDataID() === currentSession?.id);
+        if (!sessionsRP) return;
+        rootRP.setLinkedRecords(sessionsRP, 'sessions');
+      },
+      onError: (error) => {
+        message.error(error.message);
+      },
+      onCompleted: () => {
+        message.success(t('profile:sessions.destroyedAllOther'));
+      },
+    });
+  }, [commitDestroyAllOtherSessions, currentSession?.id, t]);
+
+  return (
+    <>
+      {currentSession && (
+        <>
+          <Title>{t('profile:sessions.current')}</Title>
+          <List>
+            <SessionListItem sessionKey={currentSession} hideLastSeenAt />
+          </List>
+        </>
+      )}
+
+      {otherSessions.length > 0 && (
+        <>
+          <DestroyAllOtherSessionsButton
+            type='ghost'
+            danger
+            size='small'
+            wide='always'
+            loading={loadingDestroyAllOtherSessions}
+            onClick={destroyAllOtherSessions}
+          >
+            {t('profile:sessions.destroyAllOther')}
+          </DestroyAllOtherSessionsButton>
+
+          <OtherSessions>
+            <Title>
+              {t('profile:sessions.other')} ({otherSessions.length})
+            </Title>
+            <List>
+              {otherSessions.map((session) => (
+                <SessionListItem key={session.id} sessionKey={session} />
+              ))}
+            </List>
+          </OtherSessions>
+        </>
+      )}
+    </>
+  );
+};
+
+export default SessionList;