feat: add bookmarking for units (#11)

* feat: add bookmarking for units

* refactor: add redux for state management

src/data/course-blocks/api.js

@@ -0,0 +1,109 @@
+import { getConfig, camelCaseObject } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient, getAuthenticatedUser } from '@edx/frontend-platform/auth';
+
+export async function getCourseBlocks(courseUsageKey) {
+  const { username } = getAuthenticatedUser();
+  const url = new URL(`${getConfig().LMS_BASE_URL}/api/courses/v2/blocks/`);
+  url.searchParams.append('course_id', courseUsageKey);
+  url.searchParams.append('username', username);
+  url.searchParams.append('depth', 3);
+  url.searchParams.append('requested_fields', 'children,show_gated_sections');
+
+  const { data } = await getAuthenticatedHttpClient().get(url.href, {});
+  // Camelcase block objects (leave blockId keys alone)
+  const blocks = Object.entries(data.blocks).reduce((acc, [key, value]) => {
+    acc[key] = camelCaseObject(value);
+    return acc;
+  }, {});
+
+  // Next go through the blocksList again - now that we've added them all to the blocks map - and
+  // append a parent ID to every child found in every `children` list, using the blocks map to find
+  // them.
+  Object.values(blocks).forEach((block) => {
+    if (Array.isArray(block.children)) {
+      const parentId = block.id;
+      block.children.forEach((childBlockId) => {
+        blocks[childBlockId].parentId = parentId;
+      });
+    }
+  });
+
+  const processedData = camelCaseObject(data);
+  processedData.blocks = blocks;
+
+  return processedData;
+}
+
+export async function getSequenceMetadata(sequenceId) {
+  const { data } = await getAuthenticatedHttpClient()
+    .get(`${getConfig().LMS_BASE_URL}/api/courseware/sequence/${sequenceId}`, {});
+  const camelCasedData = camelCaseObject(data);
+
+  camelCasedData.items = camelCasedData.items.map((item) => {
+    const processedItem = camelCaseObject(item);
+    processedItem.contentType = processedItem.type;
+    delete processedItem.type;
+    return processedItem;
+  });
+
+  // Position comes back from the server 1-indexed. Adjust here.
+  camelCasedData.position = camelCasedData.position ? camelCasedData.position - 1 : 0;
+
+  return camelCasedData;
+}
+
+const getSequenceXModuleHandlerUrl = (courseUsageKey, sequenceId) => `${getConfig().LMS_BASE_URL}/courses/${courseUsageKey}/xblock/${sequenceId}/handler/xmodule_handler`;
+
+export async function updateSequencePosition(courseUsageKey, sequenceId, position) {
+  // Post data sent to this endpoint must be url encoded
+  // TODO: Remove the need for this to be the case.
+  // TODO: Ensure this usage of URLSearchParams is working in Internet Explorer
+  const urlEncoded = new URLSearchParams();
+  // Position is 1-indexed on the server and 0-indexed in this app. Adjust here.
+  urlEncoded.append('position', position + 1);
+  const requestConfig = {
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+  };
+
+  const { data } = await getAuthenticatedHttpClient().post(
+    `${getSequenceXModuleHandlerUrl(courseUsageKey, sequenceId)}/goto_position`,
+    urlEncoded.toString(),
+    requestConfig,
+  );
+
+  return data;
+}
+
+export async function getBlockCompletion(courseUsageKey, sequenceId, usageKey) {
+  // Post data sent to this endpoint must be url encoded
+  // TODO: Remove the need for this to be the case.
+  // TODO: Ensure this usage of URLSearchParams is working in Internet Explorer
+  const urlEncoded = new URLSearchParams();
+  urlEncoded.append('usage_key', usageKey);
+  const requestConfig = {
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+  };
+
+  const { data } = await getAuthenticatedHttpClient().post(
+    `${getSequenceXModuleHandlerUrl(courseUsageKey, sequenceId)}/get_completion`,
+    urlEncoded.toString(),
+    requestConfig,
+  );
+
+  if (data.complete) {
+    return true;
+  }
+
+  return false;
+}
+
+const bookmarksBaseUrl = `${getConfig().LMS_BASE_URL}/api/bookmarks/v1/bookmarks/`;
+
+export async function createBookmark(usageId) {
+  return getAuthenticatedHttpClient().post(bookmarksBaseUrl, { usage_id: usageId });
+}
+
+export async function deleteBookmark(usageId) {
+  const { username } = getAuthenticatedUser();
+  return getAuthenticatedHttpClient().delete(`${bookmarksBaseUrl}${username},${usageId}/`);
+}

src/data/course-blocks/slice.js

@@ -0,0 +1,134 @@
+/* eslint-disable no-param-reassign */
+import { createSlice } from '@reduxjs/toolkit';
+
+const blocksSlice = createSlice({
+  name: 'blocks',
+  initialState: {
+    fetchState: null,
+    root: null,
+    blocks: {},
+  },
+  reducers: {
+    /**
+     * fetchCourseBlocks
+     * This routine is responsible for fetching all blocks in a course.
+     */
+    fetchCourseBlocksRequest: (draftState) => {
+      draftState.fetchState = 'loading';
+    },
+    fetchCourseBlocksSuccess: (draftState, { payload }) => ({
+      ...payload,
+      fetchState: 'loaded',
+      loaded: true,
+    }),
+    fetchCourseBlocksFailure: (draftState) => {
+      draftState.fetchState = 'failed';
+    },
+
+    /**
+     * fetchBlockMetadata
+     * This routine is responsible for fetching metadata for any kind of
+     * block (sequential, vertical or any other block) and merging that
+     * data with what is in the store. Currently used for:
+     *
+     *  - fetchSequenceMetadata
+     *  - checkBlockCompletion (Vertical blocks)
+     */
+    fetchBlockMetadataRequest: (draftState, action) => {
+      const { blockId } = action.payload;
+      if (!draftState.blocks[blockId]) {
+        draftState.blocks[blockId] = {};
+      }
+      draftState.blocks[blockId].fetchState = 'loading';
+    },
+    fetchBlockMetadataSuccess: (draftState, action) => {
+      const { blockId, metadata, relatedBlocksMetadata } = action.payload;
+      if (!draftState.blocks[blockId]) {
+        draftState.blocks[blockId] = {};
+      }
+      draftState.blocks[blockId] = {
+        ...draftState.blocks[blockId],
+        ...metadata,
+        fetchState: 'loaded',
+        loaded: true,
+      };
+      if (relatedBlocksMetadata) {
+        relatedBlocksMetadata.forEach((blockMetadata) => {
+          if (draftState.blocks[blockMetadata.id] === undefined) {
+            draftState.blocks[blockMetadata.id] = {};
+          }
+          draftState.blocks[blockMetadata.id] = {
+            ...draftState.blocks[blockMetadata.id],
+            ...blockMetadata,
+          };
+        });
+      }
+    },
+    fetchBlockMetadataFailure: (draftState, action) => {
+      const { blockId } = action.payload;
+      if (!draftState.blocks[blockId]) {
+        draftState.blocks[blockId] = {};
+      }
+      draftState.blocks[blockId].fetchState = 'failure';
+    },
+
+    /**
+     * updateBlock
+     * This routine is responsible for CRUD operations on block properties.
+     * Updates to blocks are handled in an optimistic way – applying the update
+     * to the store at request time and then reverting it if the update fails.
+     *
+     * TODO: It may be helpful to add a flag to be optimistic or not.
+     *
+     * The update state of a property is added to the block in the store with
+     * a dynamic property name: ${propertyToUpdate}UpdateState.
+     * (e.g. bookmarkedUpdateState)
+     *
+     * Used in:
+     *  - saveSequencePosition
+     *  - addBookmark
+     *  - removeBookmark
+     */
+    updateBlockRequest: (draftState, action) => {
+      const { blockId, propertyToUpdate, updateValue } = action.payload;
+      const updateStateKey = `${propertyToUpdate}UpdateState`;
+      if (!draftState.blocks[blockId]) {
+        draftState.blocks[blockId] = {};
+      }
+      draftState.blocks[blockId][updateStateKey] = 'loading';
+      draftState.blocks[blockId][propertyToUpdate] = updateValue;
+    },
+    updateBlockSuccess: (draftState, action) => {
+      const { blockId, propertyToUpdate, updateValue } = action.payload;
+      const updateStateKey = `${propertyToUpdate}UpdateState`;
+      if (!draftState.blocks[blockId]) {
+        draftState.blocks[blockId] = {};
+      }
+      draftState.blocks[blockId][updateStateKey] = 'updated';
+      draftState.blocks[blockId][propertyToUpdate] = updateValue;
+    },
+    updateBlockFailure: (draftState, action) => {
+      const { blockId, propertyToUpdate, initialValue } = action.payload;
+      const updateStateKey = `${propertyToUpdate}UpdateState`;
+      if (!draftState.blocks[blockId]) {
+        draftState.blocks[blockId] = {};
+      }
+      draftState.blocks[blockId][updateStateKey] = 'failed';
+      draftState.blocks[blockId][propertyToUpdate] = initialValue;
+    },
+  },
+});
+
+export const {
+  fetchCourseBlocksRequest,
+  fetchCourseBlocksSuccess,
+  fetchCourseBlocksFailure,
+  fetchBlockMetadataRequest,
+  fetchBlockMetadataSuccess,
+  fetchBlockMetadataFailure,
+  updateBlockRequest,
+  updateBlockSuccess,
+  updateBlockFailure,
+} = blocksSlice.actions;
+
+export const { reducer } = blocksSlice;

src/data/course-blocks/thunks.js

@@ -0,0 +1,124 @@
+import {
+  fetchCourseBlocksRequest,
+  fetchCourseBlocksSuccess,
+  fetchCourseBlocksFailure,
+  fetchBlockMetadataRequest,
+  fetchBlockMetadataSuccess,
+  fetchBlockMetadataFailure,
+  updateBlockRequest,
+  updateBlockSuccess,
+  updateBlockFailure,
+} from './slice';
+import {
+  getCourseBlocks,
+  getSequenceMetadata,
+  getBlockCompletion,
+  updateSequencePosition,
+  createBookmark,
+  deleteBookmark,
+} from './api';
+
+export function fetchCourseBlocks(courseUsageKey) {
+  return async (dispatch) => {
+    dispatch(fetchCourseBlocksRequest(courseUsageKey));
+    try {
+      const courseBlocks = await getCourseBlocks(courseUsageKey);
+      dispatch(fetchCourseBlocksSuccess(courseBlocks));
+    } catch (error) {
+      dispatch(fetchCourseBlocksFailure(error));
+    }
+  };
+}
+
+export function fetchSequenceMetadata(sequenceBlockId) {
+  return async (dispatch) => {
+    dispatch(fetchBlockMetadataRequest({ blockId: sequenceBlockId }));
+    try {
+      const sequenceMetadata = await getSequenceMetadata(sequenceBlockId);
+      dispatch(fetchBlockMetadataSuccess({
+        blockId: sequenceBlockId,
+        metadata: sequenceMetadata,
+        relatedBlocksMetadata: sequenceMetadata.items,
+      }));
+    } catch (error) {
+      dispatch(fetchBlockMetadataFailure({ blockId: sequenceBlockId }, error));
+    }
+  };
+}
+
+export function checkBlockCompletion(courseUsageKey, sequenceId, unitId) {
+  return async (dispatch, getState) => {
+    const { courseBlocks } = getState();
+    if (courseBlocks.blocks[unitId].complete) {
+      return; // do nothing. Things don't get uncompleted after they are completed.
+    }
+    const commonPayload = { blockId: unitId, fetchType: 'completion' };
+    dispatch(fetchBlockMetadataRequest(commonPayload));
+    try {
+      const isComplete = await getBlockCompletion(courseUsageKey, sequenceId, unitId);
+      dispatch(fetchBlockMetadataSuccess({
+        ...commonPayload,
+        metadata: {
+          complete: isComplete,
+        },
+      }));
+    } catch (error) {
+      dispatch(fetchBlockMetadataFailure(commonPayload, error));
+    }
+  };
+}
+
+export function saveSequencePosition(courseUsageKey, sequenceId, position) {
+  return async (dispatch, getState) => {
+    const { courseBlocks } = getState();
+    const actionPayload = {
+      blockId: sequenceId,
+      propertyToUpdate: 'position',
+      updateValue: position,
+      initialValue: courseBlocks.blocks[sequenceId].position,
+    };
+    dispatch(updateBlockRequest(actionPayload));
+    try {
+      await updateSequencePosition(courseUsageKey, sequenceId, position);
+      dispatch(updateBlockSuccess(actionPayload));
+    } catch (error) {
+      dispatch(updateBlockFailure(actionPayload));
+    }
+  };
+}
+
+export function addBookmark(unitId) {
+  return async (dispatch) => {
+    const actionPayload = {
+      blockId: unitId,
+      propertyToUpdate: 'bookmarked',
+      updateValue: true,
+      initialValue: false,
+    };
+    dispatch(updateBlockRequest(actionPayload));
+    try {
+      await createBookmark(unitId);
+      dispatch(updateBlockSuccess(actionPayload));
+    } catch (error) {
+      dispatch(updateBlockFailure(actionPayload));
+    }
+  };
+}
+
+export function removeBookmark(unitId) {
+  return async (dispatch) => {
+    const actionPayload = {
+      blockId: unitId,
+      propertyToUpdate: 'bookmarked',
+      updateValue: false,
+      initialValue: true,
+    };
+    dispatch(updateBlockRequest(actionPayload));
+    try {
+      await deleteBookmark(unitId);
+      dispatch(updateBlockSuccess(actionPayload));
+    } catch (error) {
+      dispatch(updateBlockFailure(actionPayload));
+    }
+  };
+}

src/data/course-meta/api.js

@@ -0,0 +1,57 @@
+import { getConfig, camelCaseObject } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient, getAuthenticatedUser } from '@edx/frontend-platform/auth';
+
+export async function getCourseBlocks(courseUsageKey) {
+  const { username } = getAuthenticatedUser();
+  const url = new URL(`${getConfig().LMS_BASE_URL}/api/courses/v2/blocks/`);
+  url.searchParams.append('course_id', courseUsageKey);
+  url.searchParams.append('username', username);
+  url.searchParams.append('depth', 3);
+  url.searchParams.append('requested_fields', 'children,show_gated_sections');
+
+  const { data } = await getAuthenticatedHttpClient().get(url.href, {});
+  // Camelcase block objects (leave blockId keys alone)
+  const blocks = Object.entries(data.blocks).reduce((acc, [key, value]) => {
+    acc[key] = camelCaseObject(value);
+    return acc;
+  }, {});
+
+  // Next go through the blocksList again - now that we've added them all to the blocks map - and
+  // append a parent ID to every child found in every `children` list, using the blocks map to find
+  // them.
+  Object.values(blocks).forEach((block) => {
+    if (Array.isArray(block.children)) {
+      const parentId = block.id;
+      block.children.forEach((childBlockId) => {
+        blocks[childBlockId].parentId = parentId;
+      });
+    }
+  });
+
+  const processedData = camelCaseObject(data);
+  processedData.blocks = blocks;
+
+  return processedData;
+}
+
+export async function getCourseMetadata(courseUsageKey) {
+  const url = `${getConfig().LMS_BASE_URL}/api/courseware/course/${courseUsageKey}`;
+  const { data } = await getAuthenticatedHttpClient().get(url);
+  const processedData = camelCaseObject(data);
+  return processedData;
+}
+
+export async function getSequenceMetadata(sequenceId) {
+  const { data } = await getAuthenticatedHttpClient()
+    .get(`${getConfig().LMS_BASE_URL}/api/courseware/sequence/${sequenceId}`, {});
+  const camelCasedData = camelCaseObject(data);
+
+  camelCasedData.items = camelCasedData.items.map((item) => {
+    const processedItem = camelCaseObject(item);
+    processedItem.contentType = processedItem.type;
+    delete processedItem.type;
+    return processedItem;
+  });
+
+  return camelCasedData;
+}

src/data/course-meta/slice.js

@@ -0,0 +1,32 @@
+/* eslint-disable no-param-reassign */
+import { createSlice } from '@reduxjs/toolkit';
+
+const courseMetaSlice = createSlice({
+  name: 'course-meta',
+  initialState: {
+    fetchState: null,
+  },
+  reducers: {
+    fetchCourseMetadataRequest: (draftState) => {
+      draftState.fetchState = 'loading';
+    },
+    fetchCourseMetadataSuccess: (draftState, { payload }) => ({
+      fetchState: 'loaded',
+      name: payload.name,
+      number: payload.number,
+      org: payload.org,
+      tabs: payload.tabs,
+    }),
+    fetchCourseMetadataFailure: (draftState) => {
+      draftState.fetchState = 'failed';
+    },
+  },
+});
+
+export const {
+  fetchCourseMetadataRequest,
+  fetchCourseMetadataSuccess,
+  fetchCourseMetadataFailure,
+} = courseMetaSlice.actions;
+
+export const { reducer } = courseMetaSlice;

src/data/course-meta/thunks.js

@@ -0,0 +1,21 @@
+/* eslint-disable import/prefer-default-export */
+import {
+  fetchCourseMetadataRequest,
+  fetchCourseMetadataSuccess,
+  fetchCourseMetadataFailure,
+} from './slice';
+import {
+  getCourseMetadata,
+} from './api';
+
+export function fetchCourseMetadata(courseUsageKey) {
+  return async (dispatch) => {
+    dispatch(fetchCourseMetadataRequest({ courseUsageKey }));
+    try {
+      const courseMetadata = await getCourseMetadata(courseUsageKey);
+      dispatch(fetchCourseMetadataSuccess(courseMetadata));
+    } catch (error) {
+      dispatch(fetchCourseMetadataFailure(error));
+    }
+  };
+}