Refactor input-container og fix vis knapp (#497)

* Refactor input-container og fix vis knapp

src/view/dialog/Dialog.tsx

@@ -7,23 +7,18 @@ import { useRoutes } from '../../routes';
 import { UpdateTypes, dispatchUpdate } from '../../utils/UpdateEvent';
 import useKansendeMelding from '../../utils/UseKanSendeMelding';
 import { useVisAktivitet } from '../AktivitetToggleContext';
-import { useUserInfoContext } from '../BrukerProvider';
 import { useDialogContext } from '../DialogProvider';
 import { useCompactMode } from '../../featureToggle/FeatureToggleProvider';
 import { Meldinger } from '../melding/Meldinger';
-import { useOppfolgingContext } from '../OppfolgingProvider';
-import { dataOrUndefined, useFnrContext, useViewContext } from '../Provider';
+import { useFnrContext, useViewContext } from '../Provider';
 import { useSelectedAktivitet, useSelectedDialog } from '../utils/useAktivitetId';
 import { useEventListener } from '../utils/useEventListner';
 import { endreDialogSomVises } from '../ViewState';
-import ManagedDialogCheckboxes from './DialogCheckboxes';
 import MeldingInputBox from './meldingInput/MeldingInputBox';
 import HistoriskInfo from './HistoriskInfo';
 
 export function Dialog() {
     const scrollContainerRef: React.MutableRefObject<null | HTMLDivElement> = useRef(null);
-    const oppfolgingContext = useOppfolgingContext();
-    const oppfolging = dataOrUndefined(oppfolgingContext);
     const aktivitet = useSelectedAktivitet();
     const compactMode = useCompactMode();
     const kanSendeMelding = useKansendeMelding();
@@ -32,7 +27,6 @@ export function Dialog() {
     const valgtDialog = useSelectedDialog();
     const dialogId = valgtDialog?.id;
     const fnr = useFnrContext();
-    const bruker = useUserInfoContext();
     const visAktivitet = useVisAktivitet();
 
     const { viewState, setViewState } = useViewContext();
@@ -106,32 +100,7 @@ export function Dialog() {
                 <Meldinger dialogData={valgtDialog} viewState={viewState} fnr={fnr} />
                 <HistoriskInfo hidden={aktivDialog} kanSendeMelding={kanSendeMelding} />
             </div>
-            <section
-                aria-label="Ny melding"
-                className={classNames('flex border-t border-border-divider bg-white p-4 xl:justify-center', {
-                    'lg:flex-1  ': compactMode && !visAktivitet && aktivitet,
-                    '2xl:flex-1 ': compactMode && visAktivitet && aktivitet,
-                    'lg:flex-1': compactMode && !aktivitet
-                })}
-            >
-                <div
-                    className={classNames('w-full', {
-                        'flex flex-col ': compactMode && !visAktivitet,
-                        'xl:max-w-248': !compactMode,
-                        '2xl:flex 2xl:flex-col': compactMode
-                    })}
-                >
-                    <ManagedDialogCheckboxes dialog={valgtDialog} visible={!!bruker?.erVeileder} />
-                    {!oppfolging?.underOppfolging || valgtDialog.historisk ? null : (
-                        <MeldingInputBox
-                            key={valgtDialog.id}
-                            dialog={valgtDialog}
-                            kanSendeHenveldelse={kanSendeHenveldelse}
-                            erBruker={!!bruker?.erBruker}
-                        />
-                    )}
-                </div>
-            </section>
+            <MeldingInputBox dialog={valgtDialog} kanSendeHenveldelse={kanSendeHenveldelse} />
         </section>
     );
 }

src/view/dialog/DialogCheckboxes.tsx

@@ -4,11 +4,12 @@ import React from 'react';
 
 import { Status } from '../../api/typer';
 import { notEmpty } from '../../utils/TypeHelper';
-import { DialogData } from '../../utils/Typer';
 import { useDialogContext } from '../DialogProvider';
 import { useCompactMode } from '../../featureToggle/FeatureToggleProvider';
 import { useOppfolgingContext } from '../OppfolgingProvider';
 import { dataOrUndefined } from '../Provider';
+import { useSelectedDialog } from '../utils/useAktivitetId';
+import { useUserInfoContext } from '../BrukerProvider';
 
 interface Props {
     toggleFerdigBehandlet(ferdigBehandler: boolean): void;
@@ -59,19 +60,14 @@ const DialogCheckboxes = ({
     );
 };
 
-interface ManagedProps {
-    dialog: DialogData;
-    visible: boolean;
-}
-
-const ManagedDialogCheckboxes = (props: ManagedProps) => {
+const ManagedDialogCheckboxes = () => {
+    const visible = useUserInfoContext()?.erVeileder || false;
+    const dialog = useSelectedDialog();
     const dialogContext = useDialogContext();
     const oppfolgingContext = useOppfolgingContext();
     const oppfolgingData = dataOrUndefined(oppfolgingContext);
 
-    const { visible, dialog } = props;
-
-    if (!visible) {
+    if (!visible || !dialog) {
         return null;
     }
 

src/view/dialog/meldingInput/MeldingBottomInput.tsx

@@ -8,8 +8,12 @@ import { betterErrorMessage, MeldingInputContext } from './inputUtils';
 import { MeldingFormValues } from './MeldingInputBox';
 import { PaperplaneIcon } from '@navikt/aksel-icons';
 import { Breakpoint, useBreakpoint } from '../../utils/useBreakpoint';
+import ManagedDialogCheckboxes from '../DialogCheckboxes';
+import { dataOrUndefined } from '../../Provider';
+import { useOppfolgingContext } from '../../OppfolgingProvider';
+import { DialogData } from '../../../utils/Typer';
 
-export const MeldingBottomInput = () => {
+const MeldingBottomInputInner = () => {
     const { onSubmit, onChange, noeFeilet } = useContext(MeldingInputContext);
     const {
         register,
@@ -64,3 +68,21 @@ export const MeldingBottomInput = () => {
         </form>
     );
 };
+
+export const MeldingBottomInput = ({ dialog }: { dialog: DialogData }) => {
+    const oppfolgingContext = useOppfolgingContext();
+    const oppfolging = dataOrUndefined(oppfolgingContext);
+    const compactMode = useCompactMode();
+    return (
+        <section aria-label="Ny melding" className="flex justify-center border-t border-border-divider p-4">
+            <div
+                className={classNames('grow justify-self-center', {
+                    'xl:max-w-248': !compactMode
+                })}
+            >
+                <ManagedDialogCheckboxes />
+                {!oppfolging?.underOppfolging || dialog.historisk ? null : <MeldingBottomInputInner />}
+            </div>
+        </section>
+    );
+};

src/view/dialog/meldingInput/MeldingInputBox.tsx

@@ -123,15 +123,15 @@ const MeldingInputBox = (props: Props) => {
     // Important! Avoid re-render of textarea-input because it loses focus
     const Input = useCallback(() => {
         if (!compactMode) {
-            return <MeldingBottomInput />;
+            return <MeldingBottomInput dialog={valgtDialog} />;
         } else if (visAktivitet && [Breakpoint.md, Breakpoint.lg, Breakpoint.xl].includes(breakpoint)) {
-            return <MeldingBottomInput />;
+            return <MeldingBottomInput dialog={valgtDialog} />;
         } else if ([Breakpoint.initial, Breakpoint.sm, Breakpoint.md].includes(breakpoint)) {
-            return <MeldingBottomInput />;
+            return <MeldingBottomInput dialog={valgtDialog} />;
         } else {
-            return <MeldingSideInput />;
+            return <MeldingSideInput dialog={valgtDialog} />;
         }
-    }, [breakpoint, compactMode]);
+    }, [breakpoint, compactMode, valgtDialog, visAktivitet]);
 
     if (!kanSendeHenveldelse) return null;
     return (

src/view/dialog/meldingInput/MeldingSideInput.tsx

@@ -6,8 +6,12 @@ import { useCompactMode } from '../../../featureToggle/FeatureToggleProvider';
 import { useFormContext } from 'react-hook-form';
 import { betterErrorMessage, MeldingInputContext } from './inputUtils';
 import { MeldingFormValues } from './MeldingInputBox';
+import ManagedDialogCheckboxes from '../DialogCheckboxes';
+import { dataOrUndefined } from '../../Provider';
+import { useOppfolgingContext } from '../../OppfolgingProvider';
+import { DialogData } from '../../../utils/Typer';
 
-export const MeldingSideInput = () => {
+const MeldingSideInputInner = () => {
     const { onSubmit, onChange, noeFeilet } = useContext(MeldingInputContext);
     const {
         register,
@@ -60,3 +64,19 @@ export const MeldingSideInput = () => {
         </form>
     );
 };
+
+export const MeldingSideInput = ({ dialog }: { dialog: DialogData }) => {
+    const oppfolgingContext = useOppfolgingContext();
+    const oppfolging = dataOrUndefined(oppfolgingContext);
+    return (
+        <section
+            aria-label="Ny melding"
+            className="flex flex-1 border-t border-border-divider bg-white p-4 xl:justify-center"
+        >
+            <div className="w-full">
+                <ManagedDialogCheckboxes />
+                {!oppfolging?.underOppfolging || dialog.historisk ? null : <MeldingSideInputInner />}
+            </div>
+        </section>
+    );
+};