PYTHON-4121: Added format and linting to frontend + Updated Library Requirements

{{cookiecutter.project_slug}}/frontend/app/about/page.tsx

@@ -1,29 +1,29 @@
-import { Metadata } from "next"
-import { getPostData } from "../lib/utilities/posts"
+import { Metadata } from "next";
+import { getPostData } from "../lib/utilities/posts";
 
 type Post = {
-  id: string
-  content: string
-  title: string
-  description: string
-  author: string
-  publishedAt: string
-}
+  id: string;
+  content: string;
+  title: string;
+  description: string;
+  author: string;
+  publishedAt: string;
+};
 
-const aboutPath = "app/content/"
+const aboutPath = "app/content/";
 
 export const metadata: Metadata = {
   title: "Getting started with a base project",
-}
+};
 
 export default async function About() {
-  const data: Post = await getPostData("about", aboutPath)
+  const data: Post = await getPostData("about", aboutPath);
 
   return (
     <>
       <div className="max-w-none mx-auto sm:w-3/5 prose prose-reader-light prose-reader-base prose-reader-compact px-4 pt-10 pb-20 sm:px-6">
         <div dangerouslySetInnerHTML={{ __html: data.content }} />
       </div>
     </>
-  )
+  );
 }

{{cookiecutter.project_slug}}/frontend/app/authentication/page.tsx

@@ -1,29 +1,29 @@
-import { Metadata } from "next"
-import { getPostData } from "../lib/utilities/posts"
+import { Metadata } from "next";
+import { getPostData } from "../lib/utilities/posts";
 
 type Post = {
-  id: string
-  content: string
-  title: string
-  description: string
-  author: string
-  publishedAt: string
-}
+  id: string;
+  content: string;
+  title: string;
+  description: string;
+  author: string;
+  publishedAt: string;
+};
 
-const aboutPath = "app/content/"
+const aboutPath = "app/content/";
 
 export const metadata: Metadata = {
   title: "Authentication with Magic and Oauth2",
-}
+};
 
 export default async function Authentication() {
-  const data: Post = await getPostData("authentication", aboutPath)
+  const data: Post = await getPostData("authentication", aboutPath);
 
   return (
     <>
       <div className="max-w-none mx-auto sm:w-3/5 prose prose-reader-light prose-reader-base prose-reader-compact px-4 pt-10 pb-20 sm:px-6">
         <div dangerouslySetInnerHTML={{ __html: data.content }} />
       </div>
     </>
-  )
+  );
 }

{{cookiecutter.project_slug}}/frontend/app/blog/[id]/page.tsx

@@ -1,32 +1,32 @@
-import { getPostData } from "../../lib/utilities/posts"
-import { readableDate } from "../../lib/utilities/textual"
+import { getPostData } from "../../lib/utilities/posts";
+import { readableDate } from "../../lib/utilities/textual";
 
 type Params = {
-  id: string
-}
+  id: string;
+};
 
 type Props = {
-  params: Params
-}
+  params: Params;
+};
 
 type Post = {
-  title: string
-  publishedAt: string
-  content: string
-  author: string
-}
+  title: string;
+  publishedAt: string;
+  content: string;
+  author: string;
+};
 
 export async function generateMetadata({ params }: Props) {
-  const postData: Post = await getPostData(params.id)
+  const postData: Post = await getPostData(params.id);
 
   return {
     title: postData.title,
-  }
+  };
 }
 
 // -< Post >-
 export default async function Post({ params }: Props) {
-  const data: Post = await getPostData(params.id)
+  const data: Post = await getPostData(params.id);
 
   return (
     <>
@@ -39,5 +39,5 @@ export default async function Post({ params }: Props) {
         <div dangerouslySetInnerHTML={{ __html: data.content }} />
       </div>
     </>
-  )
+  );
 }

{{cookiecutter.project_slug}}/frontend/app/blog/page.tsx

@@ -1,18 +1,18 @@
-import Link from "next/link"
-import { getSortedPostsData } from "../lib/utilities/posts"
-import { readableDate } from "../lib/utilities/textual"
+import Link from "next/link";
+import { getSortedPostsData } from "../lib/utilities/posts";
+import { readableDate } from "../lib/utilities/textual";
 
 type PostMeta = {
-  id: string
-  title: string
-  description: string
-  author: string
-  publishedAt: string
-  categories: string[]
-}
+  id: string;
+  title: string;
+  description: string;
+  author: string;
+  publishedAt: string;
+  categories: string[];
+};
 
-const title = "Recent blog posts"
-const description = "Thoughts from the world of me."
+const title = "Recent blog posts";
+const description = "Thoughts from the world of me.";
 
 const renderPost = (post: PostMeta) => {
   let categories = post.categories.map((category) => (
@@ -22,7 +22,7 @@ const renderPost = (post: PostMeta) => {
     >
       {category.trim()}
     </span>
-  ))
+  ));
 
   return (
     <div key={post.id}>
@@ -42,12 +42,12 @@ const renderPost = (post: PostMeta) => {
         </div>
       </div>
     </div>
-  )
-}
+  );
+};
 
 export default function BlogHome() {
-  const postsList: PostMeta[] = getSortedPostsData()
-  const posts = postsList.map((post) => renderPost(post))
+  const postsList: PostMeta[] = getSortedPostsData();
+  const posts = postsList.map((post) => renderPost(post));
 
   return (
     <main className="max-w-none mx-auto sm:w-3/5 bg-white px-4 pt-10 pb-20 sm:px-6">
@@ -63,5 +63,5 @@ export default function BlogHome() {
         </div>
       </div>
     </main>
-  )
+  );
 }

{{cookiecutter.project_slug}}/frontend/app/components/Footer.tsx

@@ -1,7 +1,7 @@
-"use client"
+"use client";
 
-import Link from "next/link"
-import { siteName } from "../lib/utilities/generic"
+import Link from "next/link";
+import { siteName } from "../lib/utilities/generic";
 
 const githubIcon = () => {
   return (
@@ -17,8 +17,8 @@ const githubIcon = () => {
         clipRule="evenodd"
       />
     </svg>
-  )
-}
+  );
+};
 
 const mastodonIcon = () => {
   return (
@@ -34,8 +34,8 @@ const mastodonIcon = () => {
         clipRule="evenodd"
       />
     </svg>
-  )
-}
+  );
+};
 
 const footerNavigation = {
   main: [
@@ -57,7 +57,7 @@ const footerNavigation = {
       icon: mastodonIcon,
     },
   ],
-}
+};
 
 const renderNavigation = () => {
   return footerNavigation.main.map((item) => (
@@ -69,8 +69,8 @@ const renderNavigation = () => {
         {item.name}
       </Link>
     </div>
-  ))
-}
+  ));
+};
 
 const renderSocials = () => {
   return footerNavigation.social.map((item) => (
@@ -82,8 +82,8 @@ const renderSocials = () => {
       <span className="sr-only">{item.name}</span>
       {item.icon()}
     </a>
-  ))
-}
+  ));
+};
 
 export default function Footer() {
   return (
@@ -105,5 +105,5 @@ export default function Footer() {
         </div>
       </div>
     </footer>
-  )
+  );
 }

{{cookiecutter.project_slug}}/frontend/app/components/Navigation.tsx

@@ -1,36 +1,36 @@
-"use client"
+"use client";
 
-import { Disclosure } from "@headlessui/react"
-import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline"
-import Link from "next/link"
-import AlertsButton from "./alerts/AlertsButton"
-import dynamic from "next/dynamic"
+import { Disclosure } from "@headlessui/react";
+import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
+import Link from "next/link";
+import AlertsButton from "./alerts/AlertsButton";
+import dynamic from "next/dynamic";
 const AuthenticationNavigation = dynamic(
   () => import("./authentication/AuthenticationNavigation"),
   { ssr: false },
-)
+);
 
 const navigation = [
   { name: "About", to: "/about" },
   { name: "Authentication", to: "/authentication" },
   { name: "Blog", to: "/blog" },
-]
+];
 
 const renderIcon = (open: boolean) => {
   if (!open) {
-    return <Bars3Icon className="block h-6 w-6" aria-hidden="true" />
+    return <Bars3Icon className="block h-6 w-6" aria-hidden="true" />;
   } else {
-    return <XMarkIcon className="block h-6 w-6" aria-hidden="true" />
+    return <XMarkIcon className="block h-6 w-6" aria-hidden="true" />;
   }
-}
+};
 
 const renderNavLinks = (style: string) => {
   return navigation.map((nav) => (
     <Link href={nav.to} key={nav.name} className={style}>
       {nav.name}
     </Link>
-  ))
-}
+  ));
+};
 export default function Navigation() {
   return (
     <header>
@@ -84,5 +84,5 @@ export default function Navigation() {
         )}
       </Disclosure>
     </header>
-  )
+  );
 }