Fix issues reported by sonarqube linter

13 files changed, 28 insertions, 29 deletions

diff --git a/src/components/ui/AppLoader/styles.ts b/src/components/ui/AppLoader/styles.ts
index 6bf3b4f3c..5ad41913a 100644
--- a/src/components/ui/AppLoader/styles.ts
+++ b/src/components/ui/AppLoader/styles.ts
@@ -1,7 +1,8 @@
-const sloganTransition =
-  window && window.matchMedia('(prefers-reduced-motion: no-preference)')
-    ? 'opacity 1s ease'
-    : 'none';
+const sloganTransition = window?.matchMedia(
+  '(prefers-reduced-motion: no-preference)',
+)
+  ? 'opacity 1s ease'
+  : 'none';
 
 export default {
   component: {
diff --git a/src/components/ui/Infobox.tsx b/src/components/ui/Infobox.tsx
index 1fc24816a..9782db151 100644
--- a/src/components/ui/Infobox.tsx
+++ b/src/components/ui/Infobox.tsx
@@ -35,7 +35,7 @@ interface IState {
   dismissed: boolean;
 }
 
-// Can this file be merged into the './infobox/index.tsx' file?
+// TODO: Can this file be merged into the './infobox/index.tsx' file?
 @observer
 class Infobox extends Component<IProps, IState> {
   constructor(props: IProps) {
diff --git a/src/components/ui/Loader.tsx b/src/components/ui/Loader.tsx
index 17cb35f41..37555df16 100644
--- a/src/components/ui/Loader.tsx
+++ b/src/components/ui/Loader.tsx
@@ -12,7 +12,7 @@ interface IProps {
   children?: ReactNode;
 }
 
-// Can this file be merged into the './loader/index.tsx' file?
+// TODO: Can this file be merged into the './loader/index.tsx' file?
 @inject('stores')
 @observer
 class LoaderComponent extends Component<IProps> {
diff --git a/src/components/ui/Radio.tsx b/src/components/ui/Radio.tsx
index e6cb5d5a5..b5be64c5d 100644
--- a/src/components/ui/Radio.tsx
+++ b/src/components/ui/Radio.tsx
@@ -10,7 +10,7 @@ type Props = {
   showLabel: boolean;
 };
 
-// Should this file be converted into the coding style similar to './toggle/index.tsx'?
+// TODO: Should this file be converted into the coding style similar to './toggle/index.tsx'?
 class Radio extends Component<Props> {
   static defaultProps = {
     focus: false,
diff --git a/src/components/ui/Select.tsx b/src/components/ui/Select.tsx
index e8e305fdd..8ae2945ce 100644
--- a/src/components/ui/Select.tsx
+++ b/src/components/ui/Select.tsx
@@ -18,7 +18,7 @@ interface IProps {
   multiple?: boolean;
 }
 
-// Can this file be merged into the './select/index.tsx' file?
+// TODO: Can this file be merged into the './select/index.tsx' file?
 @observer
 class Select extends Component<IProps> {
   private element: RefObject<HTMLSelectElement> =
@@ -57,7 +57,7 @@ class Select extends Component<IProps> {
     let selected = field.value;
 
     if (multiple) {
-      if (typeof field.value === 'string' && field.value.slice(0, 1) === '[') {
+      if (typeof field.value === 'string' && field.value.startsWith('[')) {
         // Value is JSON encoded
         selected = JSON.parse(field.value);
       } else if (typeof field.value === 'object') {
diff --git a/src/components/ui/ServiceIcon.tsx b/src/components/ui/ServiceIcon.tsx
index 39a32e44d..6920611d0 100644
--- a/src/components/ui/ServiceIcon.tsx
+++ b/src/components/ui/ServiceIcon.tsx
@@ -27,7 +27,7 @@ interface IProps extends WithStylesProps<typeof styles> {
   className?: string;
 }
 
-// TODO - [TS DEBT] Should this file be converted into the coding style similar to './toggle/index.tsx'?
+// TODO: [TS DEBT] Should this file be converted into the coding style similar to './toggle/index.tsx'?
 @observer
 class ServiceIcon extends Component<IProps> {
   render(): ReactNode {
diff --git a/src/components/ui/Slider.tsx b/src/components/ui/Slider.tsx
index be0846513..aa351ccd2 100644
--- a/src/components/ui/Slider.tsx
+++ b/src/components/ui/Slider.tsx
@@ -12,7 +12,7 @@ interface IProps {
   onSliderChange?: (e: ChangeEvent) => void;
 }
 
-// TODO - [TS DEBT] Should this file be converted into the coding style similar to './toggle/index.tsx'?
+// TODO: [TS DEBT] Should this file be converted into the coding style similar to './toggle/index.tsx'?
 @observer
 class Slider extends Component<IProps> {
   onChange(e: ChangeEvent<HTMLInputElement>): void {
diff --git a/src/components/ui/StatusBarTargetUrl.tsx b/src/components/ui/StatusBarTargetUrl.tsx
index 7b053f410..d969267eb 100644
--- a/src/components/ui/StatusBarTargetUrl.tsx
+++ b/src/components/ui/StatusBarTargetUrl.tsx
@@ -8,7 +8,7 @@ interface IProps {
   text?: string;
 }
 
-// TODO - [TS DEBT] Should this file be converted into the coding style similar to './toggle/index.tsx'?
+// TODO: [TS DEBT] Should this file be converted into the coding style similar to './toggle/index.tsx'?
 @observer
 class StatusBarTargetUrl extends Component<IProps> {
   render() {
diff --git a/src/components/ui/infobox/index.tsx b/src/components/ui/infobox/index.tsx
index 3b878a9de..28ec2ff90 100644
--- a/src/components/ui/infobox/index.tsx
+++ b/src/components/ui/infobox/index.tsx
@@ -28,7 +28,7 @@ const buttonStyles = (theme: Theme) => {
 const infoBoxTransition: string = 'none';
 const ctaTransition: string = 'none';
 
-// TODO: Not sure why, but this location alone, the `dinwo` is not defined - and it throws an error thus aborting the startup sequence of ferdium
+// TODO: Not sure why, but this location alone, the `window` is not defined - and it throws an error thus aborting the startup sequence of ferdium
 // if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) {
 //   infoBoxTransition = 'all 0.5s';
 //   ctaTransition = 'opacity 0.3s';
diff --git a/src/components/ui/input/index.tsx b/src/components/ui/input/index.tsx
index fe8f35607..064c1807f 100644
--- a/src/components/ui/input/index.tsx
+++ b/src/components/ui/input/index.tsx
@@ -67,7 +67,7 @@ class Input extends Component<IProps, IState> {
   componentDidMount(): void {
     const { focus = false, data = {} } = this.props;
 
-    if (this.inputElement && this.inputElement.current) {
+    if (this.inputElement?.current) {
       if (focus) {
         this.inputElement.current.focus();
       }
diff --git a/src/components/ui/select/index.tsx b/src/components/ui/select/index.tsx
index 695e70e28..017de5423 100644
--- a/src/components/ui/select/index.tsx
+++ b/src/components/ui/select/index.tsx
@@ -17,7 +17,7 @@ import Wrapper from '../wrapper';
 let popupTransition: string = 'none';
 let toggleTransition: string = 'none';
 
-if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) {
+if (window?.matchMedia('(prefers-reduced-motion: no-preference)')) {
   popupTransition = 'all 0.3s';
   toggleTransition = 'transform 0.3s';
 }
@@ -194,13 +194,13 @@ class SelectComponent extends Component<IProps, IState> {
   componentDidUpdate(): void {
     const { open } = this.state;
 
-    if (this.searchInputRef && this.searchInputRef.current && open) {
+    if (this.searchInputRef?.current && open) {
       this.searchInputRef.current.focus();
     }
   }
 
   componentDidMount(): void {
-    if (this.inputRef && this.inputRef.current) {
+    if (this.inputRef?.current) {
       const { data } = this.props;
 
       if (data) {
@@ -215,7 +215,7 @@ class SelectComponent extends Component<IProps, IState> {
   UNSAFE_componentWillMount(): void {
     const { value } = this.props;
 
-    if (this.componentRef && this.componentRef.current) {
+    if (this.componentRef?.current) {
       this.componentRef.current.removeEventListener(
         'keydown',
         this.keyListener,
@@ -285,7 +285,7 @@ class SelectComponent extends Component<IProps, IState> {
       e.preventDefault();
     }
 
-    if (this.componentRef && this.componentRef.current) {
+    if (this.componentRef?.current) {
       if (e.keyCode === 38 && selected > 0) {
         this.setState((state: IState) => ({
           selected: state.selected - 1,
@@ -302,8 +302,7 @@ class SelectComponent extends Component<IProps, IState> {
       }
 
       if (
-        this.activeOptionRef &&
-        this.activeOptionRef.current &&
+        this.activeOptionRef?.current &&
         this.scrollContainerRef &&
         this.scrollContainerRef.current
       ) {
@@ -350,13 +349,11 @@ class SelectComponent extends Component<IProps, IState> {
 
     const { open, needle, value, selected, options } = this.state;
 
-    let selection = '';
+    let selection = actionText;
     if (!value && defaultValue && options![defaultValue]) {
       selection = options![defaultValue];
     } else if (value && options![value]) {
       selection = options![value];
-    } else {
-      selection = actionText;
     }
 
     return (
diff --git a/src/components/ui/textarea/index.tsx b/src/components/ui/textarea/index.tsx
index 89e85ac11..fbdef7fc6 100644
--- a/src/components/ui/textarea/index.tsx
+++ b/src/components/ui/textarea/index.tsx
@@ -38,7 +38,7 @@ class TextareaComponent extends Component<IProps> {
   componentDidMount() {
     const { data } = this.props;
 
-    if (this.textareaRef && this.textareaRef.current && data) {
+    if (this.textareaRef?.current && data) {
       Object.keys(data).map(
         key => (this.textareaRef.current!.dataset[key] = data[key]),
       );
diff --git a/src/components/ui/toggle/index.tsx b/src/components/ui/toggle/index.tsx
index 828941886..48f68943b 100644
--- a/src/components/ui/toggle/index.tsx
+++ b/src/components/ui/toggle/index.tsx
@@ -16,10 +16,11 @@ interface IProps
   className?: string;
 }
 
-const buttonTransition: string =
-  window && window.matchMedia('(prefers-reduced-motion: no-preference)')
-    ? 'all .5s'
-    : 'none';
+const buttonTransition: string = window?.matchMedia(
+  '(prefers-reduced-motion: no-preference)',
+)
+  ? 'all .5s'
+  : 'none';
 
 const styles = (theme: Theme) => ({
   toggle: {