Create a snackbar to notify the user of important events

frontend/src/components/atoms/ProjectionRow.tsx

@@ -20,6 +20,7 @@ const ProjectionRow = styled.div`
     align-self: center;
     margin-top: 0.2em;
     margin-bottom: 0.2em;
+    word-break: break-word;
   }
 
   p:nth-last-child(-n + 3),

frontend/src/components/atoms/SnackBarCloseButton.jsx

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+import { theme } from '../../styling/theme';
+
+export default styled.button`
+  background-color: ${theme.palette.primary.main};
+  border: none;
+  padding-right: 0.5em;
+  float: right;
+  position: absolute;
+  right: 10px;
+  top: 1.2em;
+  color: ${theme.palette.primary.contrast};
+  font-weight: 600;
+  text-transform: uppercase;
+  transition: 0.1s linear;
+  margin-left: 1em;
+
+  &:hover {
+    color: ${theme.palette.danger.main};
+    transition: 0.1s linear;
+    cursor: pointer;
+  }
+`;

frontend/src/components/atoms/SnackBarContainer.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import styled from 'styled-components';
+import SnackBarCloseButton from './SnackBarCloseButton';
+import { theme } from '../../styling/theme';
+import SnackBarLoader from './SnackBarLoader';
+
+interface ISnackBarProps {
+  content: string;
+  good: boolean;
+  className?: string;
+  speed?: string;
+  clicker?: () => void;
+}
+
+const LoaderSpeed = (speed = '6s') => {
+  if (speed === 'fast') {
+    return '4s';
+  } else if (speed === 'slow') {
+    return '8s';
+  } else {
+    return '6s';
+  }
+};
+
+const SnackBarContainer: React.FC<ISnackBarProps> = ({
+  content,
+  good,
+  className,
+  speed,
+  clicker,
+}) => {
+  return (
+    <div className={className}>
+      <p>{content}</p>
+      <SnackBarCloseButton onClick={clicker}>x</SnackBarCloseButton>
+      <SnackBarLoader
+        style={{
+          animationDuration: LoaderSpeed(speed),
+        }}
+      />
+    </div>
+  );
+};
+
+export default styled(SnackBarContainer)`
+  color: ${theme.palette.primary.contrast};
+  background-color: ${theme.palette.background.default};
+  padding: 0.5em;
+  border-radius: 3px;
+  border: 3px solid;
+  border-color: ${props =>
+    props.good ? theme.palette.success.main : theme.palette.danger.main};
+  position: fixed;
+  bottom: 20px;
+  left: 20px;
+  display: inline-block;
+  min-width: 200px;
+  max-width: 70vw;
+  padding-left: 1em;
+  -webkit-box-shadow: 10px 10px 16px -7px rgba(0, 0, 0, 0.75);
+  -moz-box-shadow: 10px 10px 16px -7px rgba(0, 0, 0, 0.75);
+  box-shadow: 10px 10px 16px -7px rgba(0, 0, 0, 0.75);
+
+  & > p {
+    width: 100%;
+    padding-right: 4em;
+  }
+`;

frontend/src/components/atoms/SnackBarLoader.jsx

@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+import { keyframes } from 'styled-components';
+import { theme } from '../../styling/theme';
+
+const shrinkBar = keyframes`
+from {
+  width: 100%;
+}
+to {
+  width: 0%;
+}
+`;
+
+export default styled.div`
+  height: 5px;
+  background-color: ${theme.palette.primary.contrast};
+  padding: 0;
+  margin: 0;
+  position: absolute;
+  bottom: 0px;
+  left: 0px;
+  animation-name: ${shrinkBar};
+  animation-duration: 8s;
+  animation-iteration-count: 1;
+  animation-timing-function: linear;
+  border-radius: 0 3px 3px 0;
+`;

frontend/src/components/molecules/AddTransaction.tsx

@@ -1,15 +1,67 @@
 import moment from 'moment';
-import React from 'react';
+import React, { useReducer, ReactElement } from 'react';
 import styled from 'styled-components';
 import { useAuthState } from '../../store/contexts/auth';
 import { useTransactionDispatch } from '../../store/contexts/transactions';
 import { TransactionActions } from '../../store/reducers/transactions';
 import Collapsable from '../atoms/Collapsable';
 import Form from './Form';
+import SnackBarContainer from '../atoms/SnackBarContainer';
+
+const initialState = { snax: <div></div>, content: '' };
+
+type stateType = {
+  snax: ReactElement;
+  content: string;
+  clicker?: () => void;
+};
+
+type ActionType = {
+  type: 'clear' | 'good' | 'bad';
+};
+
+const reducer = (state: stateType, action: ActionType): stateType => {
+  switch (action.type) {
+    case 'clear':
+      return initialState;
+    case 'good':
+      return {
+        snax: (
+          <SnackBarContainer
+            clicker={state.clicker}
+            good={true}
+            content={state.content}
+          />
+        ),
+        content: state.content,
+      };
+    case 'bad':
+      return {
+        snax: (
+          <SnackBarContainer
+            clicker={state.clicker}
+            good={false}
+            content={state.content}
+          />
+        ),
+        content: state.content,
+      };
+    default:
+      return initialState;
+  }
+};
 
 const AddTransaction: React.FC<{ className?: string }> = props => {
   const dispatch = useTransactionDispatch();
   const auth = useAuthState();
+  const [state, snaxDispatch] = useReducer(reducer, {
+    snax: <div></div>,
+    content: '',
+  });
+
+  const onButtonClickHandler = () => {
+    snaxDispatch({ type: 'clear' });
+  };
 
   const onSubmit = async ({
     recurring,
@@ -22,39 +74,50 @@ const AddTransaction: React.FC<{ className?: string }> = props => {
     interval_type,
     interval,
   }: any) => {
-    if (!recurring) {
-      await TransactionActions.doCreateTransaction(
-        {
-          company_id: auth!.selectedCompany!,
-          date,
-          description,
-          money: money * 100,
-          notes,
-          type,
-        },
-        dispatch
-      );
-    } else {
-      await TransactionActions.doCreateRecurringTransaction(
-        {
-          company_id: auth!.selectedCompany!,
-          end_date,
-          interval,
-          interval_type,
-          start_date: date,
-          template: {
+    if (!(description.length > 140) && !(notes.length > 140)) {
+      state.content = 'Transaction added successfully';
+      state.clicker = onButtonClickHandler;
+      snaxDispatch({ type: 'good' });
+
+      if (!recurring) {
+        await TransactionActions.doCreateTransaction(
+          {
+            company_id: auth!.selectedCompany!,
+            date,
             description,
             money: money * 100,
+            notes,
             type,
           },
-        },
-        dispatch
-      );
+          dispatch
+        );
+      } else {
+        await TransactionActions.doCreateRecurringTransaction(
+          {
+            company_id: auth!.selectedCompany!,
+            end_date,
+            interval,
+            interval_type,
+            start_date: date,
+            template: {
+              description,
+              money: money * 100,
+              type,
+            },
+          },
+          dispatch
+        );
+      }
+    } else {
+      state.clicker = onButtonClickHandler;
+      state.content = 'Too many characters.';
+      snaxDispatch({ type: 'bad' });
+      setTimeout(() => snaxDispatch({ type: 'clear' }), 6000);
     }
   };
-
   return (
     <Collapsable heading={<h1>Add new transaction</h1>}>
+      <div>{state.snax}</div>
       <div className={props.className}>
         <Form
           schema={[

frontend/src/stories/index.stories.tsx

@@ -25,6 +25,7 @@ import { ITransaction } from '../declarations/transaction';
 import GlobalWrapper from '../helpers/GlobalWrapper';
 import { navbarWidth } from '../styling/sizes';
 import { theme } from '../styling/theme';
+import SnackBarContainer from '../components/atoms/SnackBarContainer';
 
 addDecorator(storyFn => <GlobalWrapper>{storyFn()}</GlobalWrapper>);
 
@@ -299,3 +300,40 @@ storiesOf('Input/Select', module)
       </Select>
     );
   });
+
+storiesOf('SnackBarContainer', module)
+  .addDecorator(fn => (
+    <div style={{ margin: '2em', background: theme.palette.primary.main }}>
+      {fn()}
+    </div>
+  ))
+  .add('Long', () => (
+    <SnackBarContainer
+      good={false}
+      content="You are currently signed in as [insert user here]. A really long sentence to test max length capacity. It is red. It will only break after hitting 70vw."
+      speed="fast"
+    />
+  ));
+
+storiesOf('SnackBarContainer', module)
+  .addDecorator(fn => (
+    <div style={{ margin: '2em', background: theme.palette.primary.main }}>
+      {fn()}
+    </div>
+  ))
+  .add('Fast', () => (
+    <SnackBarContainer good={true} content="Short and fast" speed="fast" />
+  ));
+storiesOf('SnackBarContainer', module)
+  .addDecorator(fn => (
+    <div style={{ margin: '2em', background: theme.palette.primary.main }}>
+      {fn()}
+    </div>
+  ))
+  .add('Medium', () => (
+    <SnackBarContainer
+      good={true}
+      content="Medium speed and medium length."
+      speed="medium"
+    />
+  ));