From 1687be50a55d888b499f080b352db07deff158c7 Mon Sep 17 00:00:00 2001
From: George Spanos <gspanos@moby-it.com>
Date: Wed, 29 May 2024 10:21:45 +0300
Subject: [PATCH] fix: prejoin issue

when redirecting back from a room, the app was permanently broken until a refresh, due to query caching
---
 ui/src/pages/prejoin/prejoinForm.tsx | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/ui/src/pages/prejoin/prejoinForm.tsx b/ui/src/pages/prejoin/prejoinForm.tsx
index 2fc9dd0..6f9b7b5 100644
--- a/ui/src/pages/prejoin/prejoinForm.tsx
+++ b/ui/src/pages/prejoin/prejoinForm.tsx
@@ -1,5 +1,5 @@
 import { useNavigate, useSearchParams } from "@solidjs/router";
-import { Component, createEffect, createSignal, onMount, Show } from "solid-js";
+import { Component, createEffect, createSignal, onCleanup, onMount, Show } from "solid-js";
 import {
   BrowserStorageKeys,
   isSpectator,
@@ -15,33 +15,35 @@ import { apiV1Url } from "../../config";
 import "./prejoinForm.css";
 import anime from 'animejs/lib/anime.es.js';
 import { fade } from "../home/animations";
-import { createQuery } from "@tanstack/solid-query";
+import { createQuery, useQueryClient } from "@tanstack/solid-query";
 
 const PrejoinForm: Component = () => {
-
+  const queryClient = useQueryClient();
+  const roomQueryKey = 'createRoomQuery';
   const createRoomQuery = createQuery<string>(() => ({
-    queryKey: ['createRoomQuery'],
+    queryKey: [roomQueryKey],
     queryFn: createRoom,
     enabled: false
   }));
   createEffect(() => {
     if (createRoomQuery.data) {
       setRoomId(createRoomQuery.data);
-      navigate(`/room/${roomId()}`);
+      navigate(`/room/${roomId()}`, { replace: true });
     }
   });
   onMount(() => {
     anime(fade('.prejoin-form'));
   });
+  onCleanup(() => {
+    queryClient.resetQueries({ queryKey: [roomQueryKey] });
+  });
   const navigate = useNavigate();
   const [params] = useSearchParams<{ create: string; }>();
   const isCreatingRoom = Boolean(params.create);
   const title = isCreatingRoom ? "Create a New Room" : "Joining Room";
   const buttonText = isCreatingRoom ? "create room" : "join room";
   const [usernameError, setUsernameError] = createSignal<string | null>(null);
-  createEffect(() => {
-    console.log(createRoomQuery.status);
-  });
+
   const handleInputChanged = (event: KeyboardEvent) => {
     try {
       // @ts-ignore