Merge pull request #12 from cindywu/cindywu/set-client-id

set client id in localStorage

Author: cindywu

src/frontend/user-uses.tsx

@@ -64,6 +64,15 @@ function UserItems({userID, items}: any){
       return bDate.getTime() - aDate.getTime()
     })
   }
+
+  if (filteredItems.length === 0) {
+    return (
+      <div className={'pt-2 pl-8'}>
+        No items yet
+      </div>
+    )
+  }
+
   return (
     <div className={'pt-2'}>
       {filteredItems.map((item: any) => {

src/pages/uses/[username].tsx

@@ -11,6 +11,9 @@ import UserUses from '../../frontend/user-uses';
 export default function Home() {
   const [reflect, setReflectClient] = useState<Reflect<M> | null>(null);
   const [_, setOnline] = useState(false);
+  const [clientUserID, setClientUserID] = useState<string | null>(null);
+
+  const LOCAL_STORAGE_KEY = 'uses.userID'
 
   const logSink = process.env.NEXT_PUBLIC_DATADOG_CLIENT_TOKEN
     ? new DataDogBrowserLogSink()
@@ -22,7 +25,7 @@ export default function Home() {
 
     (async () => {
       logger.info?.(`Connecting to worker at ${workerWsURI}`);
-      const userID = nanoid();
+      const userID = clientUserID ? clientUserID : nanoid();
       const r = new Reflect<M>({
         socketOrigin: workerWsURI,
         onOnlineChange: setOnline,
@@ -47,6 +50,12 @@ export default function Home() {
     })();
   }, []);
 
+  useEffect(() => {
+    const userID = localStorage.getItem(LOCAL_STORAGE_KEY)
+    if ( userID != null) setClientUserID(userID)
+  },[])
+
+
   if (!reflect) {
     return null;
   }

src/pages/uses/index.tsx

@@ -12,6 +12,10 @@ export default function Home() {
   const [reflect, setReflectClient] = useState<Reflect<M> | null>(null);
   const [_, setOnline] = useState(false);
 
+  const [clientUserID, setClientUserID] = useState<string | null>(null);
+
+  const LOCAL_STORAGE_KEY = 'uses.userID'
+
   const logSink = process.env.NEXT_PUBLIC_DATADOG_CLIENT_TOKEN
     ? new DataDogBrowserLogSink()
     : consoleLogSink;
@@ -22,7 +26,7 @@ export default function Home() {
 
     (async () => {
       logger.info?.(`Connecting to worker at ${workerWsURI}`);
-      const userID = nanoid();
+      const userID = clientUserID ? clientUserID : nanoid();
       const r = new Reflect<M>({
         socketOrigin: workerWsURI,
         onOnlineChange: setOnline,
@@ -47,6 +51,12 @@ export default function Home() {
     })();
   }, []);
 
+  useEffect(() => {
+    const userID = localStorage.getItem(LOCAL_STORAGE_KEY)
+    if ( userID != null) setClientUserID(userID)
+  },[])
+
+
   if (!reflect) {
     return null;
   }