make server action work

simonyiszk · Dec 15, 2023 · d5cd1db · d5cd1db
1 parent 3489105
commit d5cd1db
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 90 deletions.
diff --git a/package.json b/package.json
@@ -18,9 +18,7 @@
   },
   "dependencies": {
     "email-validator": "^2.0.4",
-    "axios": "^1.6.2",
     "clsx": "^2.0.0",
-    "google-auth-library": "^9.3.0",
     "googleapis": "^129.0.0",
     "next": "14.0.3",
     "react": "^18",

diff --git a/src/app/actions.ts b/src/app/actions.ts
@@ -1,11 +1,9 @@
 'use server';
-// could be used instead of route.ts, but we have to figure out how to handle the response
 import { google } from 'googleapis';
-import { redirect } from 'next/navigation';
 
-export async function addToGroup(formData: FormData) {
-  if (!formData.get('email')) {
-    redirect('/?status=400');
+export async function addToGroup({ email }: { email: string }) {
+  if (!email) {
+    return 400;
   }
   const credentials = JSON.parse(Buffer.from(process.env.SERVICE_ACCOUNT_JSON ?? '', 'base64').toString());
   const auth = new google.auth.JWT({
@@ -19,17 +17,20 @@ export async function addToGroup(formData: FormData) {
     await google.admin({ version: 'directory_v1', auth }).members.insert({
       groupKey: process.env.GROUP_KEY,
       requestBody: {
-        email: formData.get('email')?.toString(),
+        email: email,
         role: 'MEMBER',
       },
     });
+    return 200;
   } catch (e) {
     if ((e as any).response?.data?.error.code === 409) {
-      redirect('/?status=409');
+      return 409;
+    }
+    if ((e as any).response?.data?.error.code === 400) {
+      return 400;
     }
     console.log(e);
     console.log('error: ', (e as any).response?.data?.error);
-    redirect('/?status=500');
+    return 500;
   }
-  redirect('/?status=200');
 }
diff --git a/src/app/api/subscribe/route.ts b/src/app/api/subscribe/route.ts
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,24 +1,12 @@
-<<<<<<< dev
-<<<<<<< dev
 import Image from 'next/image';
 
 import { metadata } from '@/app/layout';
+import { ModalContent } from '@/components/newsletter/ModalContent';
 
 import konfLogo from '../../public/img/konf.svg';
-=======
-'use client';
-import { useState } from 'react';
-
-import { KirDevLogo } from '@/components/kir-dev-logo/KirDevLogo';
->>>>>>> solution with google groups api - 403
-=======
-import { KirDevLogo } from '@/components/kir-dev-logo/KirDevLogo';
-import { ModalContent } from '@/components/newsletter/ModalContent';
->>>>>>> cleanup for route.ts solution
 
 export default function Landing() {
   return (
-<<<<<<< dev
     <>
       <div className='shadow-gloria rounded-full overflow-hidden'>
         <video className='h-full w-full' autoPlay playsInline loop controls={false}>
@@ -29,15 +17,8 @@ export default function Landing() {
         <Image src={konfLogo} alt='Simonyi Konferencia' className='w-full' />
         <p className='font-bold text-xl sm:text-2xl text-center'>{metadata.description}</p>
         <p className='font-semibold text-2xl sm:text-6xl'>24. 03. 19.</p>
+        <ModalContent />
       </div>
     </>
-=======
-    <main className='flex flex-col gap-10 justify-center items-center h-full'>
-      <h1 className='text-center'>XXI. Simonyi Konferencia</h1>
-      <p className='text-center'>A weboldal fejlesztése folyamatban, szíves türelmed kérjük.</p>
-      <ModalContent />
-      <KirDevLogo variant='light' />
-    </main>
->>>>>>> solution with google groups api - 403
   );
 }
diff --git a/src/components/newsletter/ModalContent.tsx b/src/components/newsletter/ModalContent.tsx
@@ -2,30 +2,29 @@
 import * as EmailValidator from 'email-validator';
 import { useState } from 'react';
 
+import { addToGroup } from '@/app/actions';
+
 export function ModalContent() {
   const [email, setEmail] = useState('');
   const [accepted, setAccepted] = useState(false);
+  const [error, setError] = useState('');
 
   const onSubscribe = async () => {
     if (accepted && email) {
-      if (EmailValidator.validate(email)) {
-        const res = await fetch('/api/subscribe', { method: 'POST', body: JSON.stringify({ email }) });
-        switch (res.status) {
-          case 200:
-            alert('Sikeresen feliratkoztál a hírlevélre!');
-            break;
-          case 400:
-            alert('Érvénytelen email cím!');
-            break;
-          case 409:
-            alert('Ez az email cím már fel van iratkozva a hírlevélre!');
-            break;
-          default:
-            alert('Ismeretlen hiba!');
-        }
-        setEmail('');
-      } else {
-        alert('Érvénytelen email cím!');
+      const status = await addToGroup({ email });
+      switch (status) {
+        case 200:
+          alert('Sikeresen feliratkoztál a hírlevélre!');
+          setEmail('');
+          break;
+        case 400:
+          setError('Érvénytelen email cím!');
+          break;
+        case 409:
+          setError('Ez az email cím már fel van iratkozva a hírlevélre!');
+          break;
+        default:
+          setError('Ismeretlen hiba!');
       }
     }
   };
@@ -47,11 +46,15 @@ export function ModalContent() {
           placeholder='[email protected]'
           className='text-black p-1 rounded-md'
           value={email}
-          onChange={(e) => setEmail(e.target.value)}
+          onChange={(e) => {
+            setEmail(e.target.value);
+            setError('');
+          }}
           type='email'
         />
+        {error && <p className='text-red-600'>{error}</p>}
         <button
-          disabled={!email || !accepted}
+          disabled={!EmailValidator.validate(email) || !accepted || !!error}
           onClick={onSubscribe}
           className='bg-white text-black rounded-md p-3 disabled:bg-gray-400 disabled:cursor-not-allowed'
         >