Pull data down to UI

src/data/apiClient.js

@@ -1,3 +1,4 @@
+import _ from 'lodash';
 import { getAuthenticatedAPIClient } from '@edx/frontend-auth';
 
 import { configuration } from '../config';
@@ -15,14 +16,39 @@ const apiClient = getAuthenticatedAPIClient({
   csrfCookieName: configuration.CSRF_COOKIE_NAME,
 });
 
+const clientServerKeyMap = {
+  bio: 'bio',
+  socialLinks: 'social_links',
+  country: 'country',
+  education: 'level_of_education',
+  fullName: 'name',
+  username: 'username',
+  profileImage: 'profile_image',
+  dateJoined: 'date_joined',
+  languageProficiencies: 'language_proficiencies',
+  accountPrivacy: 'account_privacy',
+};
+
+const serverClientKeyMap = _.invert(clientServerKeyMap);
 
 export function getPreferences(username) {
   const url = `${lmsBaseUrl}/api/user/v1/preferences/${username}`;
 
   return new Promise((resolve, reject) => {
     apiClient.get(url)
-      .then((response) => {
-        resolve(response.data);
+      .then(({ data }) => {
+        const createPathsAndTransformKeys = (acc, key) => {
+          _.set(
+            acc,
+            key.split('.').map(pathKey => serverClientKeyMap[pathKey] || pathKey),
+            data[key],
+          );
+          return acc;
+        };
+
+        const preferences = Object.keys(data).reduce(createPathsAndTransformKeys, {});
+
+        resolve(preferences);
       })
       .catch((error) => {
         reject(error);

src/data/reducers/PreferencesReducer.js

@@ -0,0 +1,66 @@
+import {
+  FETCH_PREFERENCES,
+  SAVE_PREFERENCES,
+} from '../../actions/preferences';
+
+
+const initialState = {
+  fetchPreferencesState: null,
+  savePreferencesState: null,
+};
+
+
+const profile = (state = initialState, action) => {
+  switch (action.type) {
+    case FETCH_PREFERENCES.BEGIN:
+      return {
+        ...state,
+        fetchPreferencesState: 'pending',
+      };
+    case FETCH_PREFERENCES.SUCCESS:
+      return {
+        ...state,
+        fetchPreferencesState: 'complete',
+        ...action.preferences,
+      };
+    case FETCH_PREFERENCES.FAILURE:
+      return {
+        ...state,
+        fetchPreferencesState: 'error',
+      };
+    case FETCH_PREFERENCES.RESET:
+      return {
+        ...state,
+        fetchPreferencesState: null,
+        error: null,
+      };
+
+    case SAVE_PREFERENCES.BEGIN:
+      return {
+        ...state,
+        savePreferencesState: 'pending',
+      };
+    case SAVE_PREFERENCES.SUCCESS:
+      return {
+        ...state,
+        savePreferencesState: 'complete',
+        ...action.preferences,
+      };
+    case SAVE_PREFERENCES.FAILURE:
+      return {
+        ...state,
+        savePreferencesState: 'error',
+      };
+    case SAVE_PREFERENCES.RESET:
+      return {
+        ...state,
+        savePreferencesState: null,
+        error: null,
+      };
+
+    default:
+      return state;
+  }
+};
+
+export default profile;

src/data/reducers/ProfilePageReducer.js

@@ -5,8 +5,6 @@ import {
   EDITABLE_FIELD_CLOSE,
   EDITABLE_FIELD_OPEN,
   FETCH_PROFILE,
-  FETCH_PREFERENCES,
-  SAVE_PREFERENCES,
 } from '../../actions/profile';
 
 const initialState = {
@@ -15,8 +13,6 @@ const initialState = {
   savePhotoState: null,
   currentlyEditingField: null,
   profile: {},
-  fetchPreferencesState: null,
-  savePreferencesState: null,
 };
 
 const profilePage = (state = initialState, action) => {
@@ -116,53 +112,6 @@ const profilePage = (state = initialState, action) => {
         error: null,
       };
 
-    case FETCH_PREFERENCES.BEGIN:
-      return {
-        ...state,
-        fetchPreferencesState: 'pending',
-      };
-    case FETCH_PREFERENCES.SUCCESS:
-      return {
-        ...state,
-        fetchPreferencesState: 'complete',
-        preferences: action.preferences,
-      };
-    case FETCH_PREFERENCES.FAILURE:
-      return {
-        ...state,
-        fetchPreferencesState: 'error',
-      };
-    case FETCH_PREFERENCES.RESET:
-      return {
-        ...state,
-        fetchPreferencesState: null,
-        error: null,
-      };
-
-
-    case SAVE_PREFERENCES.BEGIN:
-      return {
-        ...state,
-        savePreferencesState: 'pending',
-      };
-    case SAVE_PREFERENCES.SUCCESS:
-      return {
-        ...state,
-        savePreferencesState: 'complete',
-        preferences: action.preferences,
-      };
-    case SAVE_PREFERENCES.FAILURE:
-      return {
-        ...state,
-        savePreferencesState: 'error',
-      };
-    case SAVE_PREFERENCES.RESET:
-      return {
-        ...state,
-        savePreferencesState: null,
-        error: null,
-      };
-
     default:
       return state;
   }

src/data/reducers/RootReducer.js

@@ -1,6 +1,7 @@
 import { combineReducers } from 'redux';
 import { userAccount } from '@edx/frontend-auth';
 import profilePage from './ProfilePageReducer';
+import preferences from './PreferencesReducer';
 
 const identityReducer = (state) => {
   const newState = { ...state };
@@ -13,6 +14,7 @@ const rootReducer = combineReducers({
   authentication: identityReducer,
   userAccount,
   profilePage,
+  preferences,
 });
 
 export default rootReducer;