Merge pull request #680 from openedx/mfrank/adding-skills-context

feat: added skills context

src/index.jsx

@@ -23,7 +23,7 @@ import Footer, { messages as footerMessages } from '@edx/frontend-component-foot
 
 import appMessages from './i18n';
 import { ProfilePage, NotFoundPage } from './profile';
-import { SkillsBuilder } from './skills';
+import { SkillsBuilder } from './skills-builder';
 import configureStore from './data/configureStore';
 
 import './index.scss';

src/skills-builder/SkillsBuilder.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { SkillsBuilderModal } from './skills-builder-modal';
+import { SkillsBuilderProvider } from './skills-builder-context';
+
+const SkillsBuilder = () => (
+  <SkillsBuilderProvider>
+    <SkillsBuilderModal />
+  </SkillsBuilderProvider>
+);
+
+export default SkillsBuilder;

src/skills-builder/data/actions.js

@@ -0,0 +1,9 @@
+import {
+  SET_GOAL,
+} from './constants';
+
+// eslint-disable-next-line import/prefer-default-export
+export const setGoal = (payload) => ({
+  type: SET_GOAL,
+  payload,
+});

src/skills-builder/data/constants.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export const SET_GOAL = 'SET_GOAL';

src/skills-builder/data/reducer.js

@@ -0,0 +1,21 @@
+import {
+  SET_GOAL,
+} from './constants';
+
+export function skillsReducer(state, action) {
+  switch (action.type) {
+    case SET_GOAL:
+      return {
+        ...state,
+        currentGoal: action.payload,
+      };
+    default:
+      return state;
+  }
+}
+
+export const skillsInitialState = {
+  currentGoal: '',
+};
+
+export default skillsReducer;

src/skills-builder/data/test/reducer.test.js

@@ -0,0 +1,20 @@
+import { skillsReducer } from '../reducer';
+import {
+  SET_GOAL,
+} from '../constants';
+
+describe('skillsReducer', () => {
+  const testState = {
+    currentGoal: '',
+  };
+
+  it('does not remove present data when SET_GOAL action is dispatched', () => {
+    const newSkillsPayload = 'test-goal';
+    const returnedState = skillsReducer(testState, { type: SET_GOAL, payload: newSkillsPayload });
+    const finalState = {
+      ...testState,
+      currentGoal: 'test-goal',
+    };
+    expect(returnedState).toEqual(finalState);
+  });
+});

src/skills-builder/skills-builder-context/SkillsBuilderProvider.jsx

@@ -0,0 +1,20 @@
+import React, { createContext, useReducer, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import reducer, { skillsInitialState } from '../data/reducer';
+
+export const SkillsBuilderContext = createContext();
+
+export const SkillsBuilderProvider = ({ children }) => {
+  const [state, dispatch] = useReducer(reducer, skillsInitialState);
+  const value = useMemo(() => ([state, dispatch]), [state]);
+
+  return (
+    <SkillsBuilderContext.Provider value={value}>
+      {children}
+    </SkillsBuilderContext.Provider>
+  );
+};
+
+SkillsBuilderProvider.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+};

src/skills-builder/skills-builder-context/index.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export { SkillsBuilderProvider, SkillsBuilderContext } from './SkillsBuilderProvider';

src/skills-builder/skills-builder-modal/SkillsBuilderModal.jsx

@@ -0,0 +1,63 @@
+import React, { useContext, useState } from 'react';
+import {
+  ActionRow,
+  Button,
+  Container,
+  FullscreenModal,
+  Form,
+} from '@edx/paragon';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import {
+  setGoal,
+} from '../data/actions';
+import messages from './messages';
+import { SkillsBuilderContext } from '../skills-builder-context';
+
+const SkillsBuilderModal = () => {
+  const onCloseHandle = () => {
+    window.history.back();
+  };
+
+  const [state, dispatch] = useContext(SkillsBuilderContext);
+
+  const [learnerGoal, setLearnerGoal] = useState('');
+
+  return (
+    <FullscreenModal
+      title="Skills Builder"
+      isOpen
+      onClose={onCloseHandle}
+      footerNode={(
+        <ActionRow>
+          <Button variant="tertiary">
+            <FormattedMessage {...messages.goBackButton} />
+          </Button>
+          <ActionRow.Spacer />
+          <Button>
+            <FormattedMessage {...messages.nextStepButton} />
+          </Button>
+        </ActionRow>
+          )}
+    >
+      <Container>
+        <h3>Your current goal: {state.currentGoal}</h3>
+        <br />
+        <Form.Group controlId="currentLearnerGoal">
+          <Form.Control
+            type="text"
+            floatingLabel="Goal"
+            value={learnerGoal}
+            onChange={(e) => setLearnerGoal(e.target.value)}
+          />
+        </Form.Group>
+        <Button
+          onClick={() => dispatch(setGoal(learnerGoal))}
+        >
+          Submit
+        </Button>
+      </Container>
+    </FullscreenModal>
+  );
+};
+
+export default SkillsBuilderModal;

src/skills-builder/skills-builder-modal/index.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as SkillsBuilderModal } from './SkillsBuilderModal';

src/skills/test/SkillsBuilder.test.jsx → src/skills-builder/test/SkillsBuilder.test.jsx

@@ -1,7 +1,7 @@
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { mount } from 'enzyme';
 import React from 'react';
-import SkillsBuilder from '../SkillsBuilder';
+import { SkillsBuilder } from '..';
 
 const SkillsBuilderWrapper = () => (
   <IntlProvider locale="en">