Skip to content

Commit

Permalink
feature/deseng692: Made revisions to PR as per Nat and Alex's comment…
Browse files Browse the repository at this point in the history 
…s, fixed issues with deferred data aborted errors.
  • Loading branch information
@jareth-whitney
jareth-whitney committed Sep 20, 2024
1 parent edc1833 commit da88a8a
Show file tree
Hide file tree
Showing 7 changed files with 108 additions and 130 deletions.
5 changes: 5 additions & 0 deletions CHANGELOG.MD
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,11 @@
- Created custom layover bar for videos that shows video provider and has a custom logo
- Transcripts will not be implemented at this time

- Summary page in authoring section [🎟️ DESENG-671](https://citz-gdx.atlassian.net/browse/DESENG-671)
- Streamlined data loaders and actions to account for page changes
- Updated data structure so that summary data is pulled from engagement table
- Added 'description_title' column to engagement table

## September 12, 2024

- **Feature** New Summary page in authoring section [🎟️ DESENG-671](https://citz-gdx.atlassian.net/browse/DESENG-671)
Expand Down
9 changes: 1 addition & 8 deletions met-web/src/components/engagement/admin/create/authoring/AuthoringContext.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ export const AuthoringContext = () => {
title: data.title,
icon_name: data.icon_name,
metadata_value: data.metadata_value,
send_report: data.send_report ? getSendReportValue(data.send_report) : '',
send_report: (data.send_report || '').toString(),
slug: data.slug,
request_type: data.request_type,
text_content: data.text_content,
Expand All @@ -95,13 +95,6 @@ export const AuthoringContext = () => {
);
};

const getSendReportValue = (valueToInterpret: boolean) => {
if (undefined === valueToInterpret) {
return '';
}
return valueToInterpret ? 'true' : 'false';
};

return (
<FormProvider {...engagementUpdateForm}>
<Outlet context={{ onSubmit, defaultValues, setDefaultValues, fetcher }} />
Expand Down
36 changes: 14 additions & 22 deletions met-web/src/components/engagement/admin/create/authoring/AuthoringSummary.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Grid } from '@mui/material';
import React, { useEffect } from 'react';
import { useOutletContext, useRouteLoaderData, useNavigate } from 'react-router-dom';
import { useLoaderData, useOutletContext } from 'react-router-dom';
import { TextField } from 'components/common/Input';
import { AuthoringTemplateOutletContext } from './types';
import { colors } from 'styles/Theme';
Expand All @@ -16,20 +16,9 @@ import { EngagementUpdateData } from './AuthoringContext';
import { Engagement } from 'models/engagement';

const AuthoringSummary = () => {
const { setValue, control, reset, getValues, setDefaultValues, fetcher, slug }: AuthoringTemplateOutletContext =
const { setValue, control, reset, getValues, setDefaultValues, fetcher }: AuthoringTemplateOutletContext =
useOutletContext(); // Access the form functions and values from the authoring template.

// Update the loader data when the authoring section is changed, by triggering navigation().
const navigate = useNavigate();
useEffect(() => {
engagementData.then(() => navigate('.', { replace: true }));
}, [slug]);

// Get the engagement data
const { engagement: engagementData } = useRouteLoaderData('single-engagement') as {
engagement: Promise<Engagement>;
};

// Check if the form has succeeded or failed after a submit, and issue a message to the user.
const dispatch = useAppDispatch();
useEffect(() => {
Expand All @@ -47,6 +36,8 @@ const AuthoringSummary = () => {
}
}, [fetcher.data]);

const { engagement } = useLoaderData() as { engagement: Promise<Engagement> };

const untouchedDefaultValues: EngagementUpdateData = {
id: 0,
status_id: 0,
Expand Down Expand Up @@ -74,21 +65,22 @@ const AuthoringSummary = () => {
// Reset values to default and retrieve relevant content from loader.
useEffect(() => {
reset(untouchedDefaultValues);
engagementData.then((engagement) => {
setValue('id', Number(engagement.id));
engagement.then((eng) => {
setValue('id', Number(eng.id));
// Make sure it is valid JSON.
if (tryParse(engagement.rich_description)) {
setValue('rich_description', engagement.rich_description);
if (tryParse(eng.rich_description)) {
setValue('rich_description', eng.rich_description);
}
setValue('description_title', engagement.description_title || 'Hello world');
setValue('description', engagement.description);
setValue('description_title', eng.description_title || 'Hello world');
setValue('description', eng.description);
setValue(
'summary_editor_state',
EditorState.createWithContent(convertFromRaw(JSON.parse(engagement.rich_description))),
EditorState.createWithContent(convertFromRaw(JSON.parse(eng.rich_description))),
);
setDefaultValues(getValues()); // Update default values so that our loaded values are default.
// Update default values so that our loaded values are default.
setDefaultValues(getValues());
});
}, [engagementData]);
}, [engagement]);

// Define the styles
const metBigLabelStyles = {
Expand Down
49 changes: 27 additions & 22 deletions met-web/src/components/engagement/admin/create/authoring/AuthoringTemplate.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,15 @@
import React, { Suspense, useMemo, useState } from 'react';
import { useOutletContext, Form, useParams, useRouteLoaderData, Await, Outlet } from 'react-router-dom';
import { useOutletContext, Form, useParams, Await, Outlet, useLoaderData } from 'react-router-dom';
import AuthoringBottomNav from './AuthoringBottomNav';
import { EngagementUpdateData } from './AuthoringContext';
import { useFormContext } from 'react-hook-form';
import UnsavedWorkConfirmation from 'components/common/Navigation/UnsavedWorkConfirmation';
import { AuthoringContextType, StatusLabelProps } from './types';
import { Engagement } from 'models/engagement';
import { AutoBreadcrumbs } from 'components/common/Navigation/Breadcrumb';
import { ResponsiveContainer } from 'components/common/Layout';
import { EngagementStatus } from 'constants/engagementStatus';
import { EyebrowText, Header2 } from 'components/common/Typography';
import { useAppSelector } from 'hooks';
import { getTenantLanguages } from 'services/languageService';
import { Language } from 'models/language';
import { getAuthoringRoutes } from './AuthoringNavElements';
import { FormControlLabel, Grid, Radio, RadioGroup } from '@mui/material';
Expand All @@ -20,6 +18,8 @@ import { getEditorStateFromRaw } from 'components/common/RichTextEditor/utils';
import { When } from 'react-if';
import WidgetPicker from '../widgets';
import { WidgetLocation } from 'models/widget';
import { Engagement } from 'models/engagement';
import { getTenantLanguages } from 'services/languageService';

export const StatusLabel = ({ text, completed }: StatusLabelProps) => {
const statusLabelStyle = {
Expand All @@ -39,7 +39,7 @@ export const getLanguageValue = (currentLanguage: string, languages: Language[])
const AuthoringTemplate = () => {
const { onSubmit, defaultValues, setDefaultValues, fetcher }: AuthoringContextType = useOutletContext();
const { engagementId } = useParams() as { engagementId: string }; // We need the engagement ID quickly, so let's grab it from useParams
const { engagement } = useRouteLoaderData('single-engagement') as { engagement: Engagement };
const { engagement } = useLoaderData() as { engagement: Promise<Engagement> };
const [currentLanguage, setCurrentLanguage] = useState(useAppSelector((state) => state.language.id));
const [contentTabsEnabled, setContentTabsEnabled] = useState('false'); // todo: replace default value with stored value in engagement.
const defaultTabValues = {
Expand All @@ -50,6 +50,7 @@ const AuthoringTemplate = () => {
};
const [tabs, setTabs] = useState([defaultTabValues]);
const [singleContentValues, setSingleContentValues] = useState({ ...defaultTabValues, heading: '' });

const tenant = useAppSelector((state) => state.tenant);
const languages = useMemo(() => getTenantLanguages(tenant.id), [tenant.id]); // todo: Using tenant language list until language data is integrated with the engagement.
const authoringRoutes = getAuthoringRoutes(Number(engagementId), tenant);
Expand All @@ -61,6 +62,7 @@ const AuthoringTemplate = () => {
const pathSlug = pathArray[pathArray.length - 1];
return pathSlug === slug;
})?.name;

const {
handleSubmit,
setValue,
Expand Down Expand Up @@ -95,17 +97,17 @@ const AuthoringTemplate = () => {
return (
<ResponsiveContainer>
<AutoBreadcrumbs />
<Suspense>
<Await resolve={engagement}>
{(engagement: Engagement) => (
<div style={{ marginTop: '2rem' }}>
<StatusLabel text={EngagementStatus[engagement?.status_id]} completed={false} />
{/* todo: For the section status label when it's ready */}
{/* <StatusLabel text={'Insert Section Status Text Here'} completed={'Insert Completed Boolean Here'} /> */}
</div>
)}
</Await>
</Suspense>
<div style={{ marginTop: '2rem' }}>
<Suspense>
<Await resolve={engagement}>
{(engagement: Engagement) => (
<StatusLabel text={EngagementStatus[engagement.status_id]} completed={false} />
)}
</Await>
</Suspense>
{/* todo: For the section status label when it's ready */}
{/* <StatusLabel text={'Insert Section Status Text Here'} completed={'Insert Completed Boolean Here'} /> */}
</div>
<h1 style={{ marginTop: '0.5rem', paddingBottom: '1rem' }}>{pageTitle}</h1>
<SystemMessage status="warning">
Under construction - the settings in this section have no effect.
Expand Down Expand Up @@ -151,13 +153,16 @@ const AuthoringTemplate = () => {
</Grid>
</When>

<Header2 decorated style={{ paddingTop: '1rem' }}>
<Suspense>
<Await resolve={languages}>
{(languages: Language[]) => getLanguageValue(currentLanguage, languages) + ' Content'}
</Await>
</Suspense>
</Header2>
<Suspense>
<Await resolve={languages}>
{(languages: Language[]) => (
<Header2 decorated style={{ paddingTop: '1rem' }}>
{`${getLanguageValue(currentLanguage, languages)} Content`}
</Header2>
)}
</Await>
</Suspense>

<Form onSubmit={handleSubmit(onSubmit)}>
<Suspense>
<Await resolve={engagement}>
Expand Down
5 changes: 4 additions & 1 deletion met-web/src/components/engagement/form/EngagementWidgets/Video/Form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,7 @@ const Form = () => {
</Grid>
<Grid item xs={12}>
<FormProvider {...methods}>
<form onSubmit={handleSubmit(onSubmit)}>
<form onSubmit={handleSubmit(onSubmit)} aria-label="Video widget form">
<Grid
container
direction="row"
Expand All @@ -150,6 +150,7 @@ const Form = () => {
name="title"
variant="outlined"
label=" "
aria-label="Title: optional."
InputLabelProps={{
shrink: false,
}}
Expand All @@ -162,6 +163,7 @@ const Form = () => {
name="description"
variant="outlined"
label=" "
aria-label="Description: optional."
InputLabelProps={{
shrink: false,
}}
Expand All @@ -179,6 +181,7 @@ const Form = () => {
name="videoUrl"
variant="outlined"
label=" "
aria-label="Video URL: required."
InputLabelProps={{
shrink: false,
}}
Expand Down
Loading

0 comments on commit da88a8a

Please sign in to comment.