Skip to content

Commit

Permalink
feature: add form provider
Browse files Browse the repository at this point in the history
  • Loading branch information
@glaubersilva
glaubersilva committed Sep 16, 2024
1 parent 54023a1 commit fd23d20
Show file tree
Hide file tree
Showing 3 changed files with 115 additions and 91 deletions.
153 changes: 77 additions & 76 deletions src/Campaigns/resources/admin/components/CampaignDetailsPage/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import {CampaignDetailsTab, GiveCampaignDetails} from './types';
import {CampaignDetailsInputs, CampaignDetailsTab, GiveCampaignDetails} from './types';
import styles from './CampaignDetailsPage.module.scss';
import {__} from '@wordpress/i18n';
import {useEffect, useState} from 'react';
import cx from 'classnames';
import campaignDetailsTabs from './tabs';
import CampaignsApi from '../api';
import {FormProvider, SubmitHandler, useForm} from 'react-hook-form';

declare const window: {
GiveCampaignDetails: GiveCampaignDetails;
Expand All @@ -20,7 +21,9 @@ const tabs: CampaignDetailsTab[] = campaignDetailsTabs;

export default function CampaignsDetailsPage() {
const [activeTab, setActiveTab] = useState<CampaignDetailsTab>(tabs[0]);
const [submitting, setSubmitting] = useState(false);
const methods = useForm<CampaignDetailsInputs>();
const {formState, handleSubmit} = methods;
const [isPublishing, setIsPublishing] = useState(false);

const getTabFromURL = () => {
const urlParams = new URLSearchParams(window.location.search);
Expand Down Expand Up @@ -80,94 +83,92 @@ export default function CampaignsDetailsPage() {
};
}, []);

const publishCampaign: any = async () => {
try {
setSubmitting(true);
const endpoint = `/publish/${campaign.properties.id}`;
const response = await API.fetchWithArgs(endpoint, {}, 'PUT');
console.log('Campaign published', response);
location.reload();
} catch (error) {
setSubmitting(false);
console.error('Error publishing campaign campaign', error);
}
};
const onSubmit: SubmitHandler<CampaignDetailsInputs> = async (campaignDetailsInputs, event) => {
event.preventDefault();

console.log('is Dirty: ', formState.isDirty);
console.log('formState.dirtyFields: ', formState.dirtyFields);
console.log('formState.dirtyFields: ', Object.keys(formState.dirtyFields).length);

const updateCampaign: any = async () => {
try {
setSubmitting(true);
const endpoint = `/${campaign.properties.id}`;
const response = await API.fetchWithArgs(
endpoint,
{
title: 'Random ' + Math.random(),
},
'PUT'
);
console.log('Campaign updated', response);
location.reload();
if (isPublishing) {
console.log('publishing...');
const endpoint = `/publish/${campaign.properties.id}`;
const response = await API.fetchWithArgs(endpoint, {}, 'PUT');
console.log('Campaign published.', response);
location.reload();
} else if (formState.isDirty) {
console.log('updating...');
const endpoint = `/${campaign.properties.id}`;
const response = await API.fetchWithArgs(endpoint, campaignDetailsInputs, 'PUT');
console.log('Campaign updated.', response);
location.reload();
}
} catch (error) {
setSubmitting(false);
console.error('Error updating campaign campaign', error);
console.error('Error updating campaign.', error);
}
};

return (
<>
<article className={styles.page}>
<header className={styles.pageHeader}>
<div className={styles.breadcrumb}>
<a href={`${adminUrl}edit.php?post_type=give_forms&page=give-campaigns`}>
{__('Campaigns', 'give')}
</a>
{' > '}
<span>{campaign.properties.title}</span>
</div>
<div className={styles.flexContainer}>
<div className={styles.flexRow}>
<h1 className={styles.pageTitle}>{campaign.properties.title}</h1>
<FormProvider {...methods}>
<form onSubmit={handleSubmit(onSubmit)}>
<article className={styles.page}>
<header className={styles.pageHeader}>
<div className={styles.breadcrumb}>
<a href={`${adminUrl}edit.php?post_type=give_forms&page=give-campaigns`}>
{__('Campaigns', 'give')}
</a>
{' > '}
<span>{campaign.properties.title}</span>
</div>

<div className={styles.flexRow}>
{campaign.properties.status === 'draft' && (
<div className={styles.flexContainer}>
<div className={styles.flexRow}>
<h1 className={styles.pageTitle}>{campaign.properties.title}</h1>
</div>

<div className={styles.flexRow}>
{campaign.properties.status === 'draft' && (
<button
disabled={formState.isSubmitting}
className={`button button-secondary ${styles.button} ${styles.updateCampaignButton}`}
>
{__('Save as draft', 'give')}
</button>
)}
<button
disabled={submitting}
className={`button button-secondary ${styles.button} ${styles.updateCampaignButton}`}
onClick={updateCampaign}
onClick={() => {
campaign.properties.status === 'draft'
? setIsPublishing(true)
: setIsPublishing(false);
}}
disabled={formState.isSubmitting}
className={`button button-primary ${styles.button} ${styles.updateCampaignButton}`}
>
{__('Save as draft', 'give')}
{campaign.properties.status === 'draft'
? __('Publish campaign', 'give')
: __('Update campaign', 'give')}
</button>
)}
</div>
</div>
</header>
<nav className={styles.tabsNav}>
{Object.values(tabs).map((tab) => (
<button
disabled={submitting}
className={`button button-primary ${styles.button} ${styles.updateCampaignButton}`}
onClick={campaign.properties.status === 'draft' ? publishCampaign : updateCampaign}
key={tab.id}
className={cx(styles.tabButton, activeTab === tab && styles.activeTab)}
onClick={() => handleTabNavigation(tab)}
>
{campaign.properties.status === 'draft'
? __('Publish campaign', 'give')
: __('Update campaign', 'give')}
{tab.title}
</button>
</div>
))}
</nav>
<div className={cx('wp-header-end', 'hidden')} />

<div className={styles.pageContent}>
<activeTab.content />
</div>
</header>
<div className={cx('wp-header-end', 'hidden')} />

<nav className={styles.tabsNav}>
{Object.values(tabs).map((tab) => (
<button
key={tab.id}
className={cx(styles.tabButton, activeTab === tab && styles.activeTab)}
onClick={() => handleTabNavigation(tab)}
>
{tab.title}
</button>
))}
</nav>

<div className={styles.pageContent}>
<activeTab.content />
</div>
</article>
</>
</article>
</form>
</FormProvider>
);
}
49 changes: 34 additions & 15 deletions src/Campaigns/resources/admin/components/CampaignDetailsPage/tabs.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,42 @@
import {CampaignDetailsTab} from './types';
import {__} from '@wordpress/i18n';
import {getGiveCampaignDetailsWindowData} from './index';
import {useFormContext} from 'react-hook-form';
import {useEffect} from 'react';

const {campaign} = getGiveCampaignDetailsWindowData();

// TODO: We need to remove this component after creating the final settings component
const TestSettings = () => {
const {register, watch, formState} = useFormContext();
const formWatch = watch();

useEffect(() => {
console.log('formWatch: ', formWatch);
console.log('formState.isDirty: ', formState.isDirty);
}, [formWatch]);

return (
<>
<p>Settings component goes here...</p>
<p>
<label>Title:</label>
<input {...register('title')} />
</p>
<p>
<a
style={{fontSize: '1.5rem'}}
href={campaign.settings.landingPageUrl}
target="_blank"
rel="noopener noreferrer"
>
Edit Campaign Landing Page ⭷
</a>
</p>
</>
);
};

const campaignDetailsTabs: CampaignDetailsTab[] = [
{
id: 'overview',
Expand All @@ -26,21 +59,7 @@ const campaignDetailsTabs: CampaignDetailsTab[] = [
{
id: 'settings',
title: __('Settings', 'give'),
content: () => (
<>
<p>Settings component goes here...</p>
<p>
<a
style={{fontSize: '1.5rem'}}
href={campaign.settings.landingPageUrl}
target="_blank"
rel="noopener noreferrer"
>
Edit Campaign Landing Page ⭷
</a>
</p>
</>
),
content: () => <TestSettings />,
},
{
id: 'forms',
Expand Down
4 changes: 4 additions & 0 deletions src/Campaigns/resources/admin/components/CampaignDetailsPage/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,3 +18,7 @@ export type CampaignDetailsTab = {
title: string;
content: FC;
};

export type CampaignDetailsInputs = {
title: string;
};

0 comments on commit fd23d20

Please sign in to comment.