Show autosave status to user

Author: mahval

src/assets/images/icons/Success.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+function Success() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 18 18">
+            <path stroke="#78706A" d="M9 1C4.589 1 1 4.59 1 9s3.589 8 8 8c4.41 0 8-3.59 8-8s-3.59-8-8-8z"></path>
+            <path
+                fill="#78706A"
+                d="M7.427 10.628l4.306-3.893a.665.665 0 01.918.03.615.615 0 01-.031.889l-4.766 4.309a.662.662 0 01-.902-.016l-1.588-1.539a.615.615 0 010-.889.664.664 0 01.918 0l1.145 1.109z"
+            ></path>
+        </svg>
+    );
+}
+
+export default Success;

src/routes/klageskjema/begrunnelse/autosave-progress.tsx

@@ -0,0 +1,80 @@
+import React, { useState } from 'react';
+import { Element } from 'nav-frontend-typografi';
+import styled from 'styled-components/macro';
+import { Ellipsis } from '../../../styled-components/ellipsis';
+import Success from '../../../assets/images/icons/Success';
+import Popover, { PopoverOrientering } from 'nav-frontend-popover';
+
+export enum AutosaveStatus {
+    NONE,
+    SAVING,
+    SAVED,
+    FAILED
+}
+
+interface Props {
+    autosaveStatus: AutosaveStatus;
+}
+
+const AutosaveContainer = styled.div`
+    margin-top: 16px;
+    color: #78706a;
+    text-align: right;
+    display: flex;
+    justify-content: flex-end;
+    div {
+        cursor: pointer;
+        > svg {
+            margin-right: 5px;
+        }
+        display: flex;
+        flex-flow: row wrap;
+        align-items: center;
+    }
+`;
+
+const AutosaveProgressIndicator = (props: Props) => {
+    const [anker, setAnker] = useState<(EventTarget & HTMLDivElement) | undefined>(undefined);
+
+    const togglePopover = (ankerEl: EventTarget & HTMLDivElement): void => setAnker(anker ? undefined : ankerEl);
+
+    return (
+        <>
+            <Popover
+                ankerEl={anker}
+                onRequestClose={() => setAnker(undefined)}
+                orientering={PopoverOrientering.OverHoyre}
+            >
+                <p style={{ padding: '1rem' }}>Vi lagrer endringene dine automatisk.</p>
+            </Popover>
+
+            <AutosaveContainer>
+                <div onClick={e => togglePopover(e.currentTarget)}>{getContent(props.autosaveStatus)}</div>
+            </AutosaveContainer>
+        </>
+    );
+};
+
+const getContent = (status: AutosaveStatus) => {
+    if (status === AutosaveStatus.SAVING) {
+        return (
+            <Element>
+                <Ellipsis>Lagrer</Ellipsis>
+            </Element>
+        );
+    }
+    if (status === AutosaveStatus.SAVED) {
+        return (
+            <>
+                <Success />
+                <Element>Lagret</Element>
+            </>
+        );
+    }
+    if (status === AutosaveStatus.FAILED) {
+        return <Element>Klarte ikke lagre</Element>;
+    }
+    return null;
+};
+
+export default AutosaveProgressIndicator;

src/routes/klageskjema/begrunnelse/begrunnelse.tsx

@@ -10,7 +10,6 @@ import NavFrontendSpinner from 'nav-frontend-spinner';
 import {
     CenteredContainer,
     FlexCenteredContainer,
-    InlineMargin48Container,
     Margin40Container,
     Margin48TopContainer,
     MarginContainer,
@@ -29,6 +28,7 @@ import { ApiError, NotLoggedInError } from '../../../api/errors';
 import klageStore from '../../../klage/klage-store';
 import { login } from '../../../auth/login';
 import { LoginButton } from '../../../styled-components/login-button';
+import AutosaveProgressIndicator, { AutosaveStatus } from './autosave-progress';
 
 interface UploadError {
     timestamp: ISODateTime;
@@ -55,6 +55,7 @@ const Begrunnelse = ({ klage }: Props) => {
     const [attachmentsLoading, setAttachmentsLoading] = useState<boolean>(false);
     const [attachmentError, setAttachmentError] = useState<string | null>(null);
     const [submitted, setSubmitted] = useState<boolean>(false);
+    const [autosaveStatus, setAutosaveStatus] = useState<AutosaveStatus>(AutosaveStatus.NONE);
 
     useEffect(() => {
         if (klage.status !== KlageStatus.DRAFT) {
@@ -64,31 +65,34 @@ const Begrunnelse = ({ klage }: Props) => {
 
     useEffect(() => window.scrollTo(0, 0), []);
 
-    const performKlageUpdate = useCallback(() => {
+    const performKlageUpdate = useCallback(async () => {
         const klageUpdate = createKlageUpdate(klage, fritekst, vedtakType, vedtakDate);
-        return updateKlage(klageUpdate)
-            .then(() => {
-                setKlage({
-                    ...klage,
-                    ...klageUpdate,
-                    vedlegg: attachments
-                });
-                klageStore.clear();
-                return true;
-            })
-            .catch((error: Error) => {
-                klageStore.store(fritekst, vedtakType, vedtakDate);
-                setError(error);
-                return false;
+        try {
+            await updateKlage(klageUpdate);
+            setKlage({
+                ...klage,
+                ...klageUpdate,
+                vedlegg: attachments
             });
+            klageStore.clear();
+            setAutosaveStatus(AutosaveStatus.SAVED);
+            return true;
+        } catch (error) {
+            setAutosaveStatus(AutosaveStatus.FAILED);
+            klageStore.store(fritekst, vedtakType, vedtakDate);
+            setError(error);
+            return false;
+        }
     }, [fritekst, vedtakDate, vedtakType, attachments, klage, setKlage]);
 
     useEffect(() => {
         if (klage.vedtakType === vedtakType && klage.vedtakDate === vedtakDate && klage.fritekst === fritekst) {
+            setAutosaveStatus(AutosaveStatus.SAVED);
             return;
         }
-        const timeout = setTimeout(performKlageUpdate, 1000); // 1s - timeout til å kjøre funksjon om timeouten ikke blir nullstillt
-        return () => clearTimeout(timeout); // Nullstill og ikke kjør funksjon
+        setAutosaveStatus(AutosaveStatus.SAVING);
+        const timeout = setTimeout(performKlageUpdate, 1000);
+        return () => clearTimeout(timeout); // Clear existing timer every time it runs.
     }, [fritekst, vedtakDate, vedtakType, klage, performKlageUpdate]);
 
     const fileInput = useRef<HTMLInputElement>(null);
@@ -223,7 +227,7 @@ const Begrunnelse = ({ klage }: Props) => {
                     />
                 </MarginContainer>
             )}
-            <InlineMargin48Container>
+            <InlineMargin48TopContainer>
                 <Undertittel>Begrunn klagen din</Undertittel>
                 <Textarea
                     name="begrunnelse"
@@ -237,7 +241,9 @@ const Begrunnelse = ({ klage }: Props) => {
                     }}
                     feil={submitted && !validBegrunnelse() && 'Du må skrive en begrunnelse før du går videre.'}
                 />
-            </InlineMargin48Container>
+            </InlineMargin48TopContainer>
+
+            <AutosaveProgressIndicator autosaveStatus={autosaveStatus} />
 
             <MarginContainer>
                 <Undertittel>Vedlegg ({attachments.length})</Undertittel>

src/styled-components/common.tsx

@@ -77,6 +77,11 @@ export const InlineMargin48Container = styled(Margin48Container)`
     position: initial;
 `;
 
+export const InlineMargin48TopContainer = styled(Margin48TopContainer)`
+    display: inline-block;
+    position: initial;
+`;
+
 export const PaddingContainer = styled.div`
     padding-top: 32px;
     padding-bottom: 32px;

src/styled-components/ellipsis.tsx

@@ -0,0 +1,23 @@
+import styled from 'styled-components/macro';
+
+export const Ellipsis = styled.span`
+    &::before {
+        display: inline-block;
+        animation: ellipsis 1.25s infinite;
+        content: '.';
+        width: 1em;
+        text-align: right;
+        margin-right: 5px;
+    }
+    @keyframes ellipsis {
+        0% {
+            content: '.';
+        }
+        33% {
+            content: '..';
+        }
+        66% {
+            content: '...';
+        }
+    }
+`;