Refactor BeerPostHeader, refactor login and register

- Updated BeerPostHeader in /id page to use semantic HTML tags
- Removed the getServerSidesProps fn in /login and /register. Moved the redirect logic over to the client, will redirect on the client side.
- Added delete BeerPost option on the edit page.

components/BeerById/BeerInfoHeader.tsx

@@ -39,10 +39,10 @@ const BeerInfoHeader: FC<{ beerPost: BeerPostQueryResult; initialLikeCount: numb
   }, [beerPost.createdAt]);
 
   return (
-    <div className="card flex flex-col justify-center bg-base-300">
-      <div className="card-body">
+    <main className="card flex flex-col justify-center bg-base-300">
+      <article className="card-body">
         <div className="flex justify-between">
-          <div>
+          <header>
             <h1 className="text-4xl font-bold">{beerPost.name}</h1>
             <h2 className="text-2xl font-semibold">
               by{' '}
@@ -53,31 +53,29 @@ const BeerInfoHeader: FC<{ beerPost: BeerPostQueryResult; initialLikeCount: numb
                 {beerPost.brewery.name}
               </Link>
             </h2>
-          </div>
-          <div>
-            {isPostOwner && (
-              <div className="tooltip tooltip-left" data-tip={`Edit '${beerPost.name}'`}>
-                <Link
-                  href={`/beers/${beerPost.id}/edit`}
-                  className="btn-outline btn-sm btn"
-                >
-                  <FaRegEdit className="text-xl" />
-                </Link>
-              </div>
-            )}
-          </div>
+          </header>
+          {isPostOwner && (
+            <div className="tooltip tooltip-left" data-tip={`Edit '${beerPost.name}'`}>
+              <Link
+                href={`/beers/${beerPost.id}/edit`}
+                className="btn-outline btn-sm btn"
+              >
+                <FaRegEdit className="text-xl" />
+              </Link>
+            </div>
+          )}
         </div>
 
         <h3 className="italic">
           posted by{' '}
           <Link href={`/users/${beerPost.postedBy.id}`} className="link-hover link">
-            {beerPost.postedBy.username}{' '}
+            {beerPost.postedBy.username}
           </Link>
           <span
             className="tooltip tooltip-bottom"
             data-tip={format(createdAtDate, 'MM/dd/yyyy')}
           >
-            {timeDistance} ago
+            {` ${timeDistance}`} ago
           </span>
         </h3>
 
@@ -108,8 +106,8 @@ const BeerInfoHeader: FC<{ beerPost: BeerPostQueryResult; initialLikeCount: numb
             )}
           </div>
         </div>
-      </div>
-    </div>
+      </article>
+    </main>
   );
 };
 

components/EditBeerPostForm.tsx

@@ -50,6 +50,18 @@ const EditBeerPostForm: FC<EditBeerPostFormProps> = ({ previousValues }) => {
     }
   };
 
+  const onDelete = async () => {
+    try {
+      const response = await fetch(`/api/beers/${previousValues.id}`, {
+        method: 'DELETE',
+      });
+      if (response.status === 200) {
+        router.push('/beers');
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  };
   return (
     <form className="form-control" onSubmit={handleSubmit(onSubmit)}>
       <div className="mb-5">
@@ -116,10 +128,17 @@ const EditBeerPostForm: FC<EditBeerPostFormProps> = ({ previousValues }) => {
         />
       </FormSegment>
 
-      <div className="mt-2">
+      <div className="mt-2 space-y-4">
         <Button type="submit" isSubmitting={isSubmitting}>
           {isSubmitting ? 'Submitting...' : 'Submit'}
         </Button>
+        <button
+          className={`btn-primary btn w-full rounded-xl ${isSubmitting ? 'loading' : ''}`}
+          type="button"
+          onClick={onDelete}
+        >
+          Delete
+        </button>
       </div>
     </form>
   );