remove real data from sign in

apps/dashboard/src/app/(auth)/live-events/index.tsx

@@ -1,12 +1,7 @@
-import { getEvents, transformMinimalEvent } from '@openpanel/db';
-
 import LiveEvents from './live-events';
 
-const LiveEventsServer = async () => {
-  const events = await getEvents(
-    'SELECT * FROM events ORDER BY created_at DESC LIMIT 30'
-  );
-  return <LiveEvents events={events.map(transformMinimalEvent)} />;
+const LiveEventsServer = () => {
+  return <LiveEvents />;
 };
 
 export default LiveEventsServer;

apps/dashboard/src/app/(auth)/live-events/live-events.tsx

@@ -1,21 +1,121 @@
 'use client';
 
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { EventListItem } from '@/app/(app)/[organizationSlug]/[projectId]/events/event-list/event-list-item';
-import useWS from '@/hooks/useWS';
 import { AnimatePresence, motion } from 'framer-motion';
 
 import type { IServiceEventMinimal } from '@openpanel/db';
 
-type Props = {
-  events: IServiceEventMinimal[];
+const useWebEventGenerator = () => {
+  const [events, setEvents] = useState<IServiceEventMinimal[]>([]);
+
+  const eventNames = [
+    'screen_view',
+    'session_start',
+    'session_end',
+    'submit_form',
+    'sign_in',
+    'sign_up',
+    'purchase_flow',
+    'purchase_flow_completed',
+    'subscription_started',
+  ];
+  const browsers = [
+    'Chrome WebView',
+    'Firefox',
+    'Safari',
+    'Edge',
+    'Chrome',
+    'Opera',
+    'Internet Explorer',
+  ];
+  const paths = [
+    '/features/',
+    '/contact/',
+    '/about/',
+    '/pricing/',
+    '/blog/',
+    '/signup/',
+    '/login/',
+  ];
+  const countries = [
+    'BY',
+    'US',
+    'FR',
+    'IN',
+    'DE',
+    'JP',
+    'BR',
+    'ZA',
+    'EG',
+    'AU',
+    'RU',
+    'CN',
+    'IT',
+    'GB',
+    'CA',
+  ];
+  const os = [
+    'Windows',
+    'MacOS',
+    'iOS',
+    'Android',
+    'Linux',
+    'Chrome OS',
+    'Windows Phone',
+  ];
+
+  // Function to generate a random event
+  const generateEvent = (index?: number): IServiceEventMinimal => {
+    const event = {
+      id: Math.random().toString(36).substring(2, 15),
+      name: eventNames[Math.floor(Math.random() * eventNames.length)]!,
+      projectId: 'marketing-site',
+      sessionId: Math.random().toString(36).substring(2, 15),
+      createdAt: new Date(new Date().getTime() - (index || 0) * 1000),
+      country: countries[Math.floor(Math.random() * countries.length)],
+      longitude: 27.5709,
+      latitude: 53.9007,
+      os: os[Math.floor(Math.random() * os.length)],
+      browser: browsers[Math.floor(Math.random() * browsers.length)],
+      device: 'mobile',
+      brand: 'Xiaomi',
+      duration: 0,
+      path: paths[Math.floor(Math.random() * paths.length)]!,
+      origin: 'https://www.voxie.com',
+      referrer: 'https://syndicatedsearch.goog',
+      meta: undefined,
+      minimal: true,
+    };
+
+    return event;
+  };
+
+  useEffect(() => {
+    let timer: NodeJS.Timeout;
+    // Generate initial 30 events
+    const initialEvents = Array.from({ length: 30 }).map((_, index) => {
+      return generateEvent(index);
+    });
+    setEvents(initialEvents);
+
+    function createNewEvent() {
+      const newEvent = generateEvent();
+      setEvents((prevEvents) => [newEvent, ...prevEvents]);
+      timer = setTimeout(() => createNewEvent(), Math.random() * 1000);
+    }
+
+    createNewEvent();
+
+    return () => clearInterval(timer);
+  }, []);
+
+  return events;
 };
 
-const LiveEvents = ({ events }: Props) => {
-  const [state, setState] = useState(events ?? []);
-  useWS<IServiceEventMinimal>('/live/events', (event) => {
-    setState((p) => [event, ...p].slice(0, 30));
-  });
+const LiveEvents = () => {
+  const state = useWebEventGenerator();
+
   return (
     <div className="hide-scrollbar h-screen overflow-y-auto">
       <div className="text-background-foreground py-16 text-center text-2xl font-bold">