@coorpacademy/app-review 0.0.13 → 0.0.14-alpha.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coorpacademy/app-review",
-  "version": "0.0.13",
+  "version": "0.0.14-alpha.3+31066cb07",
   "description": "",
   "type": "module",
   "engines": {
@@ -17,7 +17,7 @@
     "clean:commonjs": "rm -rf lib",
     "clean:es": "rm -rf es",
     "clean": "concurrently \"npm run clean:commonjs\" \"npm run clean:es\"",
-    "test:unit": "echo @todo setup unit tests"
+    "test:unit": "ava --config ava.config.cjs"
   },
   "author": "CoorpAcademy",
   "files": [
@@ -37,16 +37,21 @@
   },
   "dependencies": {
     "@coorpacademy/components": "10.19.5",
+    "cross-fetch": "^3.1.5",
+    "jwt-decode": "^3.1.2",
     "react": "^17.0.2",
     "react-native": "0.68.1",
     "react-redux": "^8.0.1",
     "redux": "^4.2.0"
   },
   "devDependencies": {
+    "@ava/typescript": "^3.0.1",
     "@storybook/react-native": "^5.3.25",
+    "ava": "^4.2.0",
     "chalk": "^5.0.1",
     "concurrently": "^5.2.0",
     "connect-history-api-fallback": "^1.6.0",
+    "dotenv": "^16.0.1",
     "esbuild": "^0.14.39",
     "esbuild-css-modules-plugin": "^2.2.16",
     "esbuild-plugin-svgr": "^1.0.1",
@@ -55,5 +60,5 @@
     "redux-devtools-extension": "^2.13.9",
     "typescript": "^4.6.4"
   },
-  "gitHead": "ba829b703d71b8606e85f3cd6fb932049525e684"
+  "gitHead": "31066cb07260432d142efe025060a4a7cdae2b74"
 }

package/readme.md

@@ -14,6 +14,22 @@ npm run static
 
 (This script is generated by lerna to publish the static web app)
 
+## unit tests
+
+(requirements: duplicate `.env.sample` to `.env` and ask for the tokens)
+
+Open a terminal and run a compilation in watch mode:
+
+```sh
+npm run build:es -- --watch
+```
+
+Now open a 2nd terminal and run ava in watch mode:
+
+```sh
+npx ava --watch
+```
+
 ## dependencies notes
 
 `react-native` must be the same version on this package and the rootApp
@@ -25,3 +41,10 @@ npm run static
 ### tmp notes
 
 export: <https://stackoverflow.com/a/70020984/959219>
+
+css modules:
+
+- <https://github.com/evanw/esbuild/issues/20>
+- <https://github.com/indooorsman/esbuild-css-modules-plugin/issues/35>
+- <https://github.com/princed/postcss-modules-values-replace>
+- <https://github.com/CoorpAcademy/coorpacademy-lambda/blob/master/teams/postcss.config.js#L4>

package/src/actions/courses.ts

@@ -0,0 +1,11 @@
+export const RECEIVED_COURSE = '@@api/RECEIVED_COURSE';
+
+export type $RECEIVED_COURSE = {
+  type: '@@api/RECEIVED_COURSE';
+  payload: string;
+};
+
+export const receivedCourse = (course: any): $RECEIVED_COURSE => ({
+  type: RECEIVED_COURSE,
+  payload: course
+});

package/src/actions/index.ts

@@ -1 +1,9 @@
+import {$RECEIVED_COURSE} from './courses';
+import {$NAVIGATE_BACK, $NAVIGATE_TO, $START_APP} from './navigation';
+import {$STORE_TOKEN} from './token';
+
+export * from './courses';
 export * from './navigation';
+export * from './token';
+
+export type Action = $START_APP | $STORE_TOKEN | $NAVIGATE_BACK | $NAVIGATE_TO | $RECEIVED_COURSE;

package/src/actions/navigation.ts

@@ -1,7 +1,9 @@
 import {ActionCreator} from 'redux';
+import {AppOptions} from '..';
 
 export const NAVIGATE_TO = '@@navigation/NAVIGATE_TO';
 export const NAVIGATE_BACK = '@@navigation/NAVIGATE_BACK';
+export const START_APP = '@@navigation/START_APP';
 
 export type $NAVIGATE_TO = {
   type: '@@navigation/NAVIGATE_TO';
@@ -12,6 +14,11 @@ export type $NAVIGATE_BACK = {
   type: '@@navigation/NAVIGATE_BACK';
 };
 
+export type $START_APP = {
+  type: '@@navigation/START_APP';
+  payload: AppOptions;
+};
+
 export const navigateTo: ActionCreator<$NAVIGATE_TO> = (newPath: string) => ({
   type: NAVIGATE_TO,
   payload: newPath
@@ -20,3 +27,8 @@ export const navigateTo: ActionCreator<$NAVIGATE_TO> = (newPath: string) => ({
 export const navigateBack: ActionCreator<$NAVIGATE_BACK> = () => ({
   type: NAVIGATE_BACK
 });
+
+export const startApp = (options: AppOptions): $START_APP => ({
+  type: START_APP,
+  payload: options
+});

package/src/actions/token.ts

@@ -0,0 +1,11 @@
+export const STORE_TOKEN = '@@token/STORE_TOKEN';
+
+export type $STORE_TOKEN = {
+  type: '@@token/STORE_TOKEN';
+  payload: string;
+};
+
+export const storeToken = (token: string): $STORE_TOKEN => ({
+  type: STORE_TOKEN,
+  payload: token
+});

package/src/configure-store.ts

@@ -4,9 +4,15 @@ import {composeWithDevTools} from 'redux-devtools-extension';
 
 import rootReducer from './reducers';
 
+import {State as NavigationState} from './reducers/navigation';
+import {State as TokenState} from './reducers/token';
+import onStartApp from './middlewares/on-start-app';
+
 const preloadedState = undefined;
 
-export default function configureStore(services) {
+// -----------------------------------------------------------------------------
+
+export default function configureStore() {
   const _compose =
     process.env.NODE_ENV !== 'production'
       ? composeWithDevTools({
@@ -16,8 +22,15 @@ export default function configureStore(services) {
         })
       : compose;
 
-  const enhancer = _compose(applyMiddleware(thunk));
+  const enhancer = _compose(applyMiddleware(thunk, onStartApp));
   const store = createStore(rootReducer, preloadedState, enhancer);
 
   return store;
 }
+
+// -----------------------------------------------------------------------------
+
+export type StoreState = {
+  navigation: NavigationState;
+  token: TokenState;
+};

package/src/index.tsx

@@ -3,7 +3,7 @@ import {connect, Provider} from 'react-redux';
 import AppReviewRootView from '@coorpacademy/components/es/template/app-review/root-view/root-view';
 
 import configureStore from './configure-store';
-import {navigateTo, navigateBack} from './actions/navigation';
+import {navigateTo, navigateBack, startApp} from './actions/navigation';
 import {getCurrentViewName} from './reducers/navigation';
 
 // -----------------------------------------------------------------------------
@@ -17,11 +17,12 @@ const App = connect(mapStateToProps, mapDispatchToProps)(AppReviewRootView);
 
 // -----------------------------------------------------------------------------
 
-const AppRevision = ({services}) => {
+const AppRevision = ({options}: Props) => {
   const [store, setStore] = useState(null);
 
   useEffect(() => {
-    const store = configureStore(services);
+    const store = configureStore();
+    store.dispatch(startApp(options));
     setStore(store);
   }, []);
 
@@ -36,4 +37,12 @@ const AppRevision = ({services}) => {
 
 // -----------------------------------------------------------------------------
 
+type Props = {options: AppOptions};
+
+export type AppOptions = {
+  token: string;
+  theme?: any;
+  translations?: any;
+};
+
 export default AppRevision;

package/src/middlewares/on-start-app.ts

@@ -0,0 +1,30 @@
+import fetch from 'cross-fetch';
+import type {Middleware} from 'redux';
+import {Dispatch} from 'redux';
+
+import {Action, receivedCourse, START_APP, storeToken} from '../actions';
+import {StoreState} from '../configure-store';
+import fetchCourse from '../services/fetch-demo';
+
+const onStartApp: Middleware<{}, StoreState, Dispatch<Action>> = ({dispatch}) => next => (
+  action: Action
+) => {
+  if (action.type === START_APP) {
+    const {token} = action.payload;
+    dispatch(storeToken(token));
+
+    // --------------
+    // demo service
+
+    const language = 'fr';
+    const universalRef = 'dis_xxx15';
+
+    fetchCourse(token, language, universalRef).then(course => {
+      dispatch(receivedCourse(course));
+    });
+  }
+
+  return next(action);
+};
+
+export default onStartApp;

package/src/reducers/courses.ts

@@ -0,0 +1,22 @@
+import {$RECEIVED_COURSE, RECEIVED_COURSE} from '../actions';
+
+// -----------------------------------------------------------------------------
+
+export type State = Array<any>;
+export const initialState: State = [];
+
+// -----------------------------------------------------------------------------
+
+const reducer = (state: State = initialState, action: $RECEIVED_COURSE): State => {
+  switch (action.type) {
+    case RECEIVED_COURSE: {
+      return [...state, action.payload];
+    }
+    default:
+      return state;
+  }
+};
+
+// -----------------------------------------------------------------------------
+
+export default reducer;

package/src/reducers/index.ts

@@ -1,8 +1,13 @@
 import {combineReducers} from 'redux';
+
+import courses from './courses';
 import navigation from './navigation';
+import token from './token';
 
 const rootReducer = combineReducers({
-  navigation
+  courses,
+  navigation,
+  token
 });
 
 export default rootReducer;

package/src/reducers/navigation.ts

@@ -1,10 +1,13 @@
 import {NAVIGATE_BACK, NAVIGATE_TO} from '../actions/navigation';
 import type {$NAVIGATE_TO, $NAVIGATE_BACK} from '../actions/navigation';
 
-export type State = Array<string>;
+// -----------------------------------------------------------------------------
 
+export type State = Array<string>;
 export const initialState: State = ['home'];
 
+// -----------------------------------------------------------------------------
+
 const reducer = (state: State = initialState, action: $NAVIGATE_TO | $NAVIGATE_BACK): State => {
   switch (action.type) {
     case NAVIGATE_TO: {
@@ -20,5 +23,10 @@ const reducer = (state: State = initialState, action: $NAVIGATE_TO | $NAVIGATE_B
   }
 };
 
+// -----------------------------------------------------------------------------
+
 export const getCurrentViewName = appState => appState.navigation[appState.navigation.length - 1];
+
+// -----------------------------------------------------------------------------
+
 export default reducer;

package/src/reducers/token.ts

@@ -0,0 +1,26 @@
+import {$STORE_TOKEN, STORE_TOKEN} from '../actions';
+
+// -----------------------------------------------------------------------------
+
+export type State = string;
+export const initialState: State = null;
+
+// -----------------------------------------------------------------------------
+
+const reducer = (state: State = initialState, action: $STORE_TOKEN): State => {
+  switch (action.type) {
+    case STORE_TOKEN: {
+      return action.payload;
+    }
+    default:
+      return state;
+  }
+};
+
+// -----------------------------------------------------------------------------
+
+export const getToken = appState => appState.token;
+
+// -----------------------------------------------------------------------------
+
+export default reducer;

package/src/services/fetch-demo.test.ts

@@ -0,0 +1,15 @@
+import test from 'ava';
+import {fetchCourse as _fetchCourse} from './fetch-demo.js';
+import {okJSONResponse} from './fetch.test';
+import dotenv from 'dotenv';
+dotenv.config();
+
+test('should fetch a demo course with mobile-staging dev token', async t => {
+  const token = 'foo';
+  const language = 'fr';
+  const universalRef = 'bar';
+
+  const fetchCourse = _fetchCourse(okJSONResponse({title: 'Digital IQ test'}));
+  const course = await fetchCourse(token, language, universalRef);
+  t.is(course.title, 'Digital IQs test');
+});

package/src/services/fetch-demo.ts

@@ -0,0 +1,49 @@
+import decode from 'jwt-decode';
+import {Fetch, toJSON} from './fetch-responses';
+
+// -----------------------------------------------------------------------------
+
+type JWT = {
+  exp: number;
+  iat: number;
+  grants: unknown;
+  iss: string;
+  user: string;
+  usage: string;
+  host: string;
+};
+
+type QueryParams = {
+  [key: string]: string | number | boolean;
+};
+
+const buildUrlQueryParams = (params: QueryParams) =>
+  Object.keys(params)
+    .map(key => {
+      const value = params[key].toString();
+      return `${encodeURIComponent(key)}=${encodeURIComponent(value)}`;
+    })
+    .join('&');
+
+// -----------------------------------------------------------------------------
+
+const fetchCourse = (fetch: Fetch) => async (token, language, universalRef) => {
+  const jwt: JWT = decode(token);
+  const query = {
+    type: 'course',
+    universalRef,
+    lang: language
+  };
+
+  const response = await fetch(`${jwt.host}/api/v2/contents?${buildUrlQueryParams(query)}`, {
+    headers: {authorization: token}
+  });
+
+  const {hits} = (await toJSON(response)) as {hits};
+  return hits?.[0];
+};
+
+// -----------------------------------------------------------------------------
+
+export {fetchCourse};
+export default fetchCourse(fetch);

package/src/services/fetch-responses.ts

@@ -0,0 +1,53 @@
+export type Response = {
+  ok: boolean;
+  status: number;
+  statusText: string;
+  json: () => Promise<unknown>;
+  text: () => Promise<string>;
+};
+
+export type Fetch = (
+  url?: string,
+  options?: {headers: {authorization: string}}
+) => Promise<Response>;
+
+export class ResponseError extends Error {
+  public statusCode: number;
+
+  public constructor(status: number, statusText: string, body = '') {
+    super(`${statusText} ${body}`.trim());
+    this.name = 'ResponseError';
+    this.statusCode = status;
+  }
+}
+
+export const toJSON = async (response: Response): Promise<unknown> => {
+  if (!response.ok) {
+    const body = await response.text();
+    throw new ResponseError(response.status, response.statusText, body);
+  }
+
+  try {
+    return await response.json();
+  } catch (err) {
+    throw new ResponseError(response.status, response.statusText);
+  }
+};
+
+export const toText = async (response: Response): Promise<string> => {
+  const body = await response.text();
+
+  if (!response.ok) {
+    throw new ResponseError(response.status, response.statusText, body);
+  }
+
+  return body;
+};
+
+export const toVoid = async (response: Response): Promise<void> => {
+  if (!response.ok) {
+    const body = await response.text();
+    throw new ResponseError(response.status, response.statusText, body);
+  }
+  return;
+};

package/src/services/fetch.test.ts

@@ -0,0 +1,26 @@
+import {Response} from './fetch-responses.js';
+
+export const toResponse = (status: number, statusText: string, body: string): Promise<Response> =>
+  Promise.resolve({
+    ok: status < 400,
+    status,
+    statusText,
+    json: (): Promise<unknown> => Promise.resolve(body).then(JSON.parse),
+    text: (): Promise<string> => Promise.resolve(body)
+  });
+
+type FetchFunction = () => Promise<Response>;
+
+export const okJSONResponse = (body: unknown): FetchFunction => () =>
+  toResponse(200, 'OK', JSON.stringify(body));
+
+export const internalServerErrorJSONResponse = (body: unknown): FetchFunction => () =>
+  toResponse(500, 'InternalServerError', JSON.stringify(body));
+
+export const notFoundJSONResponse = (body: unknown): FetchFunction => () =>
+  toResponse(404, 'Not Found', JSON.stringify(body));
+
+export const okTextResponse = (body: string): FetchFunction => () => toResponse(200, 'OK', body);
+
+export const internalServerErrorTextResponse = (body: string): FetchFunction => () =>
+  toResponse(500, 'InternalServerError', body);