update analyticsswitch components for persisting enabled

components/AnalyticsSwitch/AnalyticsSwitch.tsx

@@ -0,0 +1,11 @@
+import { api } from '~/trpc/server';
+import Switch from './Switch';
+import 'server-only';
+
+const AnalyticsSwitch = async () => {
+  const appSettings = await api.appSettings.get.query();
+
+  return <Switch allowAnalytics={!!appSettings?.allowAnalytics} />;
+};
+
+export default AnalyticsSwitch;

components/AnalyticsSwitch/Switch.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import { Switch as SwitchUI } from '~/components/ui/switch';
+import { setAnalytics } from './action';
+import { useOptimistic, useTransition } from 'react';
+import { api } from '~/trpc/client';
+import { analytics } from '~/lib/analytics';
+
+const Switch = ({ allowAnalytics }: { allowAnalytics: boolean }) => {
+  const [, startTransition] = useTransition();
+  const [optimisticAllowAnalytics, setOptimisticAllowAnalytics] = useOptimistic(
+    allowAnalytics,
+    (state: boolean, newState: boolean) => newState,
+  );
+  const utils = api.useUtils();
+
+  // eslint-disable-next-line no-process-env
+  const globalAnalyticsEnabled = process.env.NEXT_PUBLIC_ANALYTICS_ENABLED;
+
+  return (
+    <div
+      className={`mb-4 ${
+        globalAnalyticsEnabled === 'false' ? 'opacity-50' : ''
+      }`}
+    >
+      <div className="flex items-center justify-between">
+        <div className="mr-20">
+          <h3 className="font-bold">Allow Analytics</h3>
+          <p className="text-sm text-gray-600">
+            Information collected includes the number of protocols uploaded,
+            interviews conducted, participants recruited, and participants who
+            completed the interview. No personally identifiable information,
+            interview data, or protocol data is collected.
+          </p>
+        </div>
+        <SwitchUI
+          name="allowAnalytics"
+          checked={optimisticAllowAnalytics}
+          onCheckedChange={(value) => {
+            startTransition(async () => {
+              setOptimisticAllowAnalytics(value);
+
+              try {
+                await setAnalytics(value);
+                await utils.appSettings.get.refetch();
+                if (value === true) {
+                  analytics.enable();
+                } else {
+                  analytics.disable();
+                }
+              } catch (error) {
+                if (error instanceof Error) {
+                  throw new Error(error.message);
+                }
+                throw new Error('Something went wrong');
+              }
+            });
+          }}
+          disabled={globalAnalyticsEnabled === 'false'}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Switch;

components/AnalyticsSwitch/action.ts

@@ -0,0 +1,11 @@
+'use server';
+
+import { api } from '~/trpc/server';
+
+export async function setAnalytics(state: boolean) {
+  try {
+    await api.appSettings.updateAnalytics.mutate(state);
+  } catch (error) {
+    throw new Error(error as string);
+  }
+}