Merge pull request #486 from coronasafe/develop

Minor Release v2.6.1

package.json

@@ -51,6 +51,7 @@
     "@types/react-redux": "^7.1.9",
     "@types/react-select": "3.0.14",
     "@types/react-slick": "^0.23.4",
+    "@types/react-swipeable-views": "^0.13.0",
     "@types/react-virtualized": "^9.21.10",
     "@typescript-eslint/eslint-plugin": "^3.7.0",
     "@typescript-eslint/parser": "^3.7.0",
@@ -78,6 +79,8 @@
     "react-phone-input-2": "^2.13.7",
     "react-redux": "^7.2.0",
     "react-scripts": "^3.4.1",
+    "react-swipeable-views": "^0.13.9",
+    "react-transition-group": "^4.4.1",
     "react-virtualized": "^9.21.2",
     "reason-react": "^0.9.1",
     "redux": "^4.0.5",

src/Common/constants.tsx

@@ -87,7 +87,8 @@ export const BED_TYPES: Array<OptionsType> = [
   { id: 2, text: "Hostel" },
   { id: 3, text: "Single Room with Attached Bathroom" },
   { id: 10, text: "ICU" },
-  { id: 20, text: "Ventilator" }
+  { id: 20, text: "Ventilator" },
+  { id: 30, text: "Covid Beds" }
 ];
 
 export const DOCTOR_SPECIALIZATION: Array<OptionsType> = [
@@ -103,7 +104,10 @@ export const MEDICAL_HISTORY_CHOICES: Array<OptionsType> = [
   { id: 2, text: "Diabetes" },
   { id: 3, text: "Heart Disease" },
   { id: 4, text: "HyperTension" },
-  { id: 5, text: "Kidney Diseases" }
+  { id: 5, text: "Kidney Diseases" },
+  { id: 6, text: "Lung Diseases/Asthma"},
+  { id: 7, text: "Cancer"},
+  { id: 8, text: "OTHER"}
 ];
 
 export const SYMPTOM_CHOICES: Array<OptionsType> = [

src/Components/Common/NavTabs.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+
+interface TabValue {
+    value: number,
+    label: string
+}
+interface TabChange {
+    (value: number):void
+}
+interface NavTabsProps {
+    active?: number;
+    options?: TabValue[];
+    onChange: TabChange;
+  }
+
+export default function NavTabs(props:NavTabsProps) {
+    let {active, options, onChange} = props;
+    return(
+        <div>
+            <div className="sm:hidden p-2">
+            <select 
+                className="mt-1 form-select block w-full pl-3 pr-10 py-2 text-base leading-6 border-gray-300 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm sm:leading-5 transition ease-in-out duration-150"
+                value={active}
+                onChange={e=>onChange(Number(e.target.value))}
+            >
+                {options?.map((option:TabValue) => 
+                    <option value={option.value}>{option.label}</option>
+                )}
+            </select> 
+            </div>
+            <div className="hidden sm:block">
+            <div className="border-b border-gray-200">
+                <nav className="-mb-px flex justify-around">
+                {options?.map((option:TabValue) =>
+                    <button 
+                        className={ option.value === active
+                                ? "whitespace-no-wrap ml-8 py-4 px-1 border-b-2 border-indigo-500 font-medium text-sm leading-5 text-indigo-600 focus:outline-none focus:text-indigo-800 focus:border-indigo-700"
+                                : "whitespace-no-wrap py-4 px-1 border-b-2 border-transparent font-medium text-sm leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300"
+                            }
+                        onClick={_=>onChange(option.value)}>
+                        {option.label}
+                    </button>)}
+                </nav>
+            </div>
+            </div>
+        </div>
+
+    )
+}

src/Components/Common/Pagination.tsx

@@ -19,7 +19,7 @@ const Pagination = (props: PaginationProps) => {
                 setRowsPerPage(props.defaultPerPage);
             }
             if (props.cPage) {
-                setCurrentPage(props.cPage);
+                setCurrentPage(parseInt(`${props.cPage}`));
             }
         }
     }, [props]);

src/Components/Common/SearchBox.tsx

@@ -1,34 +1,47 @@
-import { TextFieldProps } from '@material-ui/core';
-const debounce = require('lodash.debounce');
-import React, { useCallback, useState } from 'react';
-
 
+import React, { useCallback, useState, useEffect } from 'react';
+import { TextFieldProps } from '@material-ui/core';
+import debounce from 'lodash/debounce';
 
-type TextFieldPropsExtended = TextFieldProps & { errors: string, search: (value: string) => void }
+type TextFieldPropsExtended = TextFieldProps & { 
+        errors: string, 
+        search: (value: string) => void,
+        value?: string
+    }
 
 export const InputSearchBox = (props: TextFieldPropsExtended) => {
-    const [state, setState] = useState("")
-    const { search, placeholder } = props;
 
-    const handler = useCallback(debounce(search, 500), []);
+    const { search, placeholder, value   } = props;
+    const [searchValue, setSearchValue] = useState(value);
+    const handler = useCallback(debounce(search, 500), [search]);
 
     const handleKeyDown = (event: any) => {
         const value = event.target.value;
-        setState(value);
+        setSearchValue(value);
         if (value.length === 0 || value.length > 2) {
             handler(value);
         }
     };
 
+    useEffect(()=> {
+        setSearchValue(value);
+    },[value])
+
     const clearSearch = () => {
         handler("");
-        setState("");
+        setSearchValue("");
     };
 
+    const inputProps = {
+        placeholder, 
+        onChange: handleKeyDown,
+        value: searchValue
+    } 
+
     return (
         <div className="md:flex sticky top-0 bg-gray-100">
             <div className="relative rounded-md shadow-sm max-w-sm w-full">
-                {state ?
+                {searchValue ?
                     <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none cursor-pointer" onClick={clearSearch} >
                         <span className="text-gray-500 sm:text-sm sm:leading-5" >
                             <i className="fas fa-times text-md " ></i>
@@ -40,7 +53,8 @@ export const InputSearchBox = (props: TextFieldPropsExtended) => {
                         </span>
                     </div>
                 }
-                <input name="search" type="text" value={state} placeholder={placeholder} onChange={handleKeyDown} className="form-input block w-full pl-8 pr-3 sm:text-sm sm:leading-5" />
+                <input name="search" type="text" {...inputProps}
+                    className="form-input block w-full pl-8 pr-3 sm:text-sm sm:leading-5" />
             </div>
         </div>
     )

src/Components/Common/SlideOver.gen.tsx

@@ -0,0 +1,21 @@
+/* TypeScript file generated from SlideOver.re by genType. */
+/* eslint-disable import/first */
+
+
+import * as React from 'react';
+
+// tslint:disable-next-line:no-var-requires
+const SlideOverBS = require('./SlideOver.bs');
+
+// tslint:disable-next-line:interface-over-type-literal
+export type Props = {
+  readonly children: React.ReactNode; 
+  readonly setShow: (_1:boolean) => void; 
+  readonly show: boolean
+};
+
+export const make: React.ComponentType<{
+  readonly children: React.ReactNode; 
+  readonly setShow: (_1:boolean) => void; 
+  readonly show: boolean
+}> = SlideOverBS.make;

src/Components/Common/SlideOver.re

@@ -0,0 +1,36 @@
+let str = React.string;
+
+[@genType]
+[@react.component]
+let make = (~show, ~setShow, ~children) => {
+    <Transition show={Some(show)} >
+    <div className="inset-0 overflow-hidden fixed z-40">
+        <div className="absolute inset-0 overflow-hidden">
+            <Transition                
+                enter="ease-in-out duration-500"
+                enterFrom="opacity-0"
+                enterTo="opacity-100"
+                leave="ease-in-out duration-500"
+                leaveFrom="opacity-100"
+                leaveTo="opacity-0"
+            >
+            <div className="absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity" onClick={_=>setShow(false)}></div>
+            </Transition>
+            <section className="absolute inset-y-0 max-w-full right-0 flex">
+                <Transition
+                    enter="transform transition ease-in-out duration-500 sm:duration-700"
+                    enterFrom="translate-x-full"
+                    enterTo="translate-x-0"
+                    leave="transform transition ease-in-out duration-500 sm:duration-700"
+                    leaveFrom="translate-x-0"
+                    leaveTo="translate-x-full"
+                >
+                    <div className="w-screen max-w-sm">
+                        children
+                    </div>
+                </Transition>
+            </section>
+        </div>
+    </div>
+    </Transition>;
+}