fix: ProjectBuildingPage refresh multiple times

studio/pages/project/[ref]/building.tsx

@@ -1,33 +1,26 @@
-import * as React from 'react'
+import { FC, useEffect } from 'react'
 import { useRouter } from 'next/router'
-import { observer } from 'mobx-react-lite'
-import { useStore, withAuth } from 'hooks'
-
+import { withAuth } from 'hooks'
 import ProjectLayout from 'components/layouts'
 
-type ProjectBuildingPageState = {} & any
-const ProjectBuildingPage: React.FC<ProjectBuildingPageState> = () => {
-  const { ui } = useStore()
-  const project: any = ui.selectedProject
+const ProjectBuildingPage: FC = () => {
   return (
     <ProjectLayout title="Project Building">
-      <RedirectToDashboard projectRef={project?.ref ?? ''} />
+      <RedirectToDashboard />
     </ProjectLayout>
   )
 }
-export default withAuth(observer(ProjectBuildingPage))
+export default withAuth(ProjectBuildingPage)
 
-type RedirectToDashboardState = {
-  projectRef: string
-}
-const RedirectToDashboard: React.FC<RedirectToDashboardState> = ({ projectRef }) => {
+const RedirectToDashboard: FC = () => {
   const router = useRouter()
+  const { ref } = router.query
 
-  React.useEffect(() => {
+  useEffect(() => {
     // Use redirect to reload store data properly after project has been
     // been created or unpaused, this is necessarily especially for unpausing
     // so that the dashboard fetches the updated connection strings
-    window.location.replace(`/project/${projectRef}`)
+    window.location.replace(`/project/${ref}`)
   }, [])
   return null
 }