Traack remove local storage code (#138)

* First attempt at removing local storage code

* Fixing api call

* Only show the pol.is survey if the user xid is not null

* Removing xid from user table and using the user's ID

* Fixing script appending

---------

Co-authored-by: Taylor Raack <[email protected]>

prisma/migrations/20230724033054_remove_xid_column/migration.sql

@@ -0,0 +1,28 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `xid` on the `User` table. All the data in the column will be lost.
+
+*/
+BEGIN TRY
+
+BEGIN TRAN;
+
+-- DropIndex
+ALTER TABLE [dbo].[User] DROP CONSTRAINT [User_xid_key];
+
+-- AlterTable
+ALTER TABLE [dbo].[User] DROP COLUMN [xid];
+
+COMMIT TRAN;
+
+END TRY
+BEGIN CATCH
+
+IF @@TRANCOUNT > 0
+BEGIN
+    ROLLBACK TRAN;
+END;
+THROW
+
+END CATCH

prisma/schema.prisma

@@ -71,7 +71,6 @@ model Session {
 
 model User {
   id                  String              @id @default(cuid())
-  xid                 String?             @unique @default(cuid())
   name                String?
   email               String?             @unique
   emailVerified       DateTime?

src/pages/index.tsx

@@ -84,7 +84,6 @@ const AuthShowcase: React.FC = () => {
   const { data: sessionData } = useSession();
 
   const handleSignOut = async () => {
-    localStorage.clear();
     await signOut();
   };
 

src/pages/polissurvey.tsx

@@ -8,44 +8,36 @@ import ProgressBar from "../components/ProgressBar";
 const PolisSurvey: NextPage = () => {
   const router = useRouter();
   const { surveyId } = router.query;
-  const [userID, setUserID] = useState<string>();
-  const xidDataDB = api.user.getXID.useQuery();
+  const userID = api.user.getId.useQuery()?.data?.id;
 
   useEffect(() => {
-    if (xidDataDB.data && xidDataDB.data.xid !== null) {
-      setUserID(String(xidDataDB.data.xid));
-      localStorage.polisUserXID = String(xidDataDB.data.xid);
-    } else if (
-      localStorage.polisUserXID !== "undefined" &&
-      localStorage.polisUserXID !== undefined
-    ) {
-      setUserID(String(localStorage.polisUserXID));
-      console.log("Existing polisUserXID found:", localStorage.polisUserXID);
-    } else {
-      console.log("Assigning new polisUserXID:", userID);
-      localStorage.polisUserXID = userID;
-    }
-  }, [userID, xidDataDB.data?.xid]);
+    if (userID !== undefined && userID !== "") {
+      const script = document.createElement("script");
 
-  useEffect(() => {
-    const script = document.createElement("script");
+      script.src = "https://pol.is/embed.js";
+      script.async = true;
 
-    script.src = "https://pol.is/embed.js";
-    script.async = true;
+      document.body.appendChild(script);
 
-    document.body.appendChild(script);
+      return () => {
+        document.body.removeChild(script);
+      };
+    }
+  }, [userID]);
 
-    return () => {
-      document.body.removeChild(script);
-    };
-  }, []);
+  if (userID === "" || userID === undefined) {
+    return (
+      <>
+        <h1 className="text-white">Loading Surveys</h1>
+      </>
+    );
+  }
   return (
     <div className="flex h-full flex-col items-center shadow-xl">
       <h1 className="mt-8 mb-4 text-lg font-semibold text-white md:mt-6 md:text-3xl">
         Step 6: Fill out the Pol.is survey
       </h1>
       <ProgressBar completed={100} />
-
       <div
         id="polis-container"
         className="mx-auto mt-8 h-[80%] w-[80%] overflow-y-scroll"

src/server/api/routers/user.ts

@@ -33,7 +33,7 @@ export const userRouter = createTRPCRouter({
       },
     });
   }),
-  getXID: publicProcedure.query(async ({ ctx }) => {
+  getId: publicProcedure.query(async ({ ctx }) => {
     if (!ctx.session) {
       console.log("Not authenticated");
       return null;
@@ -42,7 +42,7 @@ export const userRouter = createTRPCRouter({
     return ctx.prisma.user.findUnique({
       where: { id: userId },
       select: {
-        xid: true,
+        id: true,
       },
     });
   }),