Feature/linters

.eslintrc.js

@@ -1,30 +1,45 @@
-
 const fs = require('fs');
 const path = require('path');
 
+
 const prettierOptions = JSON.parse(
   fs.readFileSync(path.resolve(__dirname, '.prettierrc'), 'utf8'),
 );
-
-// const app = JSON.parse(path.resolve(__dirname, 'app'));
-
 module.exports = {
   root: true,
   parser: 'babel-eslint',
-  extends: ['airbnb', 'prettier', 'prettier/react'],
-  plugins: ['prettier', 'redux-saga', 'react-native', 'react', 'react-hooks', 'jsx-a11y'],
+  extends: [
+    'airbnb',
+    'prettier', 
+    'prettier/react',
+    'plugin:prettier/recommended',
+    'plugin:sonarjs/recommended',
+    'plugin:security/recommended-legacy',
+    'plugin:fp/recommended'
+  ],
+  plugins: [
+    'github',
+    'immutable',
+    'sonarjs',
+    'redux-saga',
+    'react-native',
+    'react',
+    'react-hooks',
+    'jsx-a11y',
+    'fp'
+  ],
   env: {
     jest: true,
     browser: true,
     node: true,
-    es6: true,
+    es6: true
   },
   parserOptions: {
     ecmaVersion: 6,
     sourceType: 'module',
     ecmaFeatures: {
-      jsx: true,
-    },
+      jsx: true
+    }
   },
   rules: {
     'prettier/prettier': ['error', prettierOptions],
@@ -53,8 +68,8 @@ module.exports = {
         // NOTE: If this error triggers, either disable it or add
         // your custom components, labels and attributes via these options
         // See https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/label-has-associated-control.md
-        controlComponents: ['Input'],
-      },
+        controlComponents: ['Input']
+      }
     ],
     'jsx-a11y/label-has-for': 0,
     'jsx-a11y/mouse-events-have-key-events': 2,
@@ -82,29 +97,76 @@ module.exports = {
     'redux-saga/no-yield-in-race': 2,
     'redux-saga/yield-effects': 2,
     'require-yield': 0,
-    'react/no-array-index-key': 0
+    'react/no-array-index-key': 0,
+    'react/jsx-curly-newline': 0,
+    'react/jsx-one-expression-per-line': 0,
+    'react/jsx-wrap-multilines': 0,
+    'react/no-unused-prop-types': 0,
+    'max-lines-per-function': ['error', 250],
+    'no-else-return': 'error',
+    'max-params': ['error', 3],
+    'require-jsdoc': [
+      'error',
+      {
+        require: {
+          FunctionDeclaration: true,
+          MethodDefinition: false,
+          ClassDeclaration: false,
+          ArrowFunctionExpression: false,
+          FunctionExpression: false
+        }
+      }
+    ],
+    'no-shadow': 'error',
+    complexity: ['error', 10],
+    'no-empty': 'error',
+    'import/order': [
+      'error',
+      {
+        groups: [
+          ['builtin', 'external', 'internal', 'parent', 'sibling', 'index']
+        ]
+      }
+    ],
+    'immutable/no-let': 2,
+    'immutable/no-this': 2,
+    'max-lines': ['error', 350],
+    'react-native/no-unused-styles': 2,
+    'react-native/split-platform-components': 2,
+    'react-native/no-inline-styles': 2,
+    'react-native/no-color-literals': 2,
+    'react-native/no-raw-text': 2,
+    'react-native/no-single-element-style-arrays': 2,
+    'fp/no-mutation': [
+      'error',
+      {
+        exceptions: [{ property: 'propTypes' }, { property: 'defaultProps' }]
+      }
+    ],
+    'fp/no-nil': 0,
+    'fp/no-unused-expression': 0
   },
-  "settings": {
-    "import/resolver": {
-      "node": {
-        "app": "./app",
-        "context": "app",
-        "resolve": {
-          "alias": {
-            "@assets": "./app/assets",
-            "@components": "./app/components",
-            "@containers": "./app/containers",
-            "@config": "./app/config",
-            "@navigators": "./app/navigators",
-            "@services": "./app/services",
-            "@themes": "./app/themes",
-            "@utils": "./app/utils"
+  settings: {
+    'import/resolver': {
+      node: {
+        app: './app',
+        context: 'app',
+        resolve: {
+          alias: {
+            '@assets': './app/assets',
+            '@components': './app/components',
+            '@containers': './app/containers',
+            '@config': './app/config',
+            '@navigators': './app/navigators',
+            '@services': './app/services',
+            '@themes': './app/themes',
+            '@utils': './app/utils'
           },
-          "paths": ["app"],
-          "modules": ["app", 'node_modules'],
-          "extensions": ['.js', '.jsx', '.json', '.coffee', '.cjsx'],
+          paths: ['app'],
+          modules: ['app', 'node_modules'],
+          extensions: ['.js', '.jsx', '.json', '.coffee', '.cjsx']
         }
       }
     }
   }
-}
+};

.gitignore

@@ -61,3 +61,5 @@ buck-out/
 .expo/
 web-build/
 dist/
+ios
+android

App.js

@@ -12,9 +12,7 @@ if (!window.Intl) {
   })
     .then(() => Promise.all([import('intl/locale-data/jsonp/en.js')]))
     .then(() => AppRegistry.registerComponent(appName, () => App))
-    .catch(err => {
-      throw err;
-    });
+    .catch(alert);
 } else {
   AppRegistry.registerComponent(appName, () => App);
 }

app.json

@@ -19,6 +19,9 @@
     },
     "android": {
       "package": "com.wednesdaysolutions.rntws"
+    },
+    "ios": {
+      "bundleIdentifier": "com.wednesdaysolutions.rntws"
     }
   }
 }

app/components/atoms/LanguageProvider/actions.js

@@ -1,14 +1,13 @@
-/*
- *
- * LanguageProvider actions
- *
- */
-
 import { CHANGE_LOCALE } from './constants';
 
+/**
+ * Changes the locale/language of the application.
+ * @param {string} languageLocale - The new locale/language to set.
+ * @returns {object} An action object with type 'CHANGE_LOCALE' and the new locale/language.
+ */
 export function changeLocale(languageLocale) {
   return {
     type: CHANGE_LOCALE,
     locale: languageLocale
   };
 }

app/components/atoms/LanguageProvider/index.js

@@ -14,6 +14,14 @@ import { IntlProvider } from 'react-intl';
 
 import { makeSelectLocale } from './selectors';
 
+/**
+ * Provides internationalization (i18n) support by wrapping components with an IntlProvider.
+ * @param {object} props - The props object containing component properties.
+ * @param {string} props.locale - The locale/language code for internationalization.
+ * @param {object} props.messages - An object containing locale-specific message translations.
+ * @param {React.ReactNode} props.children - The child elements/components to be wrapped and rendered.
+ * @returns {React.ReactNode} A JSX element wrapping the provided child components with IntlProvider.
+ */
 export function LanguageProvider(props) {
   return (
     <IntlProvider
@@ -36,6 +44,11 @@ const mapStateToProps = createSelector(makeSelectLocale(), locale => ({
   locale
 }));
 
+/**
+ * Generates and returns an object containing action dispatch functions.
+ * @param {function} dispatch - The Redux store's dispatch function.
+ * @returns {object} An object containing action dispatch functions wrapped for use in components.
+ */
 function mapDispatchToProps(dispatch) {
   return {
     dispatch

app/components/atoms/LanguageProvider/reducer.js

@@ -22,12 +22,11 @@ export const initialState = fromJS({
 /* eslint-disable default-case, no-param-reassign */
 export const languageProviderReducer = (state = initialState, action) =>
   produce(state, (/* draft */) => {
-    switch (action.type) {
-      case languageProviderTypes.CHANGE_LOCALE:
-        return state.set('locale', action.locale);
-      default:
-        return state;
-    }
+    const actionType = {
+      [languageProviderTypes.CHANGE_LOCALE]: () =>
+        state.set('locale', action.locale)
+    };
+    return action.type in actionType ? actionType[action.type]() : state;
   });
 
 export default languageProviderReducer;

app/components/atoms/LanguageProvider/tests/action.test.js

@@ -0,0 +1,15 @@
+import { changeLocale } from '../actions';
+import { CHANGE_LOCALE } from '../constants';
+
+// Test suite for the changeLocale action creator
+describe('changeLocale action creator', () => {
+  it('should create an action to change the locale', () => {
+    const languageLocale = 'en';
+    const expectedAction = {
+      type: CHANGE_LOCALE,
+      locale: languageLocale
+    };
+    const action = changeLocale(languageLocale);
+    expect(action).toEqual(expectedAction);
+  });
+});

app/components/atoms/LanguageProvider/tests/index.test.js

@@ -1,16 +1,19 @@
 import React from 'react';
-import 'react-native';
 import { render } from '@testing-library/react-native';
 import { Provider } from 'react-redux';
 import T from '@atoms/T';
 import createStore from 'app/rootReducer';
 import { translationMessages } from 'app/i18n';
 import { renderWithIntl } from '@utils/testUtils';
 import ConnectedLanguageProvider, { LanguageProvider } from '../index';
-
+import { Text } from 'react-native';
 describe('<LanguageProvider /> container tests', () => {
   it('should render its children', () => {
-    const children = <h1>Test</h1>;
+    const children = (
+      <h1>
+        <Text>Test</Text>
+      </h1>
+    );
     const container = renderWithIntl(
       <LanguageProvider messages={translationMessages} locale="en">
         {children}
@@ -19,16 +22,10 @@ describe('<LanguageProvider /> container tests', () => {
     expect(container.firstChild).not.toBeNull();
   });
 });
-
+const setupReduxStore = () => ({ reduxStore: createStore().store });
 describe('<ConnectedLanguageProvider /> container tests', () => {
-  let reduxStore;
-
-  beforeAll(() => {
-    const { store } = createStore();
-    reduxStore = store;
-  });
-
   it('should render the default language messages', () => {
+    const { reduxStore } = setupReduxStore();
     const { queryByText } = render(
       <Provider store={reduxStore}>
         <ConnectedLanguageProvider messages={translationMessages}>

app/components/atoms/LanguageProvider/tests/reducer.test.js

@@ -3,26 +3,23 @@ import {
   languageProviderTypes,
   languageProviderReducer
 } from '../reducer';
-
+const setupMockedState = () => ({ mockedState: initialState });
 /* eslint-disable default-case, no-param-reassign */
 describe('Tests for LanguageProvider actions', () => {
-  let mockedState;
-  beforeEach(() => {
-    mockedState = initialState;
-  });
-
   it('returns the initial state', () => {
+    const { mockedState } = setupMockedState();
     expect(languageProviderReducer(undefined, {})).toEqual(mockedState);
   });
 
   it('changes the locale', () => {
+    const { mockedState } = setupMockedState();
     const locale = 'de';
-    mockedState = mockedState.set('locale', locale);
+    const UpdateMockedState = mockedState.set('locale', locale);
     expect(
       languageProviderReducer(undefined, {
         type: languageProviderTypes.CHANGE_LOCALE,
         locale
       })
-    ).toEqual(mockedState);
+    ).toEqual(UpdateMockedState);
   });
 });

app/components/molecules/CharacterWithQuote/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components/native';
-import { get } from 'lodash';
+import get from 'lodash/get';
 import PropTypes from 'prop-types';
 import { fonts } from '@themes';
 import T from '@atoms/T';
@@ -17,13 +17,22 @@ const CharacterImage = styled.Image`
   margin: 0 auto;
 `;
 
+/**
+ * A component that displays a character's information along with their quote.
+ * @param {object} props - The props object containing component properties.
+ * @param {object} props.user - The user object representing the character's details.
+ * @param {string} props.user.character - The character's name.
+ * @param {string} props.user.image - The URL of the character's image.
+ * @param {string} props.user.quote - The character's quote.
+ * @returns {React.ReactNode} JSX elements displaying the character's information and quote.
+ */
 function CharacterWithQuote({ user }) {
   return (
     <>
       <Result
         id="wednesday_lover"
         values={{
-          username: get(user, 'character') || 'character'
+          username: get(user, 'character', 'character')
         }}
       />
       <Result id="because" />