@openmrs/esm-fast-data-entry-app 1.0.1-pre.10 → 1.0.1-pre.15

package/dist/openmrs-esm-fast-data-entry-app.js

@@ -1 +1 @@
-var _openmrs_esm_fast_data_entry_app;(()=>{function b(a){var c=h[a];if(void 0!==c)return c.exports;var d=h[a]={id:a,loaded:!1,exports:{}};return G[a].call(d.exports,d,d.exports,b),d.loaded=!0,d.exports}var j,k,q,v,w,x,y,z,A,B,C,D,E,F,G={7140:(b,c,d)=>{var f={"./start":()=>d.e(132).then(()=>()=>d(8132))},e=(a,b)=>(d.R=b,b=d.o(f,a)?f[a]():Promise.resolve().then(()=>{throw new Error("Module \""+a+"\" does not exist in container.")}),d.R=void 0,b),a=(b,c)=>{if(d.S){var e=d.S["default"];if(e&&e!==b)throw new Error("Container initialization failed as it has already been initialized with a different share scope");return d.S["default"]=b,d.I("default",c)}};d.d(c,{get:()=>e,init:()=>a})}},h={};b.m=G,b.c=h,b.n=a=>{var c=a&&a.__esModule?()=>a.default:()=>a;return b.d(c,{a:c}),c},b.d=(a,c)=>{for(var d in c)b.o(c,d)&&!b.o(a,d)&&Object.defineProperty(a,d,{enumerable:!0,get:c[d]})},b.f={},b.e=a=>Promise.all(Object.keys(b.f).reduce((c,d)=>(b.f[d](a,c),c),[])),b.u=a=>a+".js",b.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(a){if("object"==typeof window)return window}}(),b.o=(a,b)=>Object.prototype.hasOwnProperty.call(a,b),j={},k="@openmrs/esm-fast-data-entry-app:",b.l=(c,e,g)=>{if(j[c])j[c].push(e);else{var h,a;if(void 0!==g)for(var m,n=document.getElementsByTagName("script"),o=0;o<n.length;o++)if(m=n[o],m.getAttribute("src")==c||m.getAttribute("data-webpack")==k+g){h=m;break}h||(a=!0,(h=document.createElement("script")).charset="utf-8",h.timeout=120,b.nc&&h.setAttribute("nonce",b.nc),h.setAttribute("data-webpack",k+g),h.src=c),j[c]=[e];var q=(b,f)=>{h.onerror=h.onload=null,clearTimeout(d);var e=j[c];if(delete j[c],h.parentNode&&h.parentNode.removeChild(h),e&&e.forEach(a=>a(f)),b)return b(f)},d=setTimeout(q.bind(null,void 0,{type:"timeout",target:h}),12e4);h.onerror=q.bind(null,h.onerror),h.onload=q.bind(null,h.onload),a&&document.head.appendChild(h)}},b.r=a=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(a,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(a,"__esModule",{value:!0})},b.nmd=a=>(a.paths=[],a.children||(a.children=[]),a),(()=>{b.S={};var c={},d={};b.I=(e,f)=>{f||(f=[]);var g=d[e];if(g||(g=d[e]={}),!(0<=f.indexOf(g))){if(f.push(g),c[e])return c[e];b.o(b.S,e)||(b.S[e]={});var h=b.S[e],i=(b,c,d,e)=>{var f=h[b]=h[b]||{},a=f[c];a&&(a.loaded||(!e==!a.eager?!("@openmrs/esm-fast-data-entry-app">a.from):!e))||(f[c]={get:d,from:"@openmrs/esm-fast-data-entry-app",eager:!!e})},j=[];return"default"===e&&(i("@carbon/react","1.11.0",()=>Promise.all([b.e(820),b.e(327),b.e(569),b.e(672),b.e(183)]).then(()=>()=>b(8569))),i("@openmrs/esm-framework","4.0.2-pre.275",()=>Promise.all([b.e(595),b.e(672)]).then(()=>()=>b(595))),i("react-dom","18.2.0",()=>Promise.all([b.e(935),b.e(672)]).then(()=>()=>b(3935))),i("react-i18next","11.18.5",()=>Promise.all([b.e(247),b.e(672)]).then(()=>()=>b(8247))),i("react-router-dom","6.3.0",()=>Promise.all([b.e(68),b.e(672)]).then(()=>()=>b(6068))),i("react","18.2.0",()=>b.e(294).then(()=>()=>b(7294)))),c[e]=j.length?Promise.all(j).then(()=>c[e]=1):1}}})(),(()=>{var a;b.g.importScripts&&(a=b.g.location+"");var c=b.g.document;if(!a&&c&&(c.currentScript&&(a=c.currentScript.src),!a)){var d=c.getElementsByTagName("script");d.length&&(a=d[d.length-1].src)}if(!a)throw new Error("Automatic publicPath is not supported in this browser");a=a.replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),b.p=a})(),q=a=>{var b=a=>a.split(".").map(a=>+a==a?+a:a),c=/^([^-+]+)?(?:-([^+]+))?(?:\+(.+))?$/.exec(a),d=c[1]?b(c[1]):[];return c[2]&&(d.length++,d.push.apply(d,b(c[2]))),c[3]&&(d.push([]),d.push.apply(d,b(c[3]))),d},v=(b,c)=>{b=q(b),c=q(c);for(var d=0;;){if(d>=b.length)return d<c.length&&"u"!=(typeof c[d])[0];var f=b[d],a=(typeof f)[0];if(d>=c.length)return"u"==a;var g=c[d],h=(typeof g)[0];if(a!=h)return"o"==a&&"n"==h||"s"==h||"u"==a;if("o"!=a&&"u"!=a&&f!=g)return f<g;d++}},w=a=>{function b(){return g.pop().replace(/^\((.+)\)$/,"$1")}var c=a[0],d="";if(1===a.length)return"*";if(c+.5){d+=0==c?">=":-1==c?"<":1==c?"^":2==c?"~":0<c?"=":"!=";for(var e=1,f=1;f<a.length;f++)e--,d+="u"==(typeof(h=a[f]))[0]?"-":(0<e?".":"")+(e=2,h);return d}var g=[];for(f=1;f<a.length;f++){var h=a[f];g.push(0===h?"not("+b()+")":1===h?"("+b()+" || "+b()+")":2===h?g.pop()+" "+g.pop():w(h))}return b()},x=(b,e)=>{if(0 in b){e=q(e);var g=b[0],j=0>g;j&&(g=-g-1);for(var a=0,k=1,m=!0;;k++,a++){var o,t,v=k<b.length?(typeof b[k])[0]:"";if(a>=e.length||"o"==(t=(typeof(o=e[a]))[0]))return!m||("u"==v?k>g&&!j:""==v!=j);if("u"==t){if(!m||"u"!=v)return!1;}else if(!m)"s"!=v&&"n"!=v&&(m=!1,k--);else if(v==t){if(!(k<=g)){if(j?o>b[k]:o<b[k])return!1;o!=b[k]&&(m=!1)}else if(o!=b[k])return!1;}else if("s"!=v&&"n"!=v){if(j||k<=g)return!1;m=!1,k--}else{if(k<=g||t<v!=j)return!1;m=!1}}}var d=[],p=d.pop.bind(d);for(a=1;a<b.length;a++){var c=b[a];d.push(1==c?p()|p():2==c?p()&p():c?x(c,e):!p())}return!!p()},y=(a,b)=>{var c=a[b];return Object.keys(c).reduce((a,b)=>a&&(c[a].loaded||!v(a,b))?a:b,0)},z=(a,b,c,d)=>"Unsatisfied version "+c+" from "+(c&&a[b][c].from)+" of shared singleton module "+b+" (required "+w(d)+")",A=(b,c,d,e)=>{var f=y(b,d);return x(e,f)||"undefined"!=typeof console&&console.warn&&console.warn(z(b,d,f,e)),B(b[d][f])},B=a=>(a.loaded=1,a.get()),C=(c=>function(d,e,f,g){var a=b.I(d);return a&&a.then?a.then(c.bind(c,d,b.S[d],e,f,g)):c(0,b.S[d],e,f,g)})((c,d,e,f,g)=>d&&b.o(d,e)?A(d,0,e,f):g()),D={},E={1672:()=>C("default","react",[1,18],()=>b.e(294).then(()=>()=>b(7294))),5183:()=>C("default","react-dom",[1,18],()=>b.e(935).then(()=>()=>b(3935))),1132:()=>C("default","@openmrs/esm-framework",[0],()=>Promise.all([b.e(595),b.e(672)]).then(()=>()=>b(595))),1338:()=>C("default","react-router-dom",[1,6],()=>b.e(68).then(()=>()=>b(6068))),3397:()=>C("default","react-i18next",[1,11],()=>b.e(247).then(()=>()=>b(8247))),4422:()=>C("default","@carbon/react",[1,1,9,0],()=>Promise.all([b.e(820),b.e(327),b.e(569),b.e(183)]).then(()=>()=>b(8569)))},F={132:[1132],183:[5183],397:[3397],672:[1672],804:[1338],877:[4422]},b.f.consumes=(a,c)=>{b.o(F,a)&&F[a].forEach(d=>{if(b.o(D,d))return c.push(D[d]);var e=a=>{D[d]=0,b.m[d]=c=>{delete b.c[d],c.exports=a()}},f=a=>{delete D[d],b.m[d]=()=>{throw delete b.c[d],a}};try{var g=E[d]();g.then?c.push(D[d]=g.then(e).catch(f)):e(g)}catch(a){f(a)}})},(()=>{var c={447:0};b.f.j=(d,e)=>{var f=b.o(c,d)?c[d]:void 0;if(0!==f)if(f)e.push(f[2]);else if(/^(183|397|672)$/.test(d))c[d]=0;else{var g=new Promise((b,e)=>f=c[d]=[b,e]);e.push(f[2]=g);var a=b.p+b.u(d),h=new Error;b.l(a,e=>{if(b.o(c,d)&&(0!==(f=c[d])&&(c[d]=void 0),f)){var g=e&&("load"===e.type?"missing":e.type),a=e&&e.target&&e.target.src;h.message="Loading chunk "+d+" failed.\n("+g+": "+a+")",h.name="ChunkLoadError",h.type=g,h.request=a,f[1](h)}},"chunk-"+d,d)}};var a=(d,e)=>{var f,g,[h,j,i]=e,k=0;if(h.some(a=>0!==c[a])){for(f in j)b.o(j,f)&&(b.m[f]=j[f]);i&&i(b)}for(d&&d(e);k<h.length;k++)g=h[k],b.o(c,g)&&c[g]&&c[g][0](),c[g]=0},d=self.webpackChunk_openmrs_esm_fast_data_entry_app=self.webpackChunk_openmrs_esm_fast_data_entry_app||[];d.forEach(a.bind(null,0)),d.push=a.bind(null,d.push.bind(d))})(),b.nc=void 0;var m=b(7140);_openmrs_esm_fast_data_entry_app=m})();
+var _openmrs_esm_fast_data_entry_app;(()=>{function b(a){var c=h[a];if(void 0!==c)return c.exports;var d=h[a]={id:a,loaded:!1,exports:{}};return G[a].call(d.exports,d,d.exports,b),d.loaded=!0,d.exports}var j,k,q,v,w,x,y,z,A,B,C,D,E,F,G={7140:(b,c,d)=>{var f={"./start":()=>d.e(132).then(()=>()=>d(8132))},e=(a,b)=>(d.R=b,b=d.o(f,a)?f[a]():Promise.resolve().then(()=>{throw new Error("Module \""+a+"\" does not exist in container.")}),d.R=void 0,b),a=(b,c)=>{if(d.S){var e=d.S["default"];if(e&&e!==b)throw new Error("Container initialization failed as it has already been initialized with a different share scope");return d.S["default"]=b,d.I("default",c)}};d.d(c,{get:()=>e,init:()=>a})}},h={};b.m=G,b.c=h,b.n=a=>{var c=a&&a.__esModule?()=>a.default:()=>a;return b.d(c,{a:c}),c},b.d=(a,c)=>{for(var d in c)b.o(c,d)&&!b.o(a,d)&&Object.defineProperty(a,d,{enumerable:!0,get:c[d]})},b.f={},b.e=a=>Promise.all(Object.keys(b.f).reduce((c,d)=>(b.f[d](a,c),c),[])),b.u=a=>a+".js",b.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(a){if("object"==typeof window)return window}}(),b.o=(a,b)=>Object.prototype.hasOwnProperty.call(a,b),j={},k="@openmrs/esm-fast-data-entry-app:",b.l=(c,e,g)=>{if(j[c])j[c].push(e);else{var h,a;if(void 0!==g)for(var m,n=document.getElementsByTagName("script"),o=0;o<n.length;o++)if(m=n[o],m.getAttribute("src")==c||m.getAttribute("data-webpack")==k+g){h=m;break}h||(a=!0,(h=document.createElement("script")).charset="utf-8",h.timeout=120,b.nc&&h.setAttribute("nonce",b.nc),h.setAttribute("data-webpack",k+g),h.src=c),j[c]=[e];var q=(b,f)=>{h.onerror=h.onload=null,clearTimeout(d);var e=j[c];if(delete j[c],h.parentNode&&h.parentNode.removeChild(h),e&&e.forEach(a=>a(f)),b)return b(f)},d=setTimeout(q.bind(null,void 0,{type:"timeout",target:h}),12e4);h.onerror=q.bind(null,h.onerror),h.onload=q.bind(null,h.onload),a&&document.head.appendChild(h)}},b.r=a=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(a,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(a,"__esModule",{value:!0})},b.nmd=a=>(a.paths=[],a.children||(a.children=[]),a),(()=>{b.S={};var c={},d={};b.I=(e,f)=>{f||(f=[]);var g=d[e];if(g||(g=d[e]={}),!(0<=f.indexOf(g))){if(f.push(g),c[e])return c[e];b.o(b.S,e)||(b.S[e]={});var h=b.S[e],i=(b,c,d,e)=>{var f=h[b]=h[b]||{},a=f[c];a&&(a.loaded||(!e==!a.eager?!("@openmrs/esm-fast-data-entry-app">a.from):!e))||(f[c]={get:d,from:"@openmrs/esm-fast-data-entry-app",eager:!!e})},j=[];return"default"===e&&(i("@carbon/react","1.11.0",()=>Promise.all([b.e(820),b.e(327),b.e(569),b.e(672),b.e(183)]).then(()=>()=>b(8569))),i("@openmrs/esm-framework","4.0.2-pre.328",()=>Promise.all([b.e(595),b.e(672)]).then(()=>()=>b(595))),i("react-dom","18.2.0",()=>Promise.all([b.e(935),b.e(672)]).then(()=>()=>b(3935))),i("react-i18next","11.18.5",()=>Promise.all([b.e(247),b.e(672)]).then(()=>()=>b(8247))),i("react-router-dom","6.3.0",()=>Promise.all([b.e(68),b.e(672)]).then(()=>()=>b(6068))),i("react","18.2.0",()=>b.e(294).then(()=>()=>b(7294)))),c[e]=j.length?Promise.all(j).then(()=>c[e]=1):1}}})(),(()=>{var a;b.g.importScripts&&(a=b.g.location+"");var c=b.g.document;if(!a&&c&&(c.currentScript&&(a=c.currentScript.src),!a)){var d=c.getElementsByTagName("script");d.length&&(a=d[d.length-1].src)}if(!a)throw new Error("Automatic publicPath is not supported in this browser");a=a.replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),b.p=a})(),q=a=>{var b=a=>a.split(".").map(a=>+a==a?+a:a),c=/^([^-+]+)?(?:-([^+]+))?(?:\+(.+))?$/.exec(a),d=c[1]?b(c[1]):[];return c[2]&&(d.length++,d.push.apply(d,b(c[2]))),c[3]&&(d.push([]),d.push.apply(d,b(c[3]))),d},v=(b,c)=>{b=q(b),c=q(c);for(var d=0;;){if(d>=b.length)return d<c.length&&"u"!=(typeof c[d])[0];var f=b[d],a=(typeof f)[0];if(d>=c.length)return"u"==a;var g=c[d],h=(typeof g)[0];if(a!=h)return"o"==a&&"n"==h||"s"==h||"u"==a;if("o"!=a&&"u"!=a&&f!=g)return f<g;d++}},w=a=>{function b(){return g.pop().replace(/^\((.+)\)$/,"$1")}var c=a[0],d="";if(1===a.length)return"*";if(c+.5){d+=0==c?">=":-1==c?"<":1==c?"^":2==c?"~":0<c?"=":"!=";for(var e=1,f=1;f<a.length;f++)e--,d+="u"==(typeof(h=a[f]))[0]?"-":(0<e?".":"")+(e=2,h);return d}var g=[];for(f=1;f<a.length;f++){var h=a[f];g.push(0===h?"not("+b()+")":1===h?"("+b()+" || "+b()+")":2===h?g.pop()+" "+g.pop():w(h))}return b()},x=(b,e)=>{if(0 in b){e=q(e);var g=b[0],j=0>g;j&&(g=-g-1);for(var a=0,k=1,m=!0;;k++,a++){var o,t,v=k<b.length?(typeof b[k])[0]:"";if(a>=e.length||"o"==(t=(typeof(o=e[a]))[0]))return!m||("u"==v?k>g&&!j:""==v!=j);if("u"==t){if(!m||"u"!=v)return!1;}else if(!m)"s"!=v&&"n"!=v&&(m=!1,k--);else if(v==t){if(!(k<=g)){if(j?o>b[k]:o<b[k])return!1;o!=b[k]&&(m=!1)}else if(o!=b[k])return!1;}else if("s"!=v&&"n"!=v){if(j||k<=g)return!1;m=!1,k--}else{if(k<=g||t<v!=j)return!1;m=!1}}}var d=[],p=d.pop.bind(d);for(a=1;a<b.length;a++){var c=b[a];d.push(1==c?p()|p():2==c?p()&p():c?x(c,e):!p())}return!!p()},y=(a,b)=>{var c=a[b];return Object.keys(c).reduce((a,b)=>a&&(c[a].loaded||!v(a,b))?a:b,0)},z=(a,b,c,d)=>"Unsatisfied version "+c+" from "+(c&&a[b][c].from)+" of shared singleton module "+b+" (required "+w(d)+")",A=(b,c,d,e)=>{var f=y(b,d);return x(e,f)||"undefined"!=typeof console&&console.warn&&console.warn(z(b,d,f,e)),B(b[d][f])},B=a=>(a.loaded=1,a.get()),C=(c=>function(d,e,f,g){var a=b.I(d);return a&&a.then?a.then(c.bind(c,d,b.S[d],e,f,g)):c(0,b.S[d],e,f,g)})((c,d,e,f,g)=>d&&b.o(d,e)?A(d,0,e,f):g()),D={},E={1672:()=>C("default","react",[1,18],()=>b.e(294).then(()=>()=>b(7294))),5183:()=>C("default","react-dom",[1,18],()=>b.e(935).then(()=>()=>b(3935))),1132:()=>C("default","@openmrs/esm-framework",[0],()=>Promise.all([b.e(595),b.e(672)]).then(()=>()=>b(595))),1338:()=>C("default","react-router-dom",[1,6],()=>b.e(68).then(()=>()=>b(6068))),3397:()=>C("default","react-i18next",[1,11],()=>b.e(247).then(()=>()=>b(8247))),4422:()=>C("default","@carbon/react",[1,1,9,0],()=>Promise.all([b.e(820),b.e(327),b.e(569),b.e(183)]).then(()=>()=>b(8569)))},F={132:[1132],183:[5183],397:[3397],617:[4422],672:[1672],804:[1338]},b.f.consumes=(a,c)=>{b.o(F,a)&&F[a].forEach(d=>{if(b.o(D,d))return c.push(D[d]);var e=a=>{D[d]=0,b.m[d]=c=>{delete b.c[d],c.exports=a()}},f=a=>{delete D[d],b.m[d]=()=>{throw delete b.c[d],a}};try{var g=E[d]();g.then?c.push(D[d]=g.then(e).catch(f)):e(g)}catch(a){f(a)}})},(()=>{var c={447:0};b.f.j=(d,e)=>{var f=b.o(c,d)?c[d]:void 0;if(0!==f)if(f)e.push(f[2]);else if(/^(183|397|672)$/.test(d))c[d]=0;else{var g=new Promise((b,e)=>f=c[d]=[b,e]);e.push(f[2]=g);var a=b.p+b.u(d),h=new Error;b.l(a,e=>{if(b.o(c,d)&&(0!==(f=c[d])&&(c[d]=void 0),f)){var g=e&&("load"===e.type?"missing":e.type),a=e&&e.target&&e.target.src;h.message="Loading chunk "+d+" failed.\n("+g+": "+a+")",h.name="ChunkLoadError",h.type=g,h.request=a,f[1](h)}},"chunk-"+d,d)}};var a=(d,e)=>{var f,g,[h,j,i]=e,k=0;if(h.some(a=>0!==c[a])){for(f in j)b.o(j,f)&&(b.m[f]=j[f]);i&&i(b)}for(d&&d(e);k<h.length;k++)g=h[k],b.o(c,g)&&c[g]&&c[g][0](),c[g]=0},d=self.webpackChunk_openmrs_esm_fast_data_entry_app=self.webpackChunk_openmrs_esm_fast_data_entry_app||[];d.forEach(a.bind(null,0)),d.push=a.bind(null,d.push.bind(d))})(),b.nc=void 0;var m=b(7140);_openmrs_esm_fast_data_entry_app=m})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-fast-data-entry-app",
-  "version": "1.0.1-pre.10",
+  "version": "1.0.1-pre.15",
   "license": "MPL-2.0",
   "description": "An OpenMRS 3.x microfrontend",
   "browser": "dist/openmrs-esm-fast-data-entry-app.js",
@@ -45,6 +45,7 @@
   "peerDependencies": {
     "@carbon/react": "^1.9.0",
     "@openmrs/esm-framework": "*",
+    "lodash-es": "4.x",
     "react": "18.x",
     "react-dom": "18.x",
     "react-i18next": "11.x",
@@ -76,6 +77,7 @@
     "jest": "^28.1.3",
     "jest-cli": "^28.1.3",
     "jest-environment-jsdom": "^28.1.3",
+    "lodash-es": "^4.17.21",
     "openmrs": "next",
     "prettier": "^2.3.0",
     "pretty-quick": "^3.1.0",
@@ -85,13 +87,13 @@
     "react-router-dom": "^6.3.0",
     "semver": "^7.3.7",
     "swc-loader": "^0.2.3",
-    "swr": "^1.3.0",
     "typescript": "^4.7.3",
     "webpack": "^5.73.0"
   },
   "packageManager": "yarn@3.2.2",
   "dependencies": {
-    "react-hook-form": "^7.34.2"
+    "react-hook-form": "^7.34.2",
+    "swr": "1.1.2"
   },
   "stableVersion": "1.0.0"
 }

package/src/add-group-modal/AddGroupModal.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useState } from "react";
+import React, { useCallback, useContext, useEffect, useState } from "react";
 import {
   ComposedModal,
   Button,
@@ -7,12 +7,14 @@ import {
   ModalBody,
   TextInput,
   FormLabel,
+  Loading,
 } from "@carbon/react";
-import { Add, Close } from "@carbon/react/icons";
+import { Add, TrashCan } from "@carbon/react/icons";
 import { useTranslation } from "react-i18next";
-import { ExtensionSlot } from "@openmrs/esm-framework";
+import { ExtensionSlot, showToast } from "@openmrs/esm-framework";
 import styles from "./styles.scss";
 import GroupFormWorkflowContext from "../context/GroupFormWorkflowContext";
+import { usePostCohort } from "../hooks";
 
 const MemExtension = React.memo(ExtensionSlot);
 
@@ -20,18 +22,19 @@ const PatientRow = ({ patient, removePatient }) => {
   const { t } = useTranslation();
   return (
     <li key={patient.uuid} className={styles.patientRow}>
-      <span className={styles.patientName}>{patient?.display}</span>
       <span>
         <Button
           kind="tertiary"
           size="sm"
+          hasIconOnly
           onClick={() => removePatient(patient.uuid)}
-          renderIcon={Close}
-          tooltipPosition="right"
-        >
-          {t("remove", "Remove")}
-        </Button>
+          renderIcon={TrashCan}
+          tooltipAlignment="start"
+          tooltipPosition="top"
+          iconDescription={t("remove", "Remove")}
+        />
       </span>
+      <span className={styles.patientName}>{patient?.display}</span>
     </li>
   );
 };
@@ -64,17 +67,21 @@ const NewGroupForm = (props) => {
       />
       {errors?.name && (
         <p className={styles.formError}>
-          {t("groupNameError", "Please enter a group name.")}
+          {errors.name === "required"
+            ? t("groupNameError", "Please enter a group name.")
+            : errors.name}
         </p>
       )}
-      <FormLabel>Patients in group</FormLabel>
+      <FormLabel>
+        {patientList.length} {t("patientsInGroup", "Patients in group")}
+      </FormLabel>
       {errors?.patientList && (
         <p className={styles.formError}>
           {t("noPatientError", "Please enter at least one patient.")}
         </p>
       )}
       {!errors?.patientList && (
-        <ul>
+        <ul className={styles.patientList}>
           {patientList?.map((patient, index) => (
             <PatientRow
               patient={patient}
@@ -92,7 +99,7 @@ const NewGroupForm = (props) => {
           state={{
             selectPatientAction: updatePatientList,
             buttonProps: {
-              kind: "primary",
+              kind: "secondary",
             },
           }}
         />
@@ -108,6 +115,7 @@ const AddGroupModal = () => {
   const [errors, setErrors] = useState({});
   const [name, setName] = useState("");
   const [patientList, setPatientList] = useState([]);
+  const { post, result, isPosting, error } = usePostCohort();
 
   const handleCancel = () => {
     setOpen(false);
@@ -165,10 +173,46 @@ const AddGroupModal = () => {
 
   const handleSubmit = () => {
     if (validate()) {
-      setGroup({ id: "1234", name: name, members: patientList });
+      post({
+        name: name,
+        cohortMembers: patientList.map((p) => ({ patient: p.uuid })),
+      });
     }
   };
 
+  useEffect(() => {
+    if (result) {
+      setGroup({
+        ...result,
+        // the result doesn't come with cohortMembers.
+        // need to add it in based on our local state
+        cohortMembers: patientList.map((p) => ({ patient: { uuid: p.uuid } })),
+      });
+    }
+  }, [result, setGroup, patientList]);
+
+  useEffect(() => {
+    if (error) {
+      showToast({
+        kind: "error",
+        title: t("postError", "POST Error"),
+        description:
+          error.message ??
+          t("unknownPostError", "An unknown error occured while saving data"),
+      });
+      if (error.fieldErrors) {
+        setErrors(
+          Object.fromEntries(
+            Object.entries(error.fieldErrors).map(([key, value]) => [
+              key,
+              value?.[0]?.message,
+            ])
+          )
+        );
+      }
+    }
+  }, [error, t]);
+
   return (
     <div className={styles.modal}>
       <Button
@@ -181,23 +225,32 @@ const AddGroupModal = () => {
       <ComposedModal open={open} onClose={() => setOpen(false)}>
         <ModalHeader>{t("createNewGroup", "Create New Group")}</ModalHeader>
         <ModalBody>
-          <NewGroupForm
-            {...{
-              name,
-              setName,
-              patientList,
-              updatePatientList,
-              errors,
-              validate,
-              removePatient,
-            }}
-          />
+          {result ? (
+            <p>Group saved succesfully</p>
+          ) : isPosting ? (
+            <div className={styles.loading}>
+              <Loading withOverlay={false} />
+              <span>Saving new group...</span>
+            </div>
+          ) : (
+            <NewGroupForm
+              {...{
+                name,
+                setName,
+                patientList,
+                updatePatientList,
+                errors,
+                validate,
+                removePatient,
+              }}
+            />
+          )}
         </ModalBody>
         <ModalFooter>
-          <Button kind="secondary" onClick={handleCancel}>
+          <Button kind="secondary" onClick={handleCancel} disabled={isPosting}>
             {t("cancel", "Cancel")}
           </Button>
-          <Button kind="primary" onClick={handleSubmit}>
+          <Button kind="primary" onClick={handleSubmit} disabled={isPosting}>
             {t("createGroup", "Create Group")}
           </Button>
         </ModalFooter>

package/src/add-group-modal/styles.scss

@@ -23,13 +23,23 @@
 
 .patientRow {
    display: flex;
+   align-items: center;
    width: "100%";
+   &:nth-child(odd) {
+    background-color: colors.$gray-20;
+  }
 }
 
 .patientName {
   flex-grow: 1;
-  padding: spacing.$spacing-02;
-  &:hover {
-    background-color: colors.$gray-20;
-  }
+  padding-left: spacing.$spacing-05;
+}
+
+.loading {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  row-gap: spacing.$spacing-05;
 }

package/src/context/GroupFormWorkflowContext.tsx

@@ -20,6 +20,7 @@ export interface MetaType {
 
 const initialActions = {
   setGroup: (group: GroupType) => undefined,
+  unsetGroup: () => undefined,
   setSessionMeta: (meta: MetaType) => undefined,
   openPatientSearch: () => undefined,
   saveEncounter: (encounterUuid: string | number) => undefined,
@@ -75,6 +76,7 @@ const GroupFormWorkflowProvider = ({ children }) => {
           activeFormUuid,
         }),
       setGroup: (group) => dispatch({ type: "SET_GROUP", group }),
+      unsetGroup: () => dispatch({ type: "UNSET_GROUP" }),
       setSessionMeta: (meta) => dispatch({ type: "SET_SESSION_META", meta }),
       openPatientSearch: () => dispatch({ type: "OPEN_PATIENT_SEARCH" }),
       saveEncounter: (encounterUuid) =>

package/src/context/GroupFormWorkflowReducer.ts

@@ -75,9 +75,33 @@ const reducer = (state, action) => {
           ...state.forms,
           [state.activeFormUuid]: {
             ...state.forms[state.activeFormUuid],
-            groupUuid: action.group.id,
+            groupUuid: action.group.uuid,
             groupName: action.group.name,
-            patientUuids: action.group.members.map((member) => member.uuid),
+            patientUuids:
+              // this translation is not preferred
+              // the only reason we tollerate it here is beause it should be the only time
+              // we add cohort information to state
+              action.group.cohortMembers?.map(
+                (member) => member?.patient?.uuid
+              ) ?? [],
+            activePatientUuid: null,
+            activeEncounterUuid: null,
+          },
+        },
+      };
+      persistData(newState);
+      return newState;
+    }
+    case "UNSET_GROUP": {
+      const newState = {
+        ...state,
+        forms: {
+          ...state.forms,
+          [state.activeFormUuid]: {
+            ...state.forms[state.activeFormUuid],
+            groupUuid: null,
+            groupName: null,
+            patientUuids: [],
             activePatientUuid: null,
             activeEncounterUuid: null,
           },

package/src/group-form-entry-workflow/GroupFormEntryWorkflow.tsx

@@ -19,7 +19,7 @@ import {
 import React, { useContext, useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import PatientCard from "../patient-card/PatientCard";
-import GroupBanner from "./group-banner";
+import GroupDisplayHeader from "./group-display-header";
 import styles from "./styles.scss";
 import { useTranslation } from "react-i18next";
 import GroupFormWorkflowContext, {
@@ -387,7 +387,7 @@ const GroupFormEntryWorkflow = () => {
         <ExtensionSlot extensionSlotName="breadcrumbs-slot" />
       </div>
       <GroupSearchHeader />
-      <GroupBanner />
+      <GroupDisplayHeader />
       {workflowState === "NEW_GROUP_SESSION" && (
         <div className={styles.workspaceWrapper}>
           <SessionMetaWorkspace />

package/src/group-form-entry-workflow/{group-banner/GroupBanner.test.tsx → group-display-header/GroupDisplayHeader.test.tsx}

@@ -1,9 +1,9 @@
 import React from "react";
 import { render } from "@testing-library/react";
-import GroupBanner from "./GroupBanner";
+import GroupDisplayHeader from "./GroupDisplayHeader";
 
 describe("PatientBanner", () => {
   it("renders placeholder information when no data is present", () => {
-    render(<GroupBanner />);
+    render(<GroupDisplayHeader />);
   });
 });

package/src/group-form-entry-workflow/{group-banner/GroupBanner.tsx → group-display-header/GroupDisplayHeader.tsx}

@@ -1,12 +1,20 @@
 import React, { useContext } from "react";
-import { Events } from "@carbon/react/icons";
+import { Button } from "@carbon/react";
+import { Events, Close } from "@carbon/react/icons";
 import styles from "./styles.scss";
 import { useTranslation } from "react-i18next";
 import GroupFormWorkflowContext from "../../context/GroupFormWorkflowContext";
+import { navigate } from "@openmrs/esm-framework";
 
-const GroupBanner = () => {
-  const { activeGroupName, activeGroupUuid, patientUuids, activeSessionMeta } =
-    useContext(GroupFormWorkflowContext);
+const GroupDisplayHeader = () => {
+  const {
+    activeGroupName,
+    activeGroupUuid,
+    patientUuids,
+    activeSessionMeta,
+    unsetGroup,
+    destroySession,
+  } = useContext(GroupFormWorkflowContext);
   const { t } = useTranslation();
 
   if (!activeGroupUuid) {
@@ -38,8 +46,26 @@ const GroupBanner = () => {
           </div>
         </div>
       )}
+      <span style={{ flexGrow: 1 }} />
+      <span>
+        <Button kind="ghost" onClick={() => unsetGroup()}>
+          {t("changeGroup", "Choose a different group")} <Close size={20} />
+        </Button>
+      </span>
+      <span>
+        <Button
+          kind="ghost"
+          onClick={() => {
+            destroySession();
+            // eslint-disable-next-line
+            navigate({ to: "${openmrsSpaBase}/forms" });
+          }}
+        >
+          {t("cancel", "Cancel")} <Close size={20} />
+        </Button>
+      </span>
     </div>
   );
 };
 
-export default GroupBanner;
+export default GroupDisplayHeader;

package/src/group-form-entry-workflow/group-display-header/index.ts

@@ -0,0 +1,3 @@
+import GroupDisplayHeader from "./GroupDisplayHeader";
+
+export default GroupDisplayHeader;

package/src/group-form-entry-workflow/group-search/CompactGroupResults.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useReducer } from "react";
+import React, { useEffect, useReducer, useRef } from "react";
 import { SkeletonIcon, SkeletonText } from "@carbon/react";
 import { Events } from "@carbon/react/icons";
 import styles from "./compact-group-result.scss";
@@ -20,11 +20,64 @@ const reducer = (state, action) => {
   }
 };
 
-const CompactGroupResults = ({ groups, selectGroupAction }) => {
+const scrollingOptions = {
+  behavior: "smooth",
+  block: "nearest",
+};
+
+const ResultItem = ({
+  index,
+  selectGroupAction,
+  group,
+  dispatch,
+  state,
+  totalGroups,
+  lastRef,
+}) => {
+  const ref = useRef(null);
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    if (state.selectedIndex === totalGroups - 1) {
+      lastRef.current.scrollIntoView(scrollingOptions);
+    } else if (state.selectedIndex === index) {
+      ref.current.scrollIntoView(scrollingOptions);
+    }
+  }, [state, index, totalGroups, lastRef]);
+
+  return (
+    <div
+      onClick={() => {
+        dispatch({ type: "select", payload: index });
+        selectGroupAction(group);
+      }}
+      className={`${styles.patientSearchResult} ${
+        index === state.selectedIndex && styles.patientSearchResultSelected
+      }`}
+      role="button"
+      aria-pressed={index === state.selectedIndex}
+      tabIndex={0}
+      ref={ref}
+    >
+      <div className={styles.patientAvatar} role="img">
+        <Events size={24} />
+      </div>
+      <div>
+        <h2 className={styles.patientName}>{group.name}</h2>
+        <p className={styles.demographics}>
+          {group.cohortMembers?.length ?? 0} {t("members", "members")}
+          <span className={styles.middot}>&middot;</span> {group.description}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+const CompactGroupResults = ({ groups, selectGroupAction, lastRef }) => {
   const arrowUpPressed = useKeyPress("ArrowUp");
   const arrowDownPressed = useKeyPress("ArrowDown");
   const enterPressed = useKeyPress("Enter");
-  const { t } = useTranslation();
+
   const [state, dispatch] = useReducer(reducer, { selectedIndex: 0 });
 
   useEffect(() => {
@@ -48,31 +101,11 @@ const CompactGroupResults = ({ groups, selectGroupAction }) => {
   return (
     <>
       {groups.map((group, index) => (
-        <div
-          onClick={() => {
-            dispatch({ type: "select", payload: index });
-            selectGroupAction(group);
-          }}
-          key={group.id}
-          className={`${styles.patientSearchResult} ${
-            index === state.selectedIndex && styles.patientSearchResultSelected
-          }`}
-          role="button"
-          aria-pressed={index === state.selectedIndex}
-          tabIndex={0}
-        >
-          <div className={styles.patientAvatar} role="img">
-            <Events size={24} />
-          </div>
-          <div>
-            <h2 className={styles.patientName}>{group.name}</h2>
-            <p className={styles.demographics}>
-              {group.members.length} {t("members", "members")}
-              <span className={styles.middot}>&middot;</span>{" "}
-              {group.description}
-            </p>
-          </div>
-        </div>
+        <ResultItem
+          key={index}
+          totalGroups={groups.length}
+          {...{ lastRef, index, selectGroupAction, group, dispatch, state }}
+        />
       ))}
     </>
   );

package/src/group-form-entry-workflow/group-search/CompactGroupSearch.tsx

@@ -4,6 +4,7 @@ import styles from "./compact-group-search.scss";
 import GroupSearch from "./GroupSearch";
 import { Button, Search } from "@carbon/react";
 import { useTranslation } from "react-i18next";
+import debounce from "lodash-es/debounce";
 
 interface CompactGroupSearchProps {
   selectGroupAction?: (group: GroupType) => void;
@@ -23,6 +24,10 @@ const CompactGroupSearch: React.FC<CompactGroupSearchProps> = ({
   };
 
   const handleSearchChange = (e) => {
+    debounce((q) => {
+      setDropdownShown(!!e.length);
+      setQuery(q);
+    }, 300);
     setQuery(e);
     if (e.length) {
       setDropdownShown(true);

package/src/group-form-entry-workflow/group-search/GroupSearch.tsx

@@ -1,13 +1,13 @@
-import React from "react";
+import React, { useCallback, useRef } from "react";
 import { useTranslation } from "react-i18next";
-import { Layer, Tile } from "@carbon/react";
+import { Layer, Tile, Loading } from "@carbon/react";
 import styles from "./group-search.scss";
 import { EmptyDataIllustration } from "../../empty-state/EmptyDataIllustration";
-import { useGroupSearch } from "./useGroupSearch";
 import CompactGroupResults, {
   SearchResultSkeleton,
 } from "./CompactGroupResults";
 import { GroupType } from "../../context/GroupFormWorkflowContext";
+import { useSearchCohortInfinite } from "../../hooks/useSearchEndpoint";
 
 interface GroupSearchProps {
   query: string;
@@ -19,8 +19,48 @@ const GroupSearch: React.FC<GroupSearchProps> = ({
   selectGroupAction,
 }) => {
   const { t } = useTranslation();
-  const results = useGroupSearch(query);
-  const error = false;
+  const {
+    isLoading,
+    data: results,
+    error,
+    loadingNewData,
+    setPage,
+    hasMore,
+    totalResults,
+  } = useSearchCohortInfinite({
+    searchTerm: query,
+    searching: !!query,
+    parameters: {
+      v: "full",
+    },
+  });
+
+  const lastItem = useRef(null);
+  const observer = useRef(null);
+  const loadingRef = useCallback(
+    (node) => {
+      if (loadingNewData) {
+        return;
+      }
+      if (observer.current) {
+        observer.current.disconnect();
+      }
+      observer.current = new IntersectionObserver(
+        (entries) => {
+          if (entries[0].isIntersecting && hasMore) {
+            setPage((page) => page + 1);
+          }
+        },
+        {
+          threshold: 0.75,
+        }
+      );
+      if (node) {
+        observer.current.observe(node);
+      }
+    },
+    [loadingNewData, hasMore, setPage]
+  );
 
   if (error) {
     return (
@@ -43,9 +83,19 @@ const GroupSearch: React.FC<GroupSearchProps> = ({
     );
   }
 
-  if (query.length <= 2) return <SearchResultSkeleton />;
+  if (isLoading) {
+    return (
+      <div className={styles.searchResultsContainer}>
+        <SearchResultSkeleton />
+        <SearchResultSkeleton />
+        <SearchResultSkeleton />
+        <SearchResultSkeleton />
+        <SearchResultSkeleton />
+      </div>
+    );
+  }
 
-  if (results.length === 0) {
+  if (results?.length === 0) {
     return (
       <div className={styles.searchResults}>
         <Layer>
@@ -79,12 +129,19 @@ const GroupSearch: React.FC<GroupSearchProps> = ({
         }}
       >
         <p className={styles.resultsText}>
-          {results.length} {t("searchResultsText", "search result(s)")}
+          {totalResults} {t("searchResultsText", "search result(s)")}
         </p>
         <CompactGroupResults
           groups={results}
           selectGroupAction={selectGroupAction}
+          lastRef={lastItem}
         />
+        <div ref={lastItem}>
+          <div className={styles.lastItem} ref={loadingRef}>
+            {hasMore && <Loading withOverlay={false} small />}
+            {!hasMore && <p>{t("noMoreResults", "End of search results")}</p>}
+          </div>
+        </div>
       </div>
     </div>
   );

package/src/group-form-entry-workflow/group-search/group-search.scss

@@ -29,12 +29,7 @@
   width: 100%;
 }
 
-.loadingIcon {
-  padding: spacing.$spacing-05 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
+
 
 .searchTerm {
   @include type.type-style('heading-03');
@@ -92,3 +87,10 @@
   @include type.type-style('body-01');
   color: $text-02;
 }
+
+.lastItem {
+  padding: spacing.$spacing-05;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

package/src/group-form-entry-workflow/group-search-header/GroupSearchHeader.tsx

@@ -1,16 +1,18 @@
 import { Close } from "@carbon/react/icons";
 import { Button } from "@carbon/react";
 import React, { useContext } from "react";
-import { Link } from "react-router-dom";
 import GroupFormWorkflowContext from "../../context/GroupFormWorkflowContext";
 import styles from "./styles.scss";
 import { useTranslation } from "react-i18next";
 import CompactGroupSearch from "../group-search/CompactGroupSearch";
 import AddGroupModal from "../../add-group-modal/AddGroupModal";
+import { navigate } from "@openmrs/esm-framework";
 
 const GroupSearchHeader = () => {
   const { t } = useTranslation();
-  const { activeGroupUuid, setGroup } = useContext(GroupFormWorkflowContext);
+  const { activeGroupUuid, setGroup, destroySession } = useContext(
+    GroupFormWorkflowContext
+  );
   const handleSelectGroup = (group) => {
     setGroup(group);
   };
@@ -29,11 +31,16 @@ const GroupSearchHeader = () => {
       </span>
       <span style={{ flexGrow: 1 }} />
       <span>
-        <Link to="..">
-          <Button kind="ghost">
-            {t("cancel", "Cancel")} <Close size={20} />
-          </Button>
-        </Link>
+        <Button
+          kind="ghost"
+          onClick={() => {
+            destroySession();
+            // eslint-disable-next-line
+            navigate({ to: "${openmrsSpaBase}/forms" });
+          }}
+        >
+          {t("cancel", "Cancel")} <Close size={20} />
+        </Button>
       </span>
     </div>
   );

package/src/group-form-entry-workflow/styles.scss

@@ -19,6 +19,16 @@
   width: 1100px;
 }
 
+:global(.omrs-breakpoint-lt-large-desktop) .workspace {
+  width: 1000px;
+}
+
+:global(.omrs-breakpoint-lt-small-desktop) .workspace {
+  // there's only so much we can do here. Currenlty the design does not support tablet
+  width: 100vw;
+  padding: 0 spacing.$spacing-04;
+}
+
 .selectPatientMessage {
   @include type.type-style('productive-heading-03');
   margin: spacing.$spacing-07;

package/src/hooks/index.ts

@@ -4,3 +4,4 @@ import useFormState from "./useFormState";
 import useGetEncounter from "./useGetEncounter";
 
 export { useGetAllForms, useGetPatient, useFormState, useGetEncounter };
+export * from "./usePostEndpoint";

package/src/hooks/usePostEndpoint.ts

@@ -0,0 +1,70 @@
+import { openmrsFetch } from "@openmrs/esm-framework";
+import { useCallback, useState } from "react";
+
+const usePostEndpoint = ({ endpointUrl }) => {
+  const [submissionInProgress, setSubmissionInProgress] = useState(null);
+  const [result, setResult] = useState(null);
+  const [error, setError] = useState(null);
+
+  const onFormPosted = useCallback(
+    (result) => {
+      setSubmissionInProgress(false);
+      if (error) {
+        setError(null);
+      }
+      setResult(result.data);
+    },
+    [error]
+  );
+
+  const onError = useCallback(
+    (error) => {
+      setSubmissionInProgress(false);
+      if (result) {
+        setResult(null);
+      }
+      setError(error?.responseBody?.error ?? error?.responseBody ?? error);
+    },
+    [result]
+  );
+
+  const post = useCallback(
+    async (data) => {
+      setSubmissionInProgress(true);
+      return openmrsFetch(endpointUrl, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: data,
+      })
+        .then(onFormPosted)
+        .catch(onError);
+    },
+    [endpointUrl, onError, onFormPosted]
+  );
+
+  const reset = () => {
+    setSubmissionInProgress(null);
+    setResult(null);
+    setError(null);
+  };
+
+  return {
+    post,
+    isPosting: submissionInProgress,
+    result,
+    error,
+    reset,
+  };
+};
+
+const usePostVisit = () => {
+  return usePostEndpoint({ endpointUrl: "/ws/rest/v1/visit" });
+};
+
+const usePostCohort = () => {
+  return usePostEndpoint({ endpointUrl: "/ws/rest/v1/cohortm/cohort" });
+};
+
+export { usePostEndpoint, usePostVisit, usePostCohort };

package/src/hooks/useSearchEndpoint.ts

@@ -0,0 +1,120 @@
+import { openmrsFetch, FetchResponse } from "@openmrs/esm-framework";
+import { useCallback, useMemo } from "react";
+import useSWRInfinite from "swr/infinite";
+
+export interface SearchResponse {
+  data: Array<Record<string, unknown>> | null;
+  isLoading: boolean;
+  error: Error;
+  loadingNewData: boolean;
+  hasMore: boolean;
+  currentPage: number;
+  totalResults: number;
+  setPage: (size: number | ((_size: number) => number)) => Promise<
+    FetchResponse<{
+      results: Array<Record<string, unknown>>;
+      links: Array<{
+        rel: "prev" | "next";
+      }>;
+    }>[]
+  >;
+}
+
+interface SearchInfiniteProps {
+  baseUrl?: string;
+  searchTerm: string;
+  parameters?: Record<string, unknown> | undefined;
+  searching: boolean;
+  resultsToFetch?: number;
+}
+
+const useSearchEndpointInfinite = (
+  arg0: SearchInfiniteProps
+): SearchResponse => {
+  const {
+    baseUrl,
+    searchTerm,
+    parameters,
+    searching = true,
+    resultsToFetch = 10,
+  } = arg0;
+
+  const getUrl = useCallback(
+    (
+      page: number,
+      prevPageData: FetchResponse<{
+        results: Array<Record<string, unknown>>;
+        links: Array<{ rel: "prev" | "next" }>;
+      }>
+    ) => {
+      if (
+        prevPageData &&
+        !prevPageData?.data?.links.some((link) => link.rel === "next")
+      ) {
+        return null;
+      }
+      let url = `${baseUrl}?q=${searchTerm}`;
+      const params = {
+        // merge passed parameters and default parameters
+        // this way the defaults can be overriden if needed
+        totalCount: true,
+        limit: resultsToFetch,
+        ...parameters,
+      };
+      Object.entries(params).forEach(([key, value]) => {
+        // don't send null parmeters
+        if (value !== null && value !== undefined) {
+          url += `&${key}=${value}`;
+        }
+      });
+      if (page) {
+        url += `&startIndex=${page * resultsToFetch}`;
+      }
+      return url;
+    },
+    [baseUrl, searchTerm, parameters, resultsToFetch]
+  );
+
+  const { data, isValidating, setSize, error, size } = useSWRInfinite<
+    FetchResponse<{
+      results: Array<Record<string, unknown>>;
+      links: Array<{ rel: "prev" | "next" }>;
+      totalCount: number;
+    }>,
+    Error
+  >(searching ? getUrl : null, openmrsFetch);
+
+  const results = useMemo(
+    () => ({
+      data: data
+        ? [].concat(...(data?.map((resp) => resp?.data?.results) ?? []))
+        : null,
+      isLoading: !data && !error,
+      error,
+      hasMore: data?.length
+        ? !!data[data.length - 1].data?.links?.some(
+            (link) => link.rel === "next"
+          )
+        : false,
+      loadingNewData: isValidating,
+      setPage: setSize,
+      currentPage: size,
+      totalResults: data?.[0]?.data?.totalCount,
+    }),
+    [data, isValidating, error, setSize, size]
+  );
+
+  return results;
+};
+
+const useSearchCohortInfinite = ({
+  ...props
+}: SearchInfiniteProps): SearchResponse => {
+  return useSearchEndpointInfinite({
+    baseUrl: "/ws/rest/v1/cohortm/cohort",
+    resultsToFetch: 10,
+    ...props,
+  });
+};
+
+export { useSearchEndpointInfinite, useSearchCohortInfinite };

package/translations/en.json

@@ -4,6 +4,7 @@
   "areYouSure": "Are you sure?",
   "cancel": "Cancel",
   "cancelExplanation": "You will lose any unsaved changes on the current form. Do you want to discard the current session?",
+  "changeGroup": "Choose a different group",
   "chooseGroupError": "Please choose a group.",
   "createNewPatient": "Create new patient",
   "createGroup": "Create Group",
@@ -27,10 +28,13 @@
   "nextPatient": "Next Patient",
   "noFormsFound": "No Forms To Show",
   "noFormsFoundMessage": "No forms could be found for this category. Please double check the form concept uuids and access permissions.",
+  "noMoreResults": "End of search results",
   "noGroupsFoundMessage": "Sorry, no groups have been found",
   "noPatientError": "Please enter at least one patient.",
   "or": "or",
   "orLabelName": "OR label name",
+  "patientsInGroup": "Patients in group",
+  "postError": "POST Error",
   "practitionerName": "Practitioner Name",
   "remove": "Remove",
   "resumeSession": "Resume Session",
@@ -45,5 +49,6 @@
   "sessionName": "Session Name",
   "sessionNotes": "Session Notes",
   "startGroupSession": "Start Group Session",
-  "trySearchWithPatientUniqueID": "Try searching with the cohort's description"
+  "trySearchWithPatientUniqueID": "Try searching with the cohort's description",
+  "unknownPostError": "An unknown error occured while saving data"
 }

package/src/group-form-entry-workflow/group-banner/index.ts

@@ -1,3 +0,0 @@
-import GroupBanner from "./GroupBanner";
-
-export default GroupBanner;

package/src/group-form-entry-workflow/group-search/mock-group-data.ts

@@ -1,79 +0,0 @@
-export const mockGroupData = [
-  {
-    id: 1,
-    name: "Teal Group",
-    description: "Coping skills group - Calgary",
-    members: [
-      {
-        name: "Donna Campbell",
-        uuid: "f87cae5e-6b64-4f64-884d-d46043a3b7da",
-      },
-      {
-        name: "Agnes Lewis",
-        uuid: "8af48d72-b155-4b41-ba9c-39e017fcf452",
-      },
-      {
-        name: "Daniel Mitchell",
-        uuid: "63665703-de71-4a2b-baa4-1a3acf995b7f",
-      },
-    ],
-  },
-  {
-    id: 2,
-    name: "Orange Group",
-    description: "Thursday night depression session",
-    members: [
-      {
-        name: "Mark Martin",
-        uuid: "eaef5256-ce7c-402c-9e56-f8e5d1fba22f",
-      },
-      {
-        name: "Robert Evans",
-        uuid: "8648a68d-1d68-4293-9d1a-a7a188b91418",
-      },
-      {
-        name: "Linda Johnson",
-        uuid: "8078cc5f-3cd7-4ebb-9ade-515c0dd5f85f",
-      },
-      {
-        name: "Daniel Green",
-        uuid: "4ff33dfa-e4ad-4cb5-bbad-8936f9d162df",
-      },
-      {
-        name: "Kimberly Adams",
-        uuid: "65bb2ebd-fef9-48c4-9c64-16445fa4fe7c",
-      },
-      {
-        name: "Daniel Lee",
-        uuid: "7d46336f-4b6e-4daa-a122-77a7efeb7a2e",
-      },
-      {
-        name: "Nancy Hernández",
-        uuid: "89ee2163-4dd4-4d4b-9882-f6be19c15b8f",
-      },
-    ],
-  },
-  {
-    id: 3,
-    name: "Blue Group",
-    description: "Thursday night depression session",
-    members: [
-      {
-        name: "Patty Patterson",
-        uuid: "9bf3adf4-3a5e-48b2-9adf-e117ce2ecdc5",
-      },
-      {
-        name: "Johnny Cash",
-        uuid: "f43172b8-a6fc-4edb-b92b-8d759ed9da50",
-      },
-      {
-        name: "John Doe Two",
-        uuid: "fa918efe-a4a4-4ac8-8381-3ba14ac61953",
-      },
-      {
-        name: "Foo Bazzi Bar",
-        uuid: "791c9475-8396-4519-a8ab-905cee8cccd3",
-      },
-    ],
-  },
-];

package/src/group-form-entry-workflow/group-search/useGroupSearch.ts

@@ -1,14 +0,0 @@
-import { mockGroupData } from "./mock-group-data";
-
-export function useGroupSearch(filter) {
-  const searchHistory = mockGroupData || [];
-  // if (filter.length <= 2) return [];
-
-  return filter
-    ? searchHistory?.filter(
-        (item) =>
-          item?.description?.toLowerCase()?.includes(filter?.toLowerCase()) ||
-          item?.name?.toLowerCase()?.includes(filter?.toLowerCase())
-      )
-    : searchHistory;
-}

package/src/hooks/usePostCohort.ts

@@ -1,18 +0,0 @@
-import { openmrsFetch } from "@openmrs/esm-framework";
-
-const usePostCohort = () => {
-  const cohortURL = `/ws/rest/v1/cohortm/cohort`;
-  const fetcher = openmrsFetch(cohortURL, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-    },
-    body: {
-      name: "Magenta",
-      cohortType: "hello",
-    },
-  });
-  return fetcher;
-};
-
-export default usePostCohort;