feat: switch betweel full and partial transactions locking.

src/containers/TransactionsLocking/TransactionsLockingList.js

@@ -1,13 +1,15 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
 import clsx from 'classnames';
 import { Intent } from '@blueprintjs/core';
 import styled from 'styled-components';
 import * as R from 'ramda';
 
-import { Alert } from 'components';
+import { Alert, ButtonLink } from 'components';
 import { TransactionsLockingProvider } from './TransactionsLockingProvider';
-import { TransactionLockingContent } from './components';
+import {
+  TransactionLockingContent,
+  TransactionLockingItemLoading,
+} from './components';
 import { useTransactionsLockingContext } from './TransactionsLockingProvider';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 
@@ -28,13 +30,83 @@ function TransactionsLockingList({ items, onlock, onUnlock, onUnlockPartial }) {
   ));
 }
 
-/**
- * Transactions locking list.
- */
-function TransactionsLockingListPage({
+function TransactionsLockingFull({ onLock, onUnlock, onUnlockPartial }) {
+  const {
+    transactionsLocking: { all },
+  } = useTransactionsLockingContext();
+
+  return (
+    <TransactionLockingContent
+      name={all.formatted_module}
+      description={all.description}
+      isEnabled={all.is_enabled}
+      onLock={onLock}
+      onUnlockPartial={onUnlockPartial}
+      onEditLock={onUnlock}
+    />
+  );
+}
+
+function TransactionLockingSkeletonList() {
+  return (
+    <>
+      <TransactionLockingItemLoading />
+      <TransactionLockingItemLoading />
+      <TransactionLockingItemLoading />
+    </>
+  );
+}
+
+function TransactionsLockingAlert() {
+  const { transactionLockingType, setTransactionLockingType } =
+    useTransactionsLockingContext();
+
+  // Handle all lock link click.
+  const handleAllLockClick = () => {
+    setTransactionLockingType('all');
+  };
+
+  const handleUndividualLockClick = () => {
+    setTransactionLockingType('partial');
+  };
+
+  return transactionLockingType !== 'all' ? (
+    <LockAllAlert
+      title={'Lock All Transactions At Once.'}
+      intent={Intent.PRIMARY}
+    >
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua.
+      </p>
+      <ButtonLink onClick={handleAllLockClick}>
+        Lock All Transactions At Once →
+      </ButtonLink>
+    </LockAllAlert>
+  ) : (
+    <LockAllAlert title={'Lock Individual Modules'} intent={Intent.PRIMARY}>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua.
+      </p>
+      <ButtonLink onClick={handleUndividualLockClick}>
+        Lock Modules Individually →
+      </ButtonLink>
+    </LockAllAlert>
+  );
+}
+
+function TransactionsLockingBodyJsx({
   // #withDialogActions
   openDialog,
 }) {
+  const {
+    transactionsLocking: { modules },
+    isTransactionLockingLoading,
+
+    transactionLockingType,
+  } = useTransactionsLockingContext();
+
   // Handle locking transactions.
   const handleLockingTransactions = () => {
     openDialog('locking-transactions', {});
@@ -49,10 +121,30 @@ function TransactionsLockingListPage({
     openDialog('unlocking-partial-transactions', {});
   };
 
-  const {
-    transactionsLocking: { modules },
-  } = useTransactionsLockingContext();
+  return !isTransactionLockingLoading ? (
+    transactionLockingType === 'partial' ? (
+      <TransactionsLockingList
+        items={modules}
+        onlock={handleLockingTransactions}
+        onUnlock={handleUnlockTransactions}
+        onUnlockPartial={handleUnlockingPartial}
+      />
+    ) : (
+      <TransactionsLockingFull />
+    )
+  ) : (
+    <TransactionLockingSkeletonList />
+  );
+}
 
+const TransactionsLockingBody = R.compose(withDialogActions)(
+  TransactionsLockingBodyJsx,
+);
+
+/**
+ * Transactions locking list.
+ */
+export default function TransactionsLockingListPage() {
   return (
     <TransactionsLockingProvider>
       <TransactionsLocking>
@@ -63,31 +155,14 @@ function TransactionsLockingListPage({
             ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
             tempor incididunt ut labore et dolore magna aliqua.
           </TransLockingDesc>
-
-          <LockAllAlert
-            title={'Lock All Transactions At Once.'}
-            intent={Intent.PRIMARY}
-          >
-            <p>
-              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
-              eiusmod tempor incididunt ut labore et dolore magna aliqua.
-            </p>
-            <Link to={'/'}>Lock All Transactions At Once →</Link>
-          </LockAllAlert>
+          <TransactionsLockingAlert />
         </TransactionsLockingParagraph>
 
-        <TransactionsLockingList
-          items={modules}
-          onlock={handleLockingTransactions}
-          onUnlock={handleUnlockTransactions}
-          onUnlockPartial={handleUnlockingPartial}
-        />
+        <TransactionsLockingBody />
       </TransactionsLocking>
     </TransactionsLockingProvider>
   );
 }
-export default R.compose(withDialogActions)(TransactionsLockingListPage);
-
 const TransactionsLocking = styled.div`
   display: flex;
   flex-direction: column;
@@ -99,10 +174,6 @@ const TransactionsLockingParagraph = styled(Paragraph)`
   margin-bottom: 25px;
 `;
 
-const TransLockingTitle = styled.h2`
-  margin-bottom: 12px;
-`;
-
 const TransLockingDesc = styled.p``;
 
 const LockAllAlert = styled(Alert)`

src/containers/TransactionsLocking/TransactionsLockingProvider.js

@@ -8,22 +8,28 @@ const TransactionsLockingContext = React.createContext();
  * Transactions locking data provider.
  */
 function TransactionsLockingProvider({ ...props }) {
-  // Fetch
+  // Fetch transaction locking modules list.
   const {
     data: transactionsLocking,
     isFetching: isTransactionLockingFetching,
     isLoading: isTransactionLockingLoading,
   } = useTransactionsLocking();
 
-  console.log(transactionsLocking, 'XX');
+  const [transactionLockingType, setTransactionLockingType] =
+    React.useState('partial');
 
   // Provider
   const provider = {
     transactionsLocking,
+    isTransactionLockingFetching,
+    isTransactionLockingLoading,
+
+    transactionLockingType,
+    setTransactionLockingType,
   };
 
   return (
-    <DashboardInsider loading={isTransactionLockingLoading}>
+    <DashboardInsider>
       <TransactionsLockingContext.Provider value={provider} {...props} />
     </DashboardInsider>
   );

src/containers/TransactionsLocking/components.js

@@ -7,11 +7,34 @@ import {
   Menu,
   Intent,
   Divider,
+  Classes,
 } from '@blueprintjs/core';
 import { Hint, Icon, If, FormattedMessage as T } from 'components';
 import { Popover2 } from '@blueprintjs/popover2';
 import { safeInvoke } from 'utils';
 
+export const TransactionLockingItemLoading = ({}) => {
+  return (
+    <TransactionLockingWrapp>
+      <TransLockingInner>
+        <TransLockingIcon>
+          <Icon icon="lock" iconSize={24} />
+        </TransLockingIcon>
+
+        <TransLockingContent>
+          <TransLockingItemTitle className={Classes.SKELETON}>
+            XXXX
+          </TransLockingItemTitle>
+
+          <TransLockingItemDesc className={Classes.SKELETON}>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+          </TransLockingItemDesc>
+        </TransLockingContent>
+      </TransLockingInner>
+    </TransactionLockingWrapp>
+  );
+};
+
 export const TransactionLockingContent = ({
   name,
   description,