#418 #477 Refactor Todo settings, add predefined Todo apps list

* add condition if on todo options

* add drop down for  todo server

* fix error TODOS_FRONTEND

* add todo list apps'

* update name of dropdown menu to Todo Service

* add other service to dropdown menu and subsetting field for user to input url

* add Other Service to drop down

* fixed typos

* reverted wording

* fix custom field

* fix linting

* fix linting

* Delete tsconfig.tsbuildinfo

* Delete tsconfig.tsbuildinfo

* Delete tsconfig.tsbuildinfo

* Add regex to validate custom todo url

* Add note with source of regex function

* Move regex function declaration to function body root

* Apply code style

* Add migration for todo settings

* Apply code style

Co-authored-by: romain <romain@jumboprivacy.com>
Co-authored-by: Roman <46404814+yourcontact@users.noreply.github.com>
Co-authored-by: romain <rpsa@pm.me>

1 files changed, 25 insertions, 13 deletions

diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index 5478ce8bf..f76378a3e 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -156,6 +156,7 @@ export default @observer class EditSettingsForm extends Component {
     cacheSize: PropTypes.string.isRequired,
     isSpellcheckerIncludedInCurrentPlan: PropTypes.bool.isRequired,
     isTodosEnabled: PropTypes.bool.isRequired,
+    isTodosActivated: PropTypes.bool.isRequired,
     isWorkspaceEnabled: PropTypes.bool.isRequired,
     noUpdates: PropTypes.bool.isRequired,
     hibernationEnabled: PropTypes.bool.isRequired,
@@ -201,6 +202,7 @@ export default @observer class EditSettingsForm extends Component {
       isDarkmodeEnabled,
       isTrayEnabled,
       openProcessManager,
+      isTodosActivated,
     } = this.props;
     const { intl } = this.context;
 
@@ -275,22 +277,32 @@ export default @observer class EditSettingsForm extends Component {
             {isTodosEnabled && (
               <>
                 <Toggle field={form.$('enableTodos')} />
-                <Input
-                  placeholder="Todo Server"
-                  onChange={e => this.submit(e)}
-                  field={form.$('todoServer')}
-                />
-                <p
-                  className="settings__message"
-                  style={{
-                    borderTop: 0, marginTop: 0, paddingTop: 0, marginBottom: '2rem',
-                  }}
-                >
-                  { intl.formatMessage(messages.todoServerInfo) }
-                </p>
+                {isTodosActivated && (
+                  <div>
+                    <Select field={form.$('predefinedTodoServer')} />
+                    {form.$('predefinedTodoServer').value === 'isUsingCustomTodoService' && (
+                      <div>
+                        <Input
+                          placeholder="Todo Server"
+                          onChange={e => this.submit(e)}
+                          field={form.$('customTodoServer')}
+                        />
+                        <p
+                          className="settings__message"
+                          style={{
+                            borderTop: 0, marginTop: 0, paddingTop: 0, marginBottom: '2rem',
+                          }}
+                        >
+                          { intl.formatMessage(messages.todoServerInfo) }
+                        </p>
+                      </div>
+                    )}
+                  </div>
+                )}
               </>
             )}
 
+
             <Hr />
 
             <Toggle field={form.$('lockingFeatureEnabled')} />