Merge branch 'develop'

.github/workflows/combine-prs.yml

@@ -0,0 +1,140 @@
+#Taken from https://github.com/hrvey/combine-prs-workflow/blob/master/combine-prs.yml
+#https://www.hrvey.com/blog/combine-dependabot-prs
+
+name: 'Combine PRs'
+
+# Controls when the action will run - in this case triggered manually
+on:
+  workflow_dispatch:
+    inputs:
+      branchPrefix:
+        description: 'Branch prefix to find combinable PRs based on'
+        required: true
+        default: 'dependabot'
+      mustBeGreen:
+        description: 'Only combine PRs that are green (status is success)'
+        required: true
+        default: true
+      combineBranchName:
+        description: 'Name of the branch to combine PRs into'
+        required: true
+        default: 'combine-prs-branch'
+      ignoreLabel:
+        description: 'Exclude PRs with this label'
+        required: true
+        default: 'nocombine'
+
+# A workflow run is made up of one or more jobs that can run sequentially or in parallel
+jobs:
+  # This workflow contains a single job called "combine-prs"
+  combine-prs: 
+    # The type of runner that the job will run on
+    runs-on: ubuntu-latest
+
+    # Steps represent a sequence of tasks that will be executed as part of the job
+    steps:
+      - uses: actions/github-script@v3
+        id: fetch-branch-names
+        name: Fetch branch names
+        with:
+          github-token: ${{secrets.GITHUB_TOKEN}}
+          script: |
+            const pulls = await github.paginate('GET /repos/:owner/:repo/pulls', {
+              owner: context.repo.owner,
+              repo: context.repo.repo
+            });
+            branches = [];
+            prs = [];
+            base_branch = null;
+            for (const pull of pulls) {
+              const branch = pull['head']['ref'];
+              console.log('Pull for branch: ' + branch);
+              if (branch.startsWith('${{ github.event.inputs.branchPrefix }}')) {
+                console.log('Branch matched: ' + branch);
+                statusOK = true;
+                if(${{ github.event.inputs.mustBeGreen }}) {
+                  console.log('Checking green status: ' + branch);
+                  const statuses = await github.paginate('GET /repos/{owner}/{repo}/commits/{ref}/status', {
+                    owner: context.repo.owner,
+                    repo: context.repo.repo,
+                    ref: branch
+                  });
+                  if(statuses.length > 0) {
+                    const latest_status = statuses[0]['state'];
+                    console.log('Validating status: ' + latest_status);
+                    if(latest_status != 'success') {
+                      console.log('Discarding ' + branch + ' with status ' + latest_status);
+                      statusOK = false;
+                    }
+                  }
+                }
+                console.log('Checking labels: ' + branch);
+                const labels = pull['labels'];
+                for(const label of labels) {
+                  const labelName = label['name'];
+                  console.log('Checking label: ' + labelName);
+                  if(labelName == '${{ github.event.inputs.ignoreLabel }}') {
+                    console.log('Discarding ' + branch + ' with label ' + labelName);
+                    statusOK = false;
+                  }
+                }
+                if (statusOK) {
+                  console.log('Adding branch to array: ' + branch);
+                  branches.push(branch);
+                  prs.push('#' + pull['number'] + ' ' + pull['title']);
+                  base_branch = pull['base']['ref'];
+                }
+              }
+            }
+            if (branches.length == 0) {
+              core.setFailed('No PRs/branches matched criteria');
+              return;
+            }
+            core.setOutput('base-branch', base_branch);
+            core.setOutput('prs-string', prs.join('\n'));
+            
+            combined = branches.join(' ')
+            console.log('Combined: ' + combined);
+            return combined
+      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
+      - uses: actions/checkout@v2.3.3
+        with:
+          fetch-depth: 0
+      # Creates a branch with other PR branches merged together
+      - name: Created combined branch
+        env:
+          BASE_BRANCH: ${{ steps.fetch-branch-names.outputs.base-branch }}
+          BRANCHES_TO_COMBINE: ${{ steps.fetch-branch-names.outputs.result }}
+          COMBINE_BRANCH_NAME: ${{ github.event.inputs.combineBranchName }}
+        run: |
+          echo "${{steps.fetch-branch-names.outputs.result}}"
+          sourcebranches="${BRANCHES_TO_COMBINE%\"}"
+          sourcebranches="${sourcebranches#\"}"
+          
+          basebranch="${BASE_BRANCH%\"}"
+          basebranch="${basebranch#\"}"
+          
+          git config pull.rebase false
+          git config user.name github-actions
+          git config user.email github-actions@github.com
+          
+          git branch $COMBINE_BRANCH_NAME $basebranch
+          git checkout $COMBINE_BRANCH_NAME
+          git pull origin $sourcebranches --no-edit
+          git push origin $COMBINE_BRANCH_NAME
+      # Creates a PR with the new combined branch
+      - uses: actions/github-script@v3
+        name: Create Combined Pull Request
+        with:
+          github-token: ${{secrets.GITHUB_TOKEN}}
+          script: |
+            const prString = `${{ steps.fetch-branch-names.outputs.prs-string }}`;
+            const body = 'This PR was created by the Combine PRs action by combining the following PRs:\n' + prString;
+            await github.pulls.create({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              title: 'Combined PR',
+              head: '${{ github.event.inputs.combineBranchName }}',
+              base: '${{ steps.fetch-branch-names.outputs.base-branch }}',
+              body: body
+            });

.gitignore

@@ -5,9 +5,6 @@
 
 /public/env.js
 
-# vscode
-.vscode
-
 # dependencies
 node_modules
 

.vscode/tb-snipits.code-snippets

@@ -0,0 +1,67 @@
+{
+	// Place your tb-mobile-app workspace snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
+	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
+	// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
+	// used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
+	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
+	// Placeholders with the same ids are connected.
+	// Example:
+	// "Print to console": {
+	// 	"scope": "javascript,typescript",
+	// 	"prefix": "log",
+	// 	"body": [
+	// 		"console.log('$1');",
+	// 		"$2"
+	// 	],
+	// 	"description": "Log output to console"
+	// }
+	"Component Scafold": {
+		"prefix": "component-scafold",
+		"body": [
+			"import React from 'react';",
+			"import { makeStyles } from '@material-ui/core/styles';",
+			"import useStores from '../../Basics/UseStores';",
+			"import {observer} from 'mobx-react';",
+			"",
+			"const useStyles = makeStyles({",
+			"  ",
+			"})",
+			"",
+			"const CompName = () => {",
+			"",
+			"    const classes = useStyles();",
+			"",
+			"    return(<div>",
+			"",
+			"    </div>)",
+			"",
+			"}",
+			"",
+			"export default CompName;"
+		],
+		"description": "Component Scafold"
+	},
+	"Class Names": {
+		"prefix": "className",
+		"body": [
+			"className={classes.$1}"
+		],
+		"description": "Class Names"
+	},
+	"Translation": {
+		"prefix": "translate",
+		"body": [
+			"import { useTranslation } from 'react-i18next';",
+			"const { t } = useTranslation('translation');"
+		],
+		"description": "i18n helper"
+	},
+	"Common hooks": {
+		"prefix": "common-hooks",
+		"body": [
+			"const { t } = useTranslation('translation');",
+			"const classes = useStyles();"
+		],
+		"description": "Common hooks to use in a sub component"
+	},
+}

README.md

@@ -7,7 +7,7 @@ Tuberculosis remains one of the top ten causes of death globally despite it bein
 ## History of Project 
 A previous version of this application was developed on this repo and the code is still available on the [v1-stable]([https://github.com/uwcirg/tb-mobile-app/tree/v1-stable](https://github.com/uwcirg/tb-mobile-app/tree/v1-stable)) branch.
 
-Version 2 aims to provide a feedback driven UI, better user encouragement,v improved developer experience, and multi-site design. Furthermore, we aim to provide a good experience for users on inconsistent connections, using ideas from [progressive web apps]([https://developers.google.com/web/progressive-web-apps](https://developers.google.com/web/progressive-web-apps)).
+Version 2 aims to provide a feedback driven UI, better user encouragement, improved developer experience, and multi-site design. Furthermore, we aim to provide a good experience for users on inconsistent connections, using ideas from [progressive web apps]([https://developers.google.com/web/progressive-web-apps](https://developers.google.com/web/progressive-web-apps)).
 
 ## Software Architecture 
 

package.json

@@ -24,7 +24,7 @@
     "jest": "^24.9.0",
     "localforage": "^1.9.0",
     "luxon": "^1.21.3",
-    "markdown-to-jsx": "^6.11.1",
+    "markdown-to-jsx": "^6.11.4",
     "minio": "^7.0.13",
     "mobx": "^5.15.0",
     "mobx-react": "^6.1.4",

public/config.js

@@ -2,4 +2,4 @@
 //These will be overriden when a build artifact is created (see Dockerfile)
 console.log("Using Development Environment Variables. If needed configure /public/config.js")
 const react_env = {URL_API: "http://localhost:5062",URL_CLIENT:"http://localhost:3000", DEFAULT_LOCALE: "es-AR", 
-ENVIRONMENT: "development", DOCKER_TAG: "develop", REDCAP_EOT_SURVEY_LINK: "https://google.com"}
+ENVIRONMENT: "development", DOCKER_TAG: "develop", REDCAP_EOT_SURVEY_LINK: "https://docs.google.com/forms/d/e/1FAIpQLSegqQ0rFOU3I2pxCPxhvWnfMnmyuOopUTqyWXT0oqt-23b5_w/viewform"}

src/App.css

@@ -1,6 +1,11 @@
 
 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
 
+/* Fixes bug with update popup overriding styles and making title text huge 07-12-2021 */
+.MuiTypography-h1{
+    font-size: 1.25em !important;
+}
+
 html, body{
     margin: 0;
     padding: 0;

src/Basics/AppLogo.js

@@ -1,17 +1,17 @@
 import React from 'react'
 import styled from 'styled-components'
-import {useTranslation} from 'react-i18next'
+import { useTranslation } from 'react-i18next'
 
 const AppLogo = (props) => {
-    const { t } = useTranslation('translation');
-    const BASE_URL = (window && window._env) ? window._env.URL_CLIENT : ""
+  const { t } = useTranslation('translation');
+  const BASE_URL = (window && window._env) ? window._env.URL_CLIENT : ""
 
-    return(
+  return (
     <Title className={props.className}>
-    <img src={`${BASE_URL}/${props.white ? "logo-white.png" : "logo.png"}`}></img>
-    <h1>{t("title")}</h1>
+      <img src={`${BASE_URL}/${props.white ? "logo-white.png" : "logo.png"}`}></img>
+      <h1>{t("title")}</h1>
     </Title>
-    )
+  )
 }
 
 const Title = styled.div`

src/Basics/Colors.js

@@ -22,6 +22,7 @@ const Colors = {
     yellow: "#FCC419",
     reportBlue: "#98B9F2",
     timelineYellow: "rgba(242,201,76,.25)",
+    highlightYellow: "#fbf2d3",
     patientHistory:{
         report: "rgba(39, 174, 96, .35)",
         milestone: "rgba(242, 153, 74, .35)",

src/Basics/DatePicker.js

@@ -4,12 +4,22 @@ import { observer } from 'mobx-react'
 import { DatePicker } from "@material-ui/pickers";
 import { MuiPickersUtilsProvider } from '@material-ui/pickers';
 import DateFnsUtils from '@date-io/luxon';
-import Cancel from '@material-ui/icons/Cancel'
-import Check from '@material-ui/icons/CheckCircleOutline'
 import Colors from './Colors';
+import Exit from '@material-ui/icons/Close';
+import CheckIcon from '@material-ui/icons/Check';
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles({
+    button:{
+        borderRadius: "5px",
+        color: "white",
+        padding: ".5em"
+    }
+})
 
 const LocalizedDatePicker = observer((props) => {
 
+    const classes = useStyles();
     const { uiStore } = useStores();
 
     return (
@@ -25,8 +35,9 @@ const LocalizedDatePicker = observer((props) => {
                 animateYearScrolling
                 disableFuture={props.disableFuture}
                 disablePast={props.disablePast}
-                cancelLabel={<Cancel style={{ color: Colors.red }} />}
-                okLabel={<Check style={{ color: Colors.green }} />}
+                cancelLabel={<Exit className={classes.button} style={{ backgroundColor: Colors.red }} />}
+                okLabel={<CheckIcon className={classes.button} style={{ backgroundColor: Colors.green }} />}
+                onAccept={props.onAccept}
             />
         </MuiPickersUtilsProvider>
     )

src/Basics/SimpleTimePicker.js

@@ -99,23 +99,32 @@ const SingleSide = (props) => {
     )
 }
 
-const TimePicker = observer((props) => {
+const TimePicker = observer(({value, setValue}) => {
     const classes = useStyles();
     // Remove for interoprability const { patientStore } = useStores();
 
-    const parsed = props.timeTaken ? DateTime.fromISO(props.timeTaken) : DateTime.local();
+    const parsed = value ? DateTime.fromISO(value) : DateTime.local();
     const hour = parsed.hour;
     const minute = parsed.minute;
 
     //If less than 10 add a zero to the front digit  
 
+    const handleChange = (timeType, newValue) => {
+        const isValidChange = ((timeType === "hour" && newValue < 24) || (timeType === "minute" && newValue < 60)) && newValue >= 0
+        if (isValidChange) {
+            let changes = {}
+            changes[timeType] = newValue;
+            setValue(DateTime.fromISO(value).set(changes))
+        }
+    }
+
     return (
         <form className={classes.container} noValidate>
-            <SingleSide timeType="hour" handleChange={props.handleChange} value={hour} />
+            <SingleSide timeType="hour" handleChange={handleChange} value={hour} />
             <div className={classes.seperator}>
                 <span>:</span>
             </div>
-            <SingleSide timeType="minute" handleChange={props.handleChange} value={minute} />
+            <SingleSide timeType="minute" handleChange={handleChange} value={minute} />
         </form>
     );
 });

src/Basics/UpdateAvailablePopUp.js

@@ -3,10 +3,10 @@ import { makeStyles } from '@material-ui/core/styles';
 import { useTranslation } from 'react-i18next';
 
 import PopUp from '../Patient/Navigation/PopUp';
-import Typography from '@material-ui/core/Typography'
+import Typography from '@material-ui/core/Typography';
 import { ReactComponent as DoctorIcon } from './Icons/doctor.svg';
 import ClickableText from './ClickableText';
-import NewButton from './NewButton'
+import NewButton from './NewButton';
 
 const useStyles = makeStyles({
     body: {