Frontend/edwin/feedback (#121)

Author: edwnl

frontend/package-lock.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "@mantine/core": "^7.17.0",
     "@mantine/hooks": "^7.16.1",
-    "@mantine/notifications": "^7.17.0",
+    "@mantine/notifications": "^7.17.1",
     "@next/third-parties": "^15.2.0",
     "@tabler/icons-react": "^3.30.0",
     "@tailwindcss/typography": "^0.5.16",

frontend/package.json

@@ -0,0 +1,77 @@
+// frontend/src/app/actions/feedback.ts
+"use server";
+
+// Type for our form data
+export interface FeedbackFormData {
+  email?: string;
+  message: string;
+}
+
+export async function submitFeedback(data: FeedbackFormData) {
+  const databaseId = process.env.NOTION_DATABASE_ID;
+  const notionApiKey = process.env.NOTION_API_KEY;
+
+  if (!databaseId) {
+    throw new Error("NOTION_DATABASE_ID environment variable is not set");
+  }
+
+  if (!notionApiKey) {
+    throw new Error("NOTION_API_KEY environment variable is not set");
+  }
+
+  try {
+    const response = await fetch("https://api.notion.com/v1/pages", {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${notionApiKey}`,
+        "Content-Type": "application/json",
+        "Notion-Version": "2022-06-28",
+      },
+      body: JSON.stringify({
+        parent: {
+          database_id: databaseId,
+        },
+        properties: {
+          Email: {
+            title: [
+              {
+                text: {
+                  content: data.email || "Anonymous",
+                },
+              },
+            ],
+          },
+          Feedback: {
+            rich_text: [
+              {
+                text: {
+                  content: data.message,
+                },
+              },
+            ],
+          },
+          Date: {
+            date: {
+              start: new Date().toISOString(),
+            },
+          },
+        },
+      }),
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json();
+      return {
+        success: false,
+        message: `Notion returned an API error: ${errorData.message || response.statusText}`,
+      };
+    }
+
+    return { success: true, message: "Feedback submitted successfully." };
+  } catch (error) {
+    return {
+      success: false,
+      message: `Encountered an internal error: ${error}`,
+    };
+  }
+}

frontend/src/app/actions.ts

@@ -2,6 +2,8 @@
 // the tailwind class passed with className is not applied.
 import "@mantine/core/styles.css";
 import "./globals.css";
+import "@mantine/notifications/styles.css";
+
 import { Analytics } from "@vercel/analytics/react";
 import { SpeedInsights } from "@vercel/speed-insights/next";
 import { GoogleAnalytics } from "@next/third-parties/google";
@@ -16,6 +18,8 @@ import { theme } from "@/lib/theme";
 import { Poppins } from "next/font/google";
 import { FilterProvider } from "@/context/filter/filter-provider";
 import { Metadata } from "next";
+import FeedbackButton from "@/components/ui/feedback-button";
+import { Notifications } from "@mantine/notifications";
 
 export const metadata: Metadata = {
   title: {
@@ -41,9 +45,11 @@ export default function RootLayout({ children }: PropsWithChildren) {
           <MantineProvider theme={theme} defaultColorScheme="dark">
             <FilterProvider>
               <div className="min-h-screen flex flex-col px-6">
+                <Notifications />
                 <NavBar />
                 <main className="">
                   {children}
+                  <FeedbackButton />
                   <Analytics />
                   <SpeedInsights />
                   <GoogleAnalytics gaId="G-1RXLVCFJC0" />

frontend/src/app/layout.tsx

@@ -38,15 +38,17 @@ export default function JobPagination({ pageSize = 20 }: JobPaginationProps) {
   };
 
   return (
-    <div className="flex justify-center py-4">
+    //   mb-12 gives extra space for feedback button on mobile. it would've blocked the pagination controls.
+    <div className="flex justify-center py-4 mb-12 sm:mb-0">
       <Pagination
         autoContrast
         value={filters.filters.page}
         onChange={handlePageChange}
         total={totalPages}
-        siblings={1}
         size="md"
         gap={12}
+        boundaries={1}
+        siblings={0}
         radius="lg"
         color="accent"
         getItemProps={(page) => ({

frontend/src/components/jobs/job-pagination.tsx

@@ -0,0 +1,156 @@
+// frontend/src/components/ui/feedback-button.tsx
+"use client";
+
+import { useState } from "react";
+import {
+  Button,
+  Modal,
+  TextInput,
+  Textarea,
+  Group,
+  ActionIcon,
+} from "@mantine/core";
+import { IconMessageCircle } from "@tabler/icons-react";
+import { notifications } from "@mantine/notifications";
+import { submitFeedback } from "@/app/actions";
+
+export default function FeedbackButton() {
+  const [opened, setOpened] = useState(false);
+  const [email, setEmail] = useState("");
+  const [message, setMessage] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (
+      !message ||
+      !message.trim() ||
+      message.trim().length < 3 ||
+      message.length > 1000
+    ) {
+      notifications.show({
+        position: "top-center",
+        autoClose: 1500,
+        withCloseButton: false,
+        color: "red",
+        message: "Feedback must be between 3 and 1k characters!",
+      });
+      return;
+    }
+
+    if (email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+      notifications.show({
+        position: "top-center",
+        autoClose: 1500,
+        withCloseButton: false,
+        color: "red",
+        message: "Please enter a valid email address!",
+      });
+      return;
+    }
+    setIsSubmitting(true);
+
+    try {
+      // Call our server action with the form data
+      const result = await submitFeedback({ email, message });
+
+      if (result.success) {
+        // Clear form and close modal
+        setEmail("");
+        setMessage("");
+        setOpened(false);
+
+        notifications.show({
+          position: "top-center",
+          autoClose: 1500,
+          withCloseButton: false,
+          title: "Thank you!",
+          message: "Your feedback has been submitted.",
+          color: "green",
+        });
+      } else {
+        notifications.show({
+          position: "top-center",
+          title: "Error",
+          message:
+            result.message || "Failed to submit feedback. Please try again.",
+          color: "red",
+        });
+      }
+    } catch (error) {
+      notifications.show({
+        position: "top-center",
+        title: "Error",
+        message: "Failed to submit feedback: " + error,
+        color: "red",
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <>
+      <ActionIcon
+        className="fixed bottom-4 right-6 z-50"
+        radius="xl"
+        color="accent"
+        size={50}
+        c="black"
+        onClick={() => setOpened(true)}
+      >
+        <IconMessageCircle size={20} />
+      </ActionIcon>
+
+      <Modal
+        opened={opened}
+        onClose={() => setOpened(false)}
+        title="Share Your Feedback"
+        size="md"
+        radius="lg"
+        classNames={{
+          content: "mt-12",
+        }}
+        padding="md"
+      >
+        <form onSubmit={handleSubmit}>
+          <TextInput
+            label="Email (optional)"
+            placeholder="[email protected]"
+            className="mb-4"
+            value={email}
+            onChange={(e) => setEmail(e.currentTarget.value)}
+            type="email"
+          />
+
+          <Textarea
+            label="Feedback"
+            placeholder="Tell us about any bugs, features, missing listings or anything you want to say!"
+            minRows={6}
+            maxRows={15}
+            className="mb-6"
+            required
+            autosize
+            value={message}
+            onChange={(e) => setMessage(e.currentTarget.value)}
+          />
+
+          <Group justify="flex-end">
+            <Button variant="light" onClick={() => setOpened(false)}>
+              Cancel
+            </Button>
+            <Button
+              type="submit"
+              color="accent"
+              c="black"
+              loading={isSubmitting}
+            >
+              Submit Feedback
+            </Button>
+          </Group>
+        </form>
+      </Modal>
+    </>
+  );
+}

frontend/src/components/ui/feedback-button.tsx

@@ -89,6 +89,13 @@ export function FilterProvider({ children }: { children: ReactNode }) {
     }
   }, [pathname, searchParams]);
 
+  useEffect(() => {
+    // clear filters on return to homepage
+    if (pathname === "/") {
+      setFilters(emptyFilterState);
+    }
+  }, [pathname]);
+
   // Wrapper for SelectedJob to validate attributes first
   const setSelectedJob = (job: Job | null) => {
     // Remove duplicates from working_rights