fix: do not show Prolong button for expired substakes

cryptoseal86 · Dec 23, 2020 · cbe27f1 · cbe27f1
1 parent 8db32a1
commit cbe27f1
Show file tree

Hide file tree

Showing 3 changed files with 707 additions and 12 deletions.
diff --git a/src/components/Stakes/Stakes.js b/src/components/Stakes/Stakes.js
@@ -57,7 +57,11 @@ function Stakes(props) {
             <div className="table-row-column table-center">{dateFormat(substake.firstPeriod)} - {dateFormat(substake.lastPeriod)}</div>
             <div className="table-row-column table-center">
               <Button data-testid={ `divide-button-${i}` } className="m-1" variant="secondary" size="sm" onClick={toggleDivideRow(i)}>Divide</Button>
-              <Button data-testid={ `prolong-button-${i}` } className="m-1" variant="secondary" size="sm" onClick={toggleProlongRow(i)}>Prolong</Button>
+              {
+                substake.remainingDuration !== 0 ? <>
+                  <Button data-testid={ `prolong-button-${i}` } className="m-1" variant="secondary" size="sm" onClick={toggleProlongRow(i)}>Prolong</Button>
+                </> : null
+              }
             </div>
           </div>
           <Collapse in={divideCollapse[i]} className="mt-4">
@@ -69,15 +73,19 @@ function Stakes(props) {
               </Row>
             </Container>
           </Collapse>
-          <Collapse in={prolongCollapse[i]} className="mt-4">
-            <Container>
-              <Row>
-                <Col>
-                  <ProlongSubStake subStake={substake} onSubStakeProlong={onSubStakeProlong.bind(substake)}></ProlongSubStake>
-                </Col>
-              </Row>
-            </Container>
-          </Collapse>
+          {
+            substake.remainingDuration !== 0 ? <>
+              <Collapse in={prolongCollapse[i]} className="mt-4">
+                <Container>
+                  <Row>
+                    <Col>
+                      <ProlongSubStake subStake={substake} onSubStakeProlong={onSubStakeProlong.bind(substake)}></ProlongSubStake>
+                    </Col>
+                  </Row>
+                </Container>
+              </Collapse>
+            </> : null
+          }
         </Fragment>)
       }
     </div>

diff --git a/src/components/Stakes/__tests__/Stakes.test.js b/src/components/Stakes/__tests__/Stakes.test.js
@@ -12,14 +12,14 @@ describe('<Stakes />', () => {
       firstPeriod: new Date(300 * 24 * 60 * 60 * 1000),
       lastPeriod: new Date(305 * 24 * 60 * 60 * 1000),
       value: Web3.utils.toWei('15000'),
-      remainingDuration: '245'
+      remainingDuration: 245
     }),
     new SubStake({
       index: 1,
       firstPeriod: new Date(1600 * 24 * 60 * 60 * 1000),
       lastPeriod: new Date(1605 * 24 * 60 * 60 * 1000),
       value: Web3.utils.toWei('15000'),
-      remainingDuration: '365'
+      remainingDuration: 365
     })
   ];
 
@@ -40,4 +40,16 @@ describe('<Stakes />', () => {
     });
     expect(asFragment()).toMatchSnapshot();
   });
+
+  it('should not show prolong button for expired stakes', () => {
+    substakes.push(new SubStake({
+      index: 0,
+      firstPeriod: new Date(300 * 24 * 60 * 60 * 1000),
+      lastPeriod: new Date(305 * 24 * 60 * 60 * 1000),
+      value: Web3.utils.toWei('15000'),
+      remainingDuration: 0
+    }));
+    const { getByTestId, asFragment } = render(<Stakes substakes={substakes} />);
+    expect(asFragment()).toMatchSnapshot();
+  });
 });