Emails: Add button to send emails synchronously.

[isabellalam12]

No description provided.

[isabellalam12]

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

• Email Templates #71
• Emails: Add button to send emails synchronously. #88 👈 (View in Graphite)
• Emails: Remove default values from application.yml #85
• Database CI fix: remove EventListener #95
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[graphite-app]

Critical Race Condition: If the user rapidly changes templates, multiple loadTemplate() calls will be in flight simultaneously and may resolve out of order, causing the wrong template to be set.

Scenario:

1. User selects Template A → starts loading
2. User quickly switches to Template B → starts loading
3. Template B finishes loading → sets template to B
4. Template A finishes loading → sets template to A (WRONG!)
5. User clicks send → emails sent with Template A's subject/body instead of B

Fix: Add cleanup to ignore stale results:

useEffect(() => {
  if (!request?.templateId) {
    setTemplate(null);
    return;
  }

  let cancelled = false;

  const loadTemplate = async () => {
    try {
      const templates = await listTemplates();
      const found = templates.find((t) => t.id === request.templateId);
      if (!cancelled) {
        setTemplate(found ?? null);
      }
    } catch {
      if (!cancelled) {
        setTemplate(null);
      }
    }
  };

  void loadTemplate();

  return () => {
    cancelled = true;
  };
}, [request?.templateId]);

Suggested change

	useEffect(() => {
	// Find template subject and body from request.templateId
	if (!request?.templateId) {
	setTemplate(null);
	return;
	}
	const loadTemplate = async () => {
	try {
	const templates = await listTemplates();
	const found = templates.find((t) => t.id === request.templateId);
	setTemplate(found ?? null);
	} catch {
	setTemplate(null);
	}
	};
	void loadTemplate();
	}, [request?.templateId]);
	useEffect(() => {
	// Find template subject and body from request.templateId
	if (!request?.templateId) {
	setTemplate(null);
	return;
	}
	let cancelled = false;
	const loadTemplate = async () => {
	try {
	const templates = await listTemplates();
	const found = templates.find((t) => t.id === request.templateId);
	if (!cancelled) {
	setTemplate(found ?? null);
	}
	} catch {
	if (!cancelled) {
	setTemplate(null);
	}
	}
	};
	void loadTemplate();
	return () => {
	cancelled = true;
	};
	}, [request?.templateId]);

Spotted by Graphite



Is this helpful? React 👍 or 👎 to let us know.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud