connect: remove Expiry field from the TC UI

Author: jamaljsr

app/src/components/connect/AddSession.tsx

@@ -2,11 +2,11 @@ import React, { useCallback, useState } from 'react';
 import { observer } from 'mobx-react-lite';
 import styled from '@emotion/styled';
 import { usePrefixedTranslation } from 'hooks';
+import { MAX_DATE } from 'util/constants';
 import { useStore } from 'store';
 import { Button, Column, Row } from 'components/base';
 import FormField from 'components/common/FormField';
 import FormInput from 'components/common/FormInput';
-import FormInputNumber from 'components/common/FormInputNumber';
 
 const Styled = {
   Wrapper: styled.div``,
@@ -23,19 +23,16 @@ const AddSession: React.FC = () => {
   const { sessionStore } = useStore();
 
   const [label, setLabel] = useState('');
-  const [expiry, setExpiry] = useState(30);
   const [editing, setEditing] = useState(false);
 
   const toggleEditing = useCallback(() => setEditing(e => !e), []);
   const handleSubmit = useCallback(async () => {
-    const expDate = new Date(Date.now() + expiry * 24 * 60 * 60 * 1000);
-    const session = await sessionStore.addSession(label, expDate);
+    const session = await sessionStore.addSession(label, MAX_DATE);
     if (session) {
       setLabel('');
-      setExpiry(30);
       setEditing(false);
     }
-  }, [label, expiry]);
+  }, [label]);
 
   const { Wrapper, AddSection, ActionColumn } = Styled;
   if (!editing) {
@@ -49,20 +46,11 @@ const AddSession: React.FC = () => {
   return (
     <Wrapper>
       <Row>
-        <Column cols={4} className="offset-1">
+        <Column cols={6} className="offset-1">
           <FormField label={l('label')}>
             <FormInput value={label} onChange={setLabel} placeholder={l('labelHint')} />
           </FormField>
         </Column>
-        <Column cols={2}>
-          <FormField label={l('expiration')}>
-            <FormInputNumber
-              value={expiry}
-              onChange={setExpiry}
-              extra={l('common.days_plural')}
-            />
-          </FormField>
-        </Column>
         <ActionColumn className="">
           <Button primary onClick={handleSubmit}>
             {l('common.submit')}

app/src/components/connect/ConnectPage.tsx

@@ -13,18 +13,25 @@ const Styled = {
   Description: styled.div`
     margin: 60px;
   `,
+  Info: styled.div`
+    margin: 100px 60px;
+    color: ${props => props.theme.colors.gray};
+    text-align: center;
+    font-size: ${props => props.theme.sizes.s};
+  `,
 };
 
 const ConnectPage: React.FC = () => {
   const { l } = usePrefixedTranslation('cmps.connect.ConnectPage');
 
-  const { Wrapper, Description } = Styled;
+  const { Wrapper, Description, Info } = Styled;
   return (
     <Wrapper>
       <PageHeader title={l('pageTitle')} />
       <Description>{l('description')}</Description>
       <AddSession />
       <SessionList />
+      <Info>{l('info')}</Info>
     </Wrapper>
   );
 };

app/src/components/connect/SessionRow.tsx

@@ -86,15 +86,6 @@ const RowHeader: React.FC = () => {
           {l('state')}
         </SortableHeader>
       </HeaderColumn>
-      <HeaderColumn right>
-        <SortableHeader<Session>
-          field="expiry"
-          sort={settingsStore.sessionSort}
-          onSort={settingsStore.setSessionSort}
-        >
-          {l('expiry')}
-        </SortableHeader>
-      </HeaderColumn>
       <ActionColumn />
     </HeaderRow>
   );
@@ -130,7 +121,6 @@ const SessionRow: React.FC<Props> = ({ session, style }) => {
       <Column cols={3}>{session.label}</Column>
       <Column>{session.typeLabel}</Column>
       <Column right>{session.stateLabel}</Column>
-      <Column right>{session.expiryLabel}</Column>
       <ActionColumn>
         <Tip overlay={l('revoke')}>
           <CloseIcon onClick={handleRevoke} />

app/src/i18n/locales/en-US.json

@@ -36,11 +36,11 @@
   "cmps.connect.AddSession.expiration": "Expiration",
   "cmps.connect.AddSession.expirationSuffix": "",
   "cmps.connect.ConnectPage.pageTitle": "Terminal Connect",
-  "cmps.connect.ConnectPage.description": "The list below contains the Terminal Connect sessions which allow you to connect to this Lightning Terminal node remotely from other applications.",
+  "cmps.connect.ConnectPage.description": "Through the Terminal Connect page, you can create sessions which allow for you to connect to this Lightning Terminal node remotely from other applications, like Terminal Web. Copy the pairing phrase and paste it into the app in order to make the connection.",
+  "cmps.connect.ConnectPage.info": "You will need a unique session for each app you wish to connect.",
   "cmps.connect.SessionRowHeader.label": "Label",
   "cmps.connect.SessionRowHeader.type": "Type",
   "cmps.connect.SessionRowHeader.state": "State",
-  "cmps.connect.SessionRowHeader.expiry": "Expiry",
   "cmps.connect.SessionRow.copy": "Copy Pairing Phrase",
   "cmps.connect.SessionRow.revoke": "Revoke Session",
   "cmps.history.HistoryPage.backText": "Lightning Loop",

app/src/store/stores/settingsStore.ts

@@ -92,8 +92,8 @@ export default class SettingsStore {
 
   /** specifies the sorting field and direction for the Lit session list */
   sessionSort: SortParams<Session> = {
-    field: 'expiry',
-    descending: true,
+    field: 'label',
+    descending: false,
   };
 
   /** the chosen language */

app/src/util/constants.ts

@@ -1,6 +1,9 @@
 /** estimated number of blocks mined per day */
 export const BLOCKS_PER_DAY = 144;
 
+/** A Date very far into the future */
+export const MAX_DATE = new Date(9999, 0, 1);
+
 /** the enumeration of unit supported in the app */
 export enum Unit {
   sats = 'sats',