Skip to content

Commit

Permalink
Merge branch 'main' into bugfix/duplicate-image
Browse files Browse the repository at this point in the history
  • Loading branch information
@camillebrulotte
camillebrulotte authored Apr 8, 2024
2 parents 7ae8d37 + cfbd820 commit 330f1c6
Show file tree
Hide file tree
Showing 6 changed files with 242 additions and 103 deletions.
109 changes: 51 additions & 58 deletions components/modals/Preview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,13 @@ import React from 'react';
import { useTheme } from '@/utils/provider/ThemeProvider';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCalendar, faClose, faEllipsisVertical } from '@fortawesome/free-solid-svg-icons';
import { MDXEditor, linkPlugin, linkDialogPlugin } from '@mdxeditor/editor';
import Constants from '@/utils/constants';
import Modal from './Modal';
import EventDateAndImage from '../EventDateAndImage';
import Markdown from 'react-markdown';
import style from '@/markdown-styles.module.css';
import rehypeRaw from 'rehype-raw';
import dayjs from 'dayjs';
import Avatar from '../Avatar';

export interface PreviewInfos {
news: string;
Expand All @@ -35,6 +36,47 @@ interface Props {
export default function Preview({ locale, infos, onClosePreview }: Props) {
const { isLight } = useTheme();

function formatDateRange(infos: PreviewInfos) {
let formattedDate;

// If there is only a start date or start date and end date have the same day and month
if (
infos.eventStartDate &&
(!infos.eventEndDate ||
(dayjs(infos.eventStartDate).day() === dayjs(infos.eventEndDate).day() &&
dayjs(infos.eventStartDate).month() === dayjs(infos.eventEndDate).month()))
) {
formattedDate = <p>{dayjs(infos.eventStartDate).format('D MMMM YYYY')}</p>;
}
// If there is a start date and an end date with the same month
else if (
infos.eventStartDate &&
infos.eventEndDate &&
dayjs(infos.eventStartDate).month() === dayjs(infos.eventEndDate).month()
) {
formattedDate = (
<p>
{dayjs(infos.eventStartDate).format('D')} - {dayjs(infos.eventEndDate).format('D MMMM YYYY')}
</p>
);
}
// If there is a start date and an end date not in the same month
else if (
infos.eventStartDate &&
infos.eventEndDate &&
dayjs(infos.eventStartDate).month() !== dayjs(infos.eventEndDate).month()
) {
formattedDate = (
<>
<p>{dayjs(infos.eventStartDate).format('D MMMM YYYY')} - </p>
<p>{dayjs(infos.eventEndDate).format('D MMMM YYYY')}</p>
</>
);
}

return formattedDate;
}

return (
<Modal>
<div className="flex justify-between">
Expand Down Expand Up @@ -72,60 +114,7 @@ export default function Preview({ locale, infos, onClosePreview }: Props) {
</div>
<div>
<p>{infos.eventDateTitle}</p>
{infos.eventStartDate && (
<>
{/* If there is only a start date */}
{infos.eventStartDate && !infos.eventEndDate && (
<p>
{new Date(infos.eventStartDate).toLocaleDateString(locale, {
day: 'numeric',
month: 'long',
year: 'numeric',
})}
</p>
)}
{/* If there is a start date and a end date with the same month */}
{infos.eventStartDate &&
infos.eventEndDate &&
new Date(infos.eventStartDate).getMonth() === new Date(infos.eventEndDate).getMonth() && (
<p>
{new Date(infos.eventStartDate).toLocaleDateString(locale, {
day: 'numeric',
})}
{' - '}
{new Date(infos.eventEndDate).toLocaleDateString(locale, {
day: 'numeric',
})}{' '}
{new Date(infos.eventStartDate).toLocaleDateString(locale, {
month: 'long',
year: 'numeric',
})}
</p>
)}
{/* If there is a start date and a end date not in the same month */}
{infos.eventStartDate &&
infos.eventEndDate &&
new Date(infos.eventStartDate).getMonth() !== new Date(infos.eventEndDate).getMonth() && (
<>
<p>
{new Date(infos.eventStartDate).toLocaleDateString(locale, {
day: 'numeric',
month: 'long',
year: 'numeric',
})}
{' - '}
</p>
<p>
{new Date(infos.eventEndDate).toLocaleDateString(locale, {
day: 'numeric',
month: 'long',
year: 'numeric',
})}
</p>
</>
)}
</>
)}
{infos.eventStartDate && formatDateRange(infos)}
</div>
</div>
</div>
Expand All @@ -139,15 +128,19 @@ export default function Preview({ locale, infos, onClosePreview }: Props) {
isLight ? 'bg-red' : 'bg-gray-700'
}`}
>
<div className="flex bg-white rounded-full h-10 w-10 mr-2 my-1"></div>
<div className="flex mr-2 my-1">
<Avatar size="h-10 w-10" />
</div>
<div>
<p className="font-bold text-sm">{infos.author}</p>
<p className="text-xs text-white">{infos.activityArea}</p>
</div>
</div>
<div className="px-2 h-40 overflow-y-auto">
<div style={{ position: 'relative' }}>
<Markdown className={`${style.reactMarkDown} p-2`}>{infos.content}</Markdown>
<Markdown rehypePlugins={[rehypeRaw]} className={`${style.reactMarkDown} p-2`}>
{infos.content.replace(/\\\[+/g, '[').replace(/\\\(+/g, '(')}
</Markdown>
</div>
</div>
<div className="flex flex-wrap p-4 gap-1">
Expand Down
70 changes: 29 additions & 41 deletions components/modals/PublicationDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,8 @@ import Markdown from 'react-markdown';
import style from '@/markdown-styles.module.css';
import { ActivityArea, getActivityAreaName } from '@/models/activity-area';
import dayjs from 'dayjs';
import rehypeRaw from 'rehype-raw';
import { useLoading } from '@/utils/provider/LoadingProvider';

const EditorComp = dynamic(() => import('../EditorComponent'), { ssr: false });

Expand Down Expand Up @@ -58,7 +60,7 @@ export default function PublicationDetails({
user = publication.organizer;
}

const [, startTransition] = useTransition();
const { startTransition } = useLoading();
const [title, setTitle] = useState(publication?.title || '');
const [imageSrc, setImageSrc] = useState(publication?.imageUrl || '');
const [imageBinary, setImageBinary] = useState<Blob>();
Expand Down Expand Up @@ -135,36 +137,29 @@ export default function PublicationDetails({
};

const [missingFields, setMissingFields] = useState<string[]>([]);
const isSubmittingRef = useRef(false);
const createOrUpdate = (formData: FormData) => {
if (isSubmittingRef.current) {
return;
}

isSubmittingRef.current = true;

const newMissingFields = [];
if (!title) newMissingFields.push(t('modal.title'));
if (!imageSrc) newMissingFields.push(t('modal.image'));
if (!imageAltText) newMissingFields.push(t('modal.alt-text'));
if (!content) newMissingFields.push(t('modal.content'));
if (!eventStartDate) newMissingFields.push(t('modal.event-start-date'));
if (!eventEndDate) newMissingFields.push(t('modal.event-end-date'));
if (!publishedDate) newMissingFields.push(t('modal.published-date'));

setMissingFields(newMissingFields);

if (newMissingFields.length > 0) {
setToast(`${t('modal.error-toast-message')}: ${newMissingFields.join(', ')}`, AlertType.error);
return;
}
startTransition(async () => {
const newMissingFields = [];
if (!title) newMissingFields.push(t('modal.title'));
if (!imageSrc) newMissingFields.push(t('modal.image'));
if (!imageAltText) newMissingFields.push(t('modal.alt-text'));
if (!content) newMissingFields.push(t('modal.content'));
if (!eventStartDate) newMissingFields.push(t('modal.event-start-date'));
if (!eventEndDate) newMissingFields.push(t('modal.event-end-date'));
if (!publishedDate) newMissingFields.push(t('modal.published-date'));

setMissingFields(newMissingFields);

if (newMissingFields.length > 0) {
setToast(`${t('modal.error-toast-message')}: ${newMissingFields.join(', ')}`, AlertType.error);
return;
}

if (new Date(eventEndDate).getTime() < new Date(eventStartDate).getTime()) {
setToast(t('modal.date-error-toast-message'), AlertType.error);
return;
}
if (new Date(eventEndDate).getTime() < new Date(eventStartDate).getTime()) {
setToast(t('modal.date-error-toast-message'), AlertType.error);
return;
}

startTransition(async () => {
var helloEvent;
formData = updateFormData(formData);

Expand All @@ -179,7 +174,6 @@ export default function PublicationDetails({
helloEvent ? AlertType.success : AlertType.error
);

isSubmittingRef.current = false;
if (!helloEvent) return;
else onClose();
});
Expand Down Expand Up @@ -301,26 +295,18 @@ export default function PublicationDetails({
);
};

const isSubmittingDraftRef = useRef(false);
const handleDraft = async () => {
if (isSubmittingDraftRef.current) {
return;
}

isSubmittingDraftRef.current = true;

const formData = new FormData();
const updatedFormData = updateFormData(formData, true);

startTransition(async () => {
const formData = new FormData();
const updatedFormData = updateFormData(formData, true);

const helloEvent = await draftAPublication(updatedFormData);

setToast(
t(`modal.draft-${helloEvent ? 'success' : 'error'}-toast-message`),
helloEvent ? AlertType.success : AlertType.error
);

isSubmittingDraftRef.current = false;
if (helloEvent) onClose();
});
};
Expand Down Expand Up @@ -581,7 +567,9 @@ export default function PublicationDetails({
<div
className={`${isDisabled ? 'border border-base-content rounded-lg markdown-custom-styling' : ''}`}
>
<Markdown className={`${style.reactMarkDown} p-2`}>{content}</Markdown>
<Markdown rehypePlugins={[rehypeRaw]} className={`${style.reactMarkDown} p-2`}>
{content}
</Markdown>
</div>
</div>
)}
Expand Down
4 changes: 2 additions & 2 deletions messages/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@
"on-hold": "On hold",
"refused": "Refused",
"approved": "Approved",
"deleted": "Deleted"
"deleted": "Deactivated"
},
"menu": {
"duplicate": "Duplicate",
Expand Down Expand Up @@ -197,7 +197,7 @@
"on-hold": "On hold",
"refused": "Refused",
"approved": "Approved",
"deleted": "Deleted"
"deleted": "Deactivated"
},
"modal": {
"moderator-page-title": "Consult a news",
Expand Down
4 changes: 2 additions & 2 deletions messages/fr.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@
"on-hold": "En attente",
"refused": "Refusée",
"approved": "Approuvée",
"deleted": "Supprimée"
"deleted": "Desactivée"
},
"menu": {
"duplicate": "Dupliquer",
Expand Down Expand Up @@ -195,7 +195,7 @@
"on-hold": "En attente",
"refused": "Refusée",
"approved": "Approuvée",
"deleted": "Supprimée"
"deleted": "Désactivée"
},
"modal": {
"moderator-page-title": "Consulter une publication",
Expand Down
Loading

0 comments on commit 330f1c6

Please sign in to comment.