[WIP] Add get languages endpoint

src/actions/actionTypes.js

@@ -41,5 +41,9 @@ export const REGISTRATION_SUCCESS = 'REGISTRATION_SUCCESS';
 export const REQUEST_REGISTRATION = 'REQUEST_REGISTRATION';
 export const REGISTRATION_FAILURE = 'REGISTRATION_FAILURE';
 
+export const REQUEST_LANGUAGES = 'REQUEST_LANGUAGES';
+export const GET_LANGUAGES_SUCCESS = 'GET_LANGUAGES_SUCCESS';
+export const GET_LANGUAGES_FAILURE = 'GET_LANGUAGES_FAILURE';
+
 export const CHECK_AUTH = 'CHECK_AUTH';
 export const SET_AUTH_TO_FALSE = 'SET_AUTH_TO_FALSE';

src/actions/languageActions.js

@@ -0,0 +1,61 @@
+import * as types from './actionTypes';
+import LanguageApi from '../api/languageApi';
+
+const languageApi = new LanguageApi();
+
+export function getLanguagesError(message) {
+    return {
+        type: types.GET_LANGUAGES_FAILURE,
+        isFetching: false,
+        isAuthenticated: false,
+        message
+    };
+}
+
+export function requestLanguages() {
+    return {
+        type: types.REQUEST_LANGUAGES,
+        isFetching: true,
+        languages: []
+    };
+}
+
+export function getLanguagesSuccess(languages) {
+    return {
+        type: types.GET_LANGUAGES_SUCCESS,
+        isFetching: false,
+        languages
+    };
+}
+
+export function getLanguages() {
+    return async (dispatch, getState) => {
+        try {
+            dispatch(requestLanguages());
+
+            const languages = await languageApi.getAllLanguages();
+
+            dispatch(getLanguagesSuccess(languages));
+        } catch (e) {
+            dispatch(getLanguagesError(e.message));
+        }
+    };
+}
+
+export function getLanguageNameByCode(code) {
+    return async (dispatch, getState) => {
+        try {
+            const languages = getState().languages.languages;
+            for (let i = 0; i < languages.languages.length; i++) {
+                const lang = languages.languages[i];
+
+                if (lang.code === code) {
+                    return lang.name;
+                }
+            }
+
+            return null;
+        } catch (e) {
+        }
+    };
+}

src/actions/userActions.js

@@ -82,10 +82,9 @@ export function registeryError(message) {
     };
 }
 
-export function requestUpdateUser(creds) {
+export function requestUpdateUser() {
     return {
         type: types.REQUEST_UPDATE_USER,
-        creds,
         isFetching: true,
         requiresAuth: true
     };
@@ -95,8 +94,7 @@ export function updateUserSuccess(user) {
     return {
         type: types.UPDATE_USER_SUCCESS,
         user,
-        isFetching: false,
-        requiresAuth: true
+        isFetching: false
     };
 }
 

src/api/languageApi.js

@@ -0,0 +1,9 @@
+import Api from './api';
+
+class LanguageApi extends Api {    
+    async getAllLanguages() {
+        return await this.request(null, 'GET', `${this.basicUrl}/language`, true);
+    }
+}
+
+export default LanguageApi;

src/containers/ChecklistItemBlock.js

@@ -47,7 +47,6 @@ class ChecklistItemBlock extends React.Component {
 
     handleShare(event) {
         event.stopPropagation();
-        console.log('Share Checklist', this.props.checklist);
     }
 
     handleOkClick(event) {

src/containers/LanguageDialog.js

@@ -9,7 +9,7 @@ import FormLabel from '@material-ui/core/FormLabel';
 import FormGroup from '@material-ui/core/FormGroup';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import Checkbox from '../common/components/Checkbox';
-import { SupportedLanguages } from '../utils/enums';
+import Spinner from '../common/components/Spinner';
 import { connect } from 'react-redux';
 import * as userActions from '../actions/userActions';
 import { bindActionCreators } from 'redux';
@@ -18,104 +18,54 @@ import { withStyles } from '@material-ui/core/styles';
 const styles = theme => ({
     dialogContent: {
         width: '400px',
-        height: '400px'
+        maxHeight: '400px'
     }
 });
 
 class LanguageDialog extends React.Component {
-    constructor(props) {
-        super();
+    constructor(props, context) {
+        super(props, context);
 
         this.state = {
-            languages: this.filterLanguages(new SupportedLanguages().languages, props.user.user.languages),
-            user: Object.assign({}, props.user.user)
+            user: Object.assign({}, this.props.user.user)
         };
 
-        this.filterLanguages = this.filterLanguages.bind(this);
+        this.originalLanguages = [...this.props.user.user.languages];
+
         this.handleCancelClick = this.handleCancelClick.bind(this);
         this.handleCheckboxChange = this.handleCheckboxChange.bind(this);
         this.handleOkClick = this.handleOkClick.bind(this);
         this.handleClose = this.handleClose.bind(this);
     }
 
-    filterLanguages(languages, userLanguages) {
-        return (
-            languages
-                .map(l => {
-                    return {
-                        name: l.name,
-                        code: l.code,
-                        checked: userLanguages.includes(l.code)
-                    };
-                })
-                // Sort Alphabetically
-                .sort((a, b) => {
-                    const nameA = a.name.toUpperCase();
-                    const nameB = b.name.toUpperCase();
-
-                    if (nameA < nameB) {
-                        return -1;
-                    }
-
-                    if (nameA > nameB) {
-                        return 1;
-                    }
-
-                    return 0;
-                })
-                // Checked at the top of the list
-                .sort((a, b) => {
-                    if (a.checked && !b.checked) {
-                        return -1;
-                    }
-                    if (!a.checked && b.checked) {
-                        return 1;
-                    }
-
-                    return 0;
-                })
-        );
-    }
-
     handleCancelClick() {
         this.props.onClose();
     }
 
-    handleCheckboxChange = languageName => event => {
-        const languages = [...this.state.languages];
+    handleCheckboxChange(selectedLanguage) {
+        return event => {
+            const user = Object.assign({}, this.props.user.user);
 
-        for (let i = 0; i < languages.length; i++) {
-            const language = languages[i];
+            if(user.languages.includes(selectedLanguage.code)) {
+                const index = user.languages.indexOf(selectedLanguage.code);
 
-            if (language.name === languageName) {
-                language.checked = event.target.checked;
-
-                break;
+                user.languages.splice(index, 1);
+            } else {
+                user.languages.push(selectedLanguage.code);
             }
-        }
-
-        this.setState({
-            languages
-        });
-    };
-
-    handleOkClick(event) {
-        const user = Object.assign({}, this.state.user);
-        const languages = [...this.state.languages];
-        const langCodes = languages.filter(l => l.checked).map(l => l.code);
-
-        if (langCodes.length !== user.languages.length || !langCodes.every(l => user.languages.includes(l))) {
-            user.languages = langCodes;
-
-            this.props.actions.updateUser(user);
 
             this.setState({
-                languages: this.filterLanguages(languages, user.languages),
                 user
             });
+        };
+    }
 
+    handleOkClick(event) {
+        if (isArraysEqual(this.originalLanguages, this.state.user.languages)) {
             this.props.onClose();
         } else {
+            this.props.userActions.updateUser(this.state.user);
+
             this.props.onClose();
         }
     }
@@ -139,19 +89,22 @@ class LanguageDialog extends React.Component {
                 <DialogContent className={classes.dialogContent}>
                     <FormLabel>Select language</FormLabel>
                     <FormGroup id="clsl-language-dialog-checkboxes">
-                        {this.state.languages.map(language => (
-                            <FormControlLabel
-                                value={language.name}
-                                key={language.name}
-                                label={language.name}
-                                control={
-                                    <Checkbox
-                                        handleChange={this.handleCheckboxChange(language.name)}
-                                        checked={language.checked}
-                                    />
-                                }
-                            />
-                        ))}
+                        {this.props.languages.isFetching
+                            ? (<Spinner size={100} thickness={2} />)
+                            : this.props.languages.languages.map(language => (
+                                <FormControlLabel
+                                    value={language.name}
+                                    key={language.name}
+                                    label={language.name}
+                                    control={
+                                        <Checkbox
+                                            handleChange={this.handleCheckboxChange(language)}
+                                            checked={this.state.user.languages.includes(language.code)}
+                                        />
+                                    }
+                                />
+                            ))
+                        }
                     </FormGroup>
                 </DialogContent>
                 <DialogActions>
@@ -169,16 +122,27 @@ class LanguageDialog extends React.Component {
 
 function mapStateToProps(state, ownProps) {
     return {
-        user: state.user
+        user: state.user,
+        languages: state.languages
     };
 }
 
 function mapDispatchToProps(dispatch) {
     return {
-        actions: bindActionCreators(userActions, dispatch)
+        userActions: bindActionCreators(userActions, dispatch)
     };
 }
 
+function isArraysEqual(a, b) {
+    const arrayA = [...a];
+    const arrayB = [...b];
+
+    arrayA.sort();
+    arrayB.sort();
+
+    return arrayA.length === arrayB.length && arrayA.every((element, index) => element === arrayB[index]);
+}
+
 LanguageDialog.propTypes = {
     open: PropTypes.bool.isRequired,
     classes: PropTypes.object.isRequired,