ehr-alerts-ui 0.0.25 → 0.0.27

package/src/library/components/AlertsTable/AlertsTable.tsx

@@ -1,35 +1,47 @@
-import React, {useEffect, useState} from "react";
-import {Button, CollapseTable, CollapseTableRow, ControlledPopover, Tooltip} from 'ehr-components';
-import SortableRow from "./SortableRow";
-import {Alert} from "../../reducers/tableReducer";
-import {ReactComponent as CopyIcon} from "../../assets/icons/copy.svg";
-import {ReactComponent as DeleteIcon} from "../../assets/icons/delete.svg";
-import {ReactComponent as EditIcon} from "../../assets/icons/edit.svg";
+import React, { useEffect, useState } from 'react';
+import {
+  Button,
+  CollapseTable,
+  CollapseTableRow,
+  ControlledPopover,
+  Tooltip,
+} from 'ehr-components';
+import SortableRow from './SortableRow';
+import { Alert } from '../../reducers/tableReducer';
+import { ReactComponent as CopyIcon } from '../../assets/icons/copy.svg';
+import { ReactComponent as DeleteIcon } from '../../assets/icons/delete.svg';
+import { ReactComponent as EditIcon } from '../../assets/icons/edit.svg';
 import styles from '../../assets/styles/contstants.module.scss';
-import {FormattedMessage} from "react-intl";
-
+import { FormattedMessage } from 'react-intl';
 
 export interface AlertsTableState {
-  alerts: Alert[],
+  alerts: Alert[];
 }
 
 export interface AlertsTableDispatch {
-  loadAlerts: () => void,
-  clearAlerts: () => void,
-  editAlert: (alert: Alert) => void,
-  setDeleteOpen: (id: number) => void,
-  clearDeletes: () => void,
-  deleteAlert: (id: number) => void,
-  duplicateAlert: (alert: Alert) => void,
+  loadAlerts: () => void;
+  clearAlerts: () => void;
+  editAlert: (alert: Alert) => void;
+  setDeleteOpen: (id: number) => void;
+  clearDeletes: () => void;
+  deleteAlert: (id: number) => void;
+  duplicateAlert: (alert: Alert) => void;
 }
 
 interface InnerAlert extends Alert {
-  time: string,
+  time: string;
 }
 
-const AlertsTable: React.FC<AlertsTableState & AlertsTableDispatch> = ({alerts, loadAlerts, clearAlerts, editAlert,
-                                                                         clearDeletes, setDeleteOpen, deleteAlert,
-                                                                         duplicateAlert}) => {
+const AlertsTable: React.FC<AlertsTableState & AlertsTableDispatch> = ({
+  alerts,
+  loadAlerts,
+  clearAlerts,
+  editAlert,
+  clearDeletes,
+  setDeleteOpen,
+  deleteAlert,
+  duplicateAlert,
+}) => {
   const [content, setContent] = useState<any[]>([]);
   const [header, setHeader] = useState<(string | JSX.Element)[]>([]);
 
@@ -52,22 +64,23 @@ const AlertsTable: React.FC<AlertsTableState & AlertsTableDispatch> = ({alerts,
 
     return () => {
       clearAlerts();
-    }
+    };
   }, []);
 
   // Update content
   useEffect(() => {
     setContent(
-      alerts.filter((alert) => (!alert.deleted)).map((alert) => ({
-        ...alert,
-        time: `${alert.begin} - ${alert.end}`,
-      }))
+      alerts
+        .filter((alert) => !alert.deleted)
+        .map((alert) => ({
+          ...alert,
+          time: `${alert.begin} - ${alert.end}`,
+        })),
     );
 
     updateHeader();
   }, [alerts]);
 
-
   function onAccenting(index: number | string) {
     sortContent(index, -1);
     updateHeader(index, undefined);
@@ -92,30 +105,65 @@ const AlertsTable: React.FC<AlertsTableState & AlertsTableDispatch> = ({alerts,
     // for each element of that array take the index (column) in which we want to sort.
     // Then sort it based on the direction the user has defined.
     setContent((content) => {
-      return [...content.sort((c1, c2) => {
-        if (c1[index] < c2[index]) {
-          return direction;
-        }
-        if (c1[index] > c2[index]) {
-          return -direction;
-        }
-        return 0;
-      })]
+      return [
+        ...content.sort((c1, c2) => {
+          if (c1[index] < c2[index]) {
+            return direction;
+          }
+          if (c1[index] > c2[index]) {
+            return -direction;
+          }
+          return 0;
+        }),
+      ];
     });
   }
 
-  function updateHeader(accentingIndex?: number | string, descendingIndex?: number | string) {
+  function updateHeader(
+    accentingIndex?: number | string,
+    descendingIndex?: number | string,
+  ) {
     setHeader([
-      <SortableRow title='Teate pealkiri' index={'title'} onAccenting={onAccenting} onDescending={onDescending}
-                   isAccenting={accentingIndex === 'title'} isDescending={descendingIndex === 'title'} />,
-      <SortableRow title='Teate publik' index={'audience'} onAccenting={onAccenting} onDescending={onDescending}
-                   isAccenting={accentingIndex === 'audience'} isDescending={descendingIndex === 'audience'} />,
-      <SortableRow title='Teate tase' index={'level'} onAccenting={onAccenting} onDescending={onDescending}
-                   isAccenting={accentingIndex === 'level'} isDescending={descendingIndex === 'level'} />,
-      <SortableRow title='Teate kuvamise aeg' index={'time'} onAccenting={onAccenting} onDescending={onDescending}
-                   isAccenting={accentingIndex === 'time'} isDescending={descendingIndex === 'time'} />,
-      <SortableRow title='Teate sisu' index={'content'} onAccenting={onAccenting} onDescending={onDescending}
-                   isAccenting={accentingIndex === 'content'} isDescending={descendingIndex === 'content'} />,
+      <SortableRow
+        title="Teate pealkiri"
+        index={'title'}
+        onAccenting={onAccenting}
+        onDescending={onDescending}
+        isAccenting={accentingIndex === 'title'}
+        isDescending={descendingIndex === 'title'}
+      />,
+      <SortableRow
+        title="Teate publik"
+        index={'audience'}
+        onAccenting={onAccenting}
+        onDescending={onDescending}
+        isAccenting={accentingIndex === 'audience'}
+        isDescending={descendingIndex === 'audience'}
+      />,
+      <SortableRow
+        title="Teate tase"
+        index={'level'}
+        onAccenting={onAccenting}
+        onDescending={onDescending}
+        isAccenting={accentingIndex === 'level'}
+        isDescending={descendingIndex === 'level'}
+      />,
+      <SortableRow
+        title="Teate kuvamise aeg"
+        index={'time'}
+        onAccenting={onAccenting}
+        onDescending={onDescending}
+        isAccenting={accentingIndex === 'time'}
+        isDescending={descendingIndex === 'time'}
+      />,
+      <SortableRow
+        title="Teate sisu"
+        index={'content'}
+        onAccenting={onAccenting}
+        onDescending={onDescending}
+        isAccenting={accentingIndex === 'content'}
+        isDescending={descendingIndex === 'content'}
+      />,
       '',
       '',
       '',
@@ -125,18 +173,41 @@ const AlertsTable: React.FC<AlertsTableState & AlertsTableDispatch> = ({alerts,
   const deleteContent = (id: number) => (
     <div>
       <h4>
-        <FormattedMessage defaultMessage={'Kas olete kindel, et soovite selle rea kustutada?'} id={'common.confirmation.modal.header'} />
+        <FormattedMessage
+          defaultMessage={'Kas olete kindel, et soovite selle rea kustutada?'}
+          id={'common.confirmation.modal.header'}
+        />
       </h4>
       <p>
-        <FormattedMessage defaultMessage={'Kustutatud ridu ei ole võimalik hiljem taastada'} id={'common.confirmation.modal.description'} />
+        <FormattedMessage
+          defaultMessage={'Kustutatud ridu ei ole võimalik hiljem taastada'}
+          id={'common.confirmation.modal.description'}
+        />
       </p>
 
       <div>
-        <Button colourScheme={'light'} squared type={'reset'} onClick={onDeleteCancel}>
-          <FormattedMessage defaultMessage={'Loobun'} id={'common.confirmation.modal.no'} />
+        <Button
+          colourScheme={'light'}
+          squared
+          type={'reset'}
+          onClick={onDeleteCancel}
+        >
+          <FormattedMessage
+            defaultMessage={'Loobun'}
+            id={'common.confirmation.modal.no'}
+          />
         </Button>
-        <Button className={'float-right'} colourScheme={'danger'} onClick={() => onDeletePress(id)} squared type={'submit'}>
-          <FormattedMessage defaultMessage={'Kustutan'} id={'common.confirmation.modal.yes'} />
+        <Button
+          className={'float-right'}
+          colourScheme={'danger'}
+          onClick={() => onDeletePress(id)}
+          squared
+          type={'submit'}
+        >
+          <FormattedMessage
+            defaultMessage={'Kustutan'}
+            id={'common.confirmation.modal.yes'}
+          />
         </Button>
       </div>
     </div>
@@ -157,13 +228,19 @@ const AlertsTable: React.FC<AlertsTableState & AlertsTableDispatch> = ({alerts,
       alert.level,
       alert.time,
       alert.content,
-      <Tooltip content='Kopeerin'>
-        <button className='alerts-ui--icon-button' onClick={() => duplicateAlert(alert)}>
+      <Tooltip content="Kopeerin">
+        <button
+          className="alerts-ui--icon-button"
+          onClick={() => duplicateAlert(alert)}
+        >
           <CopyIcon fill={styles.colorGreyDark} />
         </button>
       </Tooltip>,
-      <Tooltip content='Muudan'>
-        <button className='alerts-ui--icon-button' onClick={() => editAlert(alert)}>
+      <Tooltip content="Muudan">
+        <button
+          className="alerts-ui--icon-button"
+          onClick={() => editAlert(alert)}
+        >
           <EditIcon fill={styles.colorGreyDark} />
         </button>
       </Tooltip>,
@@ -176,8 +253,10 @@ const AlertsTable: React.FC<AlertsTableState & AlertsTableDispatch> = ({alerts,
         toggle={() => onToggleDeletePopup(alert)}
       >
         <div>
-          <Tooltip content='Kustutan'>
-            <button className='alerts-ui--icon-button'><DeleteIcon fill={styles.colorGreyDark} /></button>
+          <Tooltip content="Kustutan">
+            <button className="alerts-ui--icon-button">
+              <DeleteIcon fill={styles.colorGreyDark} />
+            </button>
           </Tooltip>
         </div>
       </ControlledPopover>,
@@ -185,16 +264,15 @@ const AlertsTable: React.FC<AlertsTableState & AlertsTableDispatch> = ({alerts,
   }
 
   return (
-    <div id='alerts-ui--alerts-table'>
+    <div id="alerts-ui--alerts-table">
       <CollapseTable
-        content={
-          content
-            .map((file, i) => <CollapseTableRow fields={createTableRow(file)}/>)
-        }
+        content={content.map((file, i) => (
+          <CollapseTableRow fields={createTableRow(file)} />
+        ))}
         headers={header}
       />
     </div>
   );
-}
+};
 
-export default AlertsTable;
+export default AlertsTable;

package/src/library/components/AlertsTable/AlertsTableContainer.tsx

@@ -1,18 +1,29 @@
-import React from "react";
-import {connect} from "react-redux";
-import {AlertsUiState} from "../../reducers";
-import AlertsTable, {AlertsTableDispatch, AlertsTableState} from "./AlertsTable";
-import {clearDeletes, clearTable, deleteAlert, loadAlerts, setDeleteOpen} from "../../actions/TableActions";
-import {ThunkDispatch} from "redux-thunk";
-import {editAlert} from "../../actions/AlertActions";
+import React from 'react';
+import { connect } from 'react-redux';
+import { AlertsUiState } from '../../reducers';
+import AlertsTable, {
+  AlertsTableDispatch,
+  AlertsTableState,
+} from './AlertsTable';
+import {
+  clearDeletes,
+  clearTable,
+  deleteAlert,
+  loadAlerts,
+  setDeleteOpen,
+} from '../../actions/TableActions';
+import { ThunkDispatch } from 'redux-thunk';
+import { editAlert } from '../../actions/AlertActions';
 
 function mapStateToProps(state: AlertsUiState): AlertsTableState {
   return {
     alerts: state.table.alerts,
-  }
+  };
 }
 
-function mapDispatchToProps(dispatch: ThunkDispatch<any, any, any>): AlertsTableDispatch {
+function mapDispatchToProps(
+  dispatch: ThunkDispatch<any, any, any>,
+): AlertsTableDispatch {
   return {
     loadAlerts: () => {
       dispatch(loadAlerts());
@@ -33,21 +44,23 @@ function mapDispatchToProps(dispatch: ThunkDispatch<any, any, any>): AlertsTable
       dispatch(deleteAlert(id));
     },
     duplicateAlert: (alert) => {
-      dispatch(editAlert({
-        id: 0,
-        audience: alert.audience,
-        level: alert.level,
-        title: alert.title,
-        content: alert.content,
-        begin: undefined,
-        beginHour: undefined,
-        beginMinute: undefined,
-        end: undefined,
-        endHour: undefined,
-        endMinute: undefined,
-      }));
-    }
-  }
+      dispatch(
+        editAlert({
+          id: 0,
+          audience: alert.audience,
+          level: alert.level,
+          title: alert.title,
+          content: alert.content,
+          begin: undefined,
+          beginHour: undefined,
+          beginMinute: undefined,
+          end: undefined,
+          endHour: undefined,
+          endMinute: undefined,
+        }),
+      );
+    },
+  };
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(AlertsTable);

package/src/library/components/AlertsTable/SortableRow/SortableRow.tsx

@@ -1,47 +1,67 @@
-import React, {useEffect} from 'react';
+import React, { useEffect } from 'react';
 
-import {ReactComponent as ArrowDown} from "../../../assets/icons/arrow_down.svg";
-import {ReactComponent as ArrowUp} from "../../../assets/icons/arrow_up.svg";
+import { ReactComponent as ArrowDown } from '../../../assets/icons/arrow_down.svg';
+import { ReactComponent as ArrowUp } from '../../../assets/icons/arrow_up.svg';
 import styles from '../../../assets/styles/contstants.module.scss';
 
 export interface SortableRowProps {
-  title: string,
-  index: number | string,
-  isAccenting: boolean,
-  isDescending: boolean,
-  onAccenting: (index: number | string) => void,
-  onDescending: (index: number | string) => void,
+  title: string;
+  index: number | string;
+  isAccenting: boolean;
+  isDescending: boolean;
+  onAccenting: (index: number | string) => void;
+  onDescending: (index: number | string) => void;
 }
 
-const SortableRow: React.FC<SortableRowProps> = ({title, index, isDescending, isAccenting, onAccenting, onDescending}) => {
-
+const SortableRow: React.FC<SortableRowProps> = ({
+  title,
+  index,
+  isDescending,
+  isAccenting,
+  onAccenting,
+  onDescending,
+}) => {
   return (
-    <div className='alerts-ui--row-header'>
-      <div className='alerts-ui--row-header--arrows'>
-        <button className='alerts-ui--icon-button mb-1' onClick={() => onAccenting(index)}>
-          {
-            isAccenting &&
-              <ArrowUp fill={styles.colorBlue} aria-label='Sort based on this row, accenting enabled.'/>
-          }
-          {
-            !isAccenting &&
-            <ArrowUp fill={styles.colorGrey} aria-label='Sort based on this row, accenting.'/>
-          }
+    <div className="alerts-ui--row-header">
+      <div className="alerts-ui--row-header--arrows">
+        <button
+          className="alerts-ui--icon-button mb-1"
+          onClick={() => onAccenting(index)}
+        >
+          {isAccenting && (
+            <ArrowUp
+              fill={styles.colorBlue}
+              aria-label="Sort based on this row, accenting enabled."
+            />
+          )}
+          {!isAccenting && (
+            <ArrowUp
+              fill={styles.colorGrey}
+              aria-label="Sort based on this row, accenting."
+            />
+          )}
         </button>
-        <button className='alerts-ui--icon-button' onClick={() => onDescending(index)}>
-          {
-            isDescending &&
-              <ArrowDown fill={styles.colorBlue} aria-label='Sort based on this row, descending enabled.'/>
-          }
-          {
-            !isDescending &&
-            <ArrowDown fill={styles.colorGrey} aria-label='Sort based on this row, descending.'/>
-          }
+        <button
+          className="alerts-ui--icon-button"
+          onClick={() => onDescending(index)}
+        >
+          {isDescending && (
+            <ArrowDown
+              fill={styles.colorBlue}
+              aria-label="Sort based on this row, descending enabled."
+            />
+          )}
+          {!isDescending && (
+            <ArrowDown
+              fill={styles.colorGrey}
+              aria-label="Sort based on this row, descending."
+            />
+          )}
         </button>
       </div>
       <p>{title}</p>
     </div>
   );
-}
+};
 
-export default SortableRow;
+export default SortableRow;

package/src/library/components/AlertsTable/SortableRow/index.ts

@@ -1 +1 @@
-export {default} from './SortableRow';
+export { default } from './SortableRow';

package/src/library/components/AlertsTable/index.ts

@@ -1 +1 @@
-export {default} from './AlertsTableContainer';
+export { default } from './AlertsTableContainer';

package/src/library/components/Header/Header.tsx

@@ -1,26 +1,25 @@
-import React from "react";
-import {Button} from 'ehr-components';
+import React from 'react';
+import { Button } from 'ehr-components';
 
-export interface HeaderState {
-
-}
+export interface HeaderState {}
 
 export interface HeaderDispatch {
-  createAlert: () => void,
+  createAlert: () => void;
 }
 
-const Header: React.FC<HeaderState & HeaderDispatch> = ({createAlert}) => {
-
+const Header: React.FC<HeaderState & HeaderDispatch> = ({ createAlert }) => {
   function onCreateAlert() {
     createAlert();
   }
 
   return (
-    <div id='alerts-ui--header'>
+    <div id="alerts-ui--header">
       <h2>Teadete haldus</h2>
-      <Button withPlus onClick={onCreateAlert}>Lisan uue teate</Button>
+      <Button withPlus onClick={onCreateAlert}>
+        Lisan uue teate
+      </Button>
     </div>
   );
-}
+};
 
-export default Header;
+export default Header;

package/src/library/components/Header/HeaderContainer.tsx

@@ -1,20 +1,22 @@
-import React from "react";
-import {connect} from "react-redux";
-import {AlertsUiState} from "../../reducers";
-import Header, {HeaderDispatch, HeaderState} from "./Header";
-import {ThunkDispatch} from "redux-thunk";
-import {createAlert} from "../../actions/AlertActions";
+import React from 'react';
+import { connect } from 'react-redux';
+import { AlertsUiState } from '../../reducers';
+import Header, { HeaderDispatch, HeaderState } from './Header';
+import { ThunkDispatch } from 'redux-thunk';
+import { createAlert } from '../../actions/AlertActions';
 
 function mapStateToProps(state: AlertsUiState): HeaderState {
-  return {}
+  return {};
 }
 
-function mapDispatchToProps(dispatch: ThunkDispatch<any, any, any>): HeaderDispatch {
+function mapDispatchToProps(
+  dispatch: ThunkDispatch<any, any, any>,
+): HeaderDispatch {
   return {
     createAlert: () => {
       dispatch(createAlert());
-    }
-  }
+    },
+  };
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(Header);
+export default connect(mapStateToProps, mapDispatchToProps)(Header);

package/src/library/components/Header/index.ts

@@ -1 +1 @@
-export {default} from './HeaderContainer';
+export { default } from './HeaderContainer';

package/src/library/components/MainPage/MainPage.tsx

@@ -1,17 +1,17 @@
-import React, {useEffect, useState} from 'react';
-import {Section} from 'ehr-components';
-import AlertsTable from "../AlertsTable";
-import AlertCreationModal from "../AlertModal";
-import Header from "../Header";
-import {Provider} from "react-redux";
-import configureStore from "../../configureStore";
-import {Store} from "redux";
+import React, { useEffect, useState } from 'react';
+import { Section } from 'ehr-components';
+import AlertsTable from '../AlertsTable';
+import AlertCreationModal from '../AlertModal';
+import Header from '../Header';
+import { Provider } from 'react-redux';
+import configureStore from '../../configureStore';
+import { Store } from 'redux';
 
 export interface MainPageProps {
-  keycloak: any,
+  keycloak: any;
 }
 
-const MainPage: React.FC<MainPageProps> = ({keycloak}) => {
+const MainPage: React.FC<MainPageProps> = ({ keycloak }) => {
   const [store, setStore] = useState<Store>();
 
   useEffect(() => {
@@ -19,25 +19,24 @@ const MainPage: React.FC<MainPageProps> = ({keycloak}) => {
 
     return () => {
       setStore(undefined);
-    }
+    };
   }, [keycloak]);
 
   return (
     <>
-      {
-        store &&
+      {store && (
         <Provider store={store}>
-          <div id='alerts-ui'>
+          <div id="alerts-ui">
             <Header />
-            <Section title='Süsteemi ülesed teated' className='mt-4'>
+            <Section title="Süsteemi ülesed teated" className="mt-4">
               <AlertsTable />
             </Section>
             <AlertCreationModal />
           </div>
         </Provider>
-      }
+      )}
     </>
   );
-}
+};
 
-export default MainPage;
+export default MainPage;

package/src/library/components/MainPage/index.ts

@@ -1,2 +1,2 @@
-export {default} from './MainPage';
-export type {MainPageProps as EhrAlertsUiProps} from './MainPage';
+export { default } from './MainPage';
+export type { MainPageProps as EhrAlertsUiProps } from './MainPage';

package/src/library/configureStore.ts

@@ -1,9 +1,9 @@
-import {applyMiddleware, createStore} from 'redux';
-import {createLogger} from 'redux-logger';
+import { applyMiddleware, createStore } from 'redux';
+import { createLogger } from 'redux-logger';
 import thunk from 'redux-thunk';
-import {RefreshMiddleware} from 'ehr-auth-react';
+import { RefreshMiddleware } from 'ehr-auth-react';
 
-import reducers, {AlertsUiState} from './reducers';
+import reducers, { AlertsUiState } from './reducers';
 
 const middleware = [RefreshMiddleware, thunk];
 
@@ -12,18 +12,14 @@ if (process.env.NODE_ENV !== 'production') {
   middleware.push(
     createLogger({
       predicate: (getState, action) =>
-        (action.type.toString() !== 'KEYCLOAK_REFRESH_SUCCEEDED' && action.type.toString() !== 'AXIOS_ACCESS_TOKEN')
-    })
-  )
+        action.type.toString() !== 'KEYCLOAK_REFRESH_SUCCEEDED' &&
+        action.type.toString() !== 'AXIOS_ACCESS_TOKEN',
+    }),
+  );
 }
 
-
 const store = (initialState?: AlertsUiState) => {
-  return createStore(
-    reducers,
-    initialState,
-    applyMiddleware(...middleware),
-  );
-}
+  return createStore(reducers, initialState, applyMiddleware(...middleware));
+};
 
 export default store;