From 4fca8f1fd1ba5d9e9f7f1289c9db35c1f03aaf34 Mon Sep 17 00:00:00 2001
From: Thebora Kompanioni <theborakompanioni@users.noreply.github.com>
Date: Fri, 9 Dec 2022 10:28:23 +0100
Subject: [PATCH] fix(send): parse number of collaborators as integer (#572)

* fix: parse number of collaborators as integer

* refactor: simplify CollaboratorsSelector styles
---
 src/components/Send.jsx        | 52 +++++++++++-----------------------
 src/components/Send.module.css | 24 +++++++---------
 2 files changed, 28 insertions(+), 48 deletions(-)

diff --git a/src/components/Send.jsx b/src/components/Send.jsx
index 868aff554..d00a11f82 100644
--- a/src/components/Send.jsx
+++ b/src/components/Send.jsx
@@ -70,46 +70,37 @@ const CollaboratorsSelector = ({ numCollaborators, setNumCollaborators, minNumCo
 
   const [usesCustomNumCollaborators, setUsesCustomNumCollaborators] = useState(false)
 
+  const defaultCollaboratorsSelection = useMemo(() => {
+    const start = Math.max(minNumCollaborators, 8)
+    return [start, start + 1, start + 2]
+  }, [minNumCollaborators])
+
   const validateAndSetCustomNumCollaborators = (candidate) => {
-    if (isValidNumCollaborators(candidate, minNumCollaborators)) {
-      setNumCollaborators(candidate)
+    const parsed = parseInt(candidate, 10)
+    if (isValidNumCollaborators(parsed, minNumCollaborators)) {
+      setNumCollaborators(parsed)
     } else {
       setNumCollaborators(null)
     }
   }
 
-  var defaultCollaboratorsSelection = [8, 9, 10]
-  if (minNumCollaborators > 8) {
-    defaultCollaboratorsSelection = [minNumCollaborators, minNumCollaborators + 1, minNumCollaborators + 2]
-  }
-
   return (
-    <rb.Form noValidate className={styles['collaborators-selector']} disabled={disabled}>
+    <rb.Form noValidate className={styles.collaboratorsSelector} disabled={disabled}>
       <rb.Form.Group>
         <rb.Form.Label className="mb-0">{t('send.label_num_collaborators', { numCollaborators })}</rb.Form.Label>
         <div className="mb-2">
           <rb.Form.Text className="text-secondary">{t('send.description_num_collaborators')}</rb.Form.Text>
         </div>
-        <div className={`${styles['collaborators-selector-flex']} d-flex flex-row flex-wrap`}>
+        <div className="d-flex flex-row flex-wrap gap-2">
           {defaultCollaboratorsSelection.map((number) => {
+            const isSelected = !usesCustomNumCollaborators && numCollaborators === number
             return (
               <rb.Button
                 key={number}
                 variant={settings.theme === 'light' ? 'white' : 'dark'}
-                className={classNames(
-                  styles['collaborators-selector-button'],
-                  'p-2',
-                  'border',
-                  'border-1',
-                  'rounded',
-                  'text-center',
-                  {
-                    'border-dark':
-                      !usesCustomNumCollaborators && numCollaborators === number && settings.theme === 'light',
-                    [styles['selected-dark']]:
-                      !usesCustomNumCollaborators && numCollaborators === number && settings.theme !== 'light',
-                  }
-                )}
+                className={classNames(styles.collaboratorsSelectorElement, 'border', 'border-1', {
+                  [styles.selected]: isSelected,
+                })}
                 onClick={() => {
                   setUsesCustomNumCollaborators(false)
                   setNumCollaborators(number)
@@ -127,18 +118,9 @@ const CollaboratorsSelector = ({ numCollaborators, setNumCollaborators, minNumCo
             isInvalid={!isValidNumCollaborators(numCollaborators, minNumCollaborators)}
             placeholder={t('send.input_num_collaborators_placeholder')}
             defaultValue=""
-            className={classNames(
-              styles['collaborators-selector-input'],
-              'p-2',
-              'border',
-              'border-1',
-              'rounded',
-              'text-center',
-              {
-                'border-dark': usesCustomNumCollaborators && settings.theme === 'light',
-                [styles['selected-dark']]: usesCustomNumCollaborators && settings.theme !== 'light',
-              }
-            )}
+            className={classNames(styles.collaboratorsSelectorElement, 'border', 'border-1', {
+              [styles.selected]: usesCustomNumCollaborators,
+            })}
             onChange={(e) => {
               setUsesCustomNumCollaborators(true)
               validateAndSetCustomNumCollaborators(e.target.value)
diff --git a/src/components/Send.module.css b/src/components/Send.module.css
index 26d7cf63b..4ffe3ddb7 100644
--- a/src/components/Send.module.css
+++ b/src/components/Send.module.css
@@ -113,28 +113,26 @@ input[type='number'] {
   width: 100%;
 }
 
-.collaborators-selector-button {
+.collaboratorsSelectorElement {
   min-width: 6rem;
   flex: 1;
+  padding: 0.5rem;
+  text-align: center;
+  border-radius: var(--bs-border-radius);
 }
 
-.collaborators-selector-input {
-  min-width: 6rem;
-  flex: 1;
-}
-
-:root[data-theme='dark'] .collaborators-selector-input {
+:root[data-theme='dark'] input.collaboratorsSelectorElement {
   background-color: var(--bs-gray-800);
   color: var(--bs-white);
 }
 
-:root[data-theme='dark'] .collaborators-selector .selected-dark {
-  background-color: var(--bs-gray-dark);
-  border-color: var(--bs-gray-dark) !important;
+.collaboratorsSelectorElement.selected {
+  border-color: var(--bs-dark-rgb) !important;
 }
 
-.collaborators-selector-flex {
-  gap: 0.5rem;
+:root[data-theme='dark'] .collaboratorsSelectorElement.selected {
+  background-color: var(--bs-gray-dark);
+  border-color: var(--bs-gray-dark) !important;
 }
 
 .input-loader {
@@ -146,7 +144,7 @@ input[type='number'] {
   filter: blur(2px);
 }
 
-.service-running .collaborators-selector {
+.service-running .collaboratorsSelector {
   filter: blur(2px);
 }