Merged in feature/GFW-1050-add-teams-to-area (pull request #135)

Normal: Feature/GFW-1050 add teams to area (Medium)

Approved-by: Owen Evans
Approved-by: Uchenna Okafor

Author: Kevin Borrill

src/components/modals/FormModal.tsx

@@ -12,7 +12,7 @@ export interface IInputBase<T> {
   formatErrors?: (error: any) => any; // ToDo
   registerProps: {
     name: FieldPath<T>;
-    options: RegisterOptions<T, FieldPath<T>>;
+    options?: RegisterOptions<T, FieldPath<T>>;
   };
 }
 

src/configureYup.tsx

@@ -4,7 +4,8 @@ setLocale({
   // use constant translation keys for messages without values
   mixed: {
     default: values => ({ key: "errors.mixed.default", values }),
-    notType: values => ({ key: "errors.mixed.notType", values })
+    notType: values => ({ key: "errors.mixed.notType", values }),
+    required: () => ({ key: "errors.mixed.required" })
   },
   // use functions to generate an error object that includes the value from the schema
   number: {
@@ -14,5 +15,8 @@ setLocale({
   string: {
     min: ({ min }) => ({ key: "errors.string.min", values: { min } }),
     email: () => ({ key: "errors.string.email" })
+  },
+  array: {
+    min: ({ min }) => ({ key: "errors.array.min", values: { min } })
   }
 });

src/index.scss

@@ -96,6 +96,7 @@
 /* Utilities */
 @import "./styles/utilities/u-display";
 @import "./styles/utilities/u-width";
+@import "./styles/utilities/u-height";
 @import "./styles/utilities/u-font";
 @import "./styles/utilities/u-spacings";
 @import "./styles/utilities/u-position";

src/locales/en.json

@@ -136,8 +136,20 @@
   "areas.details.templates.remove.body": "Unassign template from this area",
   "areas.details.templates.remove.success": "Successfully unassigned",
   "areas.details.templates.remove.error": "Failed to unassign, try again later",
-  "areas.details.table.header.name": "Name",
-  "areas.details.table.header.openAssignments": "Open Assignments",
+  "areas.details.templatesTable.header.name": "Name",
+  "areas.details.templatesTable.header.openAssignments": "Open Assignments",
+  "areas.details.teams": "Teams attached to this area ({num})",
+  "areas.details.teams.add.title": "Add Team",
+  "areas.details.teams.add.select": "Select the teams you want to assign to this area.",
+  "areas.details.teams.add.selectPlaceholder": "Select a team",
+  "areas.details.teams.add.success": "Successfully added",
+  "areas.details.teams.add.error": "Failed to add, try again later",
+  "areas.details.teams.remove.title": "Unassign team",
+  "areas.details.teams.remove.body": "Unassign team from this area",
+  "areas.details.teams.remove.success": "Successfully unassigned",
+  "areas.details.teams.remove.error": "Failed to unassign, try again later",
+  "areas.details.teamsTable.header.name": "Name",
+  "areas.details.teamsTable.header.reports": "Reports",
   "templates.name": "templates",
   "templates.title": "Your Templates",
   "templates.subtitle": "Your templates",
@@ -340,9 +352,11 @@
   "components.map.edit": "Edit",
   "components.map.delete": "Delete",
   "errors.mixed.default": "Incorrect value",
+  "errors.mixed.required": "This field is required",
   "errors.mixed.notType": "Incorrect format, enter a {type}",
   "errors.string.email": "Must be a valid email",
   "errors.string.min": "Field must be at least {min} characters long",
+  "errors.array.min": "At least {min, plural, one {# item is} other {# items are}} required",
   "errors.number.min": "This should be at least {min}",
   "errors.number.max": "This should be less than {max}",
   "errors.team.detail": "Could not find Team"

src/modules/areas.js renamed to src/modules/areas.ts

@@ -1,34 +1,61 @@
+// @ts-ignore - no types available
 import normalize from "json-api-normalizer";
 import { saveGeostore } from "./geostores";
 import { toastr } from "react-redux-toastr";
 import omit from "lodash/omit";
 import { areaService } from "services/area";
 import { utilsService } from "services/utils";
+import { AppDispatch, RootState } from "store";
+import { TGetTeamResponse } from "services/teams";
 
 // Actions
 const SET_AREA = "areas/SET_AREA";
 const SET_AREAS = "areas/SET_AREAS";
+const SET_AREA_TEAMS = "areas/SET_AREA_TEAMS";
 const SET_COUNTRIES = "areas/SET_COUNTRIES";
 const SET_LOADING_AREAS = "areas/SET_LOADING_AREAS";
 const SET_SAVING_AREA = "areas/SET_SAVING_AREA";
 const SET_EDITING_AREA = "areas/SET_EDITING_AREA";
 const SET_AREA_DELETED = "areas/SET_AREA_DELETED";
 
+export type TAreasState = {
+  ids: string[];
+  data: any;
+  countries: any[];
+  areaTeams: TGetTeamResponse[];
+  loading: boolean;
+  saving: boolean;
+  editing: boolean;
+  error: boolean;
+};
+
+export type TReducerActions =
+  | { type: typeof SET_AREA; payload: any }
+  | { type: typeof SET_AREAS; payload: any }
+  | { type: typeof SET_AREA_TEAMS; payload: { areaTeams: TAreasState["areaTeams"] } }
+  | { type: typeof SET_COUNTRIES; payload: any }
+  | { type: typeof SET_LOADING_AREAS; payload: any }
+  | { type: typeof SET_SAVING_AREA; payload: any }
+  | { type: typeof SET_EDITING_AREA; payload: any }
+  | { type: typeof SET_AREA_DELETED; payload: any };
+
 // Reducer
-const initialState = {
+const initialState: TAreasState = {
   ids: [],
   data: {},
   countries: [],
+  areaTeams: [],
   loading: true,
   saving: false,
   editing: false,
   error: false
 };
 
-export default function reducer(state = initialState, action) {
+export default function reducer(state = initialState, action: TReducerActions): TAreasState {
   switch (action.type) {
     case SET_AREA: {
       const area = action.payload.area;
+      //@ts-ignore - TODO: Figure out typescript error
       if (state.ids.indexOf(...Object.keys(area)) > -1) {
         return {
           ...state,
@@ -47,6 +74,9 @@ export default function reducer(state = initialState, action) {
       if (areas) return Object.assign({}, state, { ids: Object.keys(areas), data: areas });
       return state;
     }
+    case SET_AREA_TEAMS: {
+      return Object.assign({}, state, { areaTeams: action.payload });
+    }
     case SET_AREA_DELETED: {
       const areaId = action.payload;
       const ids = state.ids.filter(id => id !== areaId);
@@ -67,8 +97,8 @@ export default function reducer(state = initialState, action) {
 }
 
 // Action Creators
-export function getArea(id) {
-  return (dispatch, state) => {
+export function getArea(id: string) {
+  return (dispatch: AppDispatch, state: () => RootState) => {
     dispatch({
       type: SET_LOADING_AREAS,
       payload: true
@@ -100,8 +130,8 @@ export function getArea(id) {
   };
 }
 
-export function deleteArea(areaId) {
-  return (dispatch, state) => {
+export function deleteArea(areaId: string) {
+  return (dispatch: AppDispatch, state: () => RootState) => {
     areaService.token = state().user.token;
     areaService
       .deleteArea(areaId)
@@ -118,7 +148,7 @@ export function deleteArea(areaId) {
 }
 
 export function getAreas() {
-  return (dispatch, state) => {
+  return (dispatch: AppDispatch, state: () => RootState) => {
     dispatch({
       type: SET_LOADING_AREAS,
       payload: true
@@ -148,8 +178,25 @@ export function getAreas() {
   };
 }
 
+export function getAreaTeams(areaId: string) {
+  return (dispatch: AppDispatch, state: () => RootState) => {
+    return areaService
+      .getAreaTeams(areaId)
+      .then(data => {
+        dispatch({
+          type: SET_AREA_TEAMS,
+          payload: data
+        });
+        return data;
+      })
+      .catch(error => {
+        toastr.error("Unable to load area teams", error);
+      });
+  };
+}
+
 export function getCountries() {
-  return (dispatch, state) => {
+  return (dispatch: AppDispatch) => {
     return utilsService
       .getCountries()
       .then(data => {
@@ -165,8 +212,8 @@ export function getCountries() {
 }
 
 // POST name, geostore ID
-export function saveArea(area, node, method) {
-  return async (dispatch, state) => {
+export function saveArea(area: any, node: HTMLElement, method: string) {
+  return async (dispatch: AppDispatch, state: () => RootState) => {
     dispatch({
       type: SET_SAVING_AREA,
       payload: {
@@ -204,35 +251,35 @@ export function saveArea(area, node, method) {
 }
 
 // async save geostore then area
-export function saveAreaWithGeostore(area, node, method) {
-  return async (dispatch, state) => {
+export function saveAreaWithGeostore(area: any, node: HTMLElement, method: string) {
+  return async (dispatch: AppDispatch) => {
     const geostore = await dispatch(saveGeostore(area.geojson));
     const geostoreId = Object.keys(geostore)[0];
     const areaWithGeostore = { ...area, geostore: geostoreId };
     await dispatch(saveArea(areaWithGeostore, node, method));
   };
 }
 
-export function setEditing(bool) {
-  return async dispatch => {
+export function setEditing(bool: boolean) {
+  return async (dispatch: AppDispatch) => {
     await dispatch({
       type: SET_EDITING_AREA,
       payload: bool
     });
   };
 }
 
-export function setSaving(payload) {
-  return dispatch => {
+export function setSaving(payload: boolean) {
+  return (dispatch: AppDispatch) => {
     dispatch({
       type: SET_SAVING_AREA,
       payload: payload
     });
   };
 }
 
-export function setLoading(bool) {
-  return dispatch => {
+export function setLoading(bool: boolean) {
+  return (dispatch: AppDispatch) => {
     dispatch({
       type: SET_LOADING_AREAS,
       payload: bool

src/modules/templates.ts

@@ -43,7 +43,7 @@ const initialState: TTemplatesState = {
   error: false
 };
 
-export default function reducer(state = initialState, action: TReducerActions) {
+export default function reducer(state = initialState, action: TReducerActions): TTemplatesState {
   switch (action.type) {
     case SET_TEMPLATE: {
       const template = action.payload.reports;