fix: logged in state transition between pages

jkklapp · Jun 5, 2022 · 5d1d475 · 5d1d475
1 parent 873336c
commit 5d1d475
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 12 deletions.
diff --git a/frontend/src/components/Dashboard/index.spec.js b/frontend/src/components/Dashboard/index.spec.js
@@ -2,8 +2,30 @@ import { shallowMount } from '@vue/test-utils';
 import Dashboard from '.';
 import Input from './Input.vue';
 import Posts from './Posts.vue';
+import { getAuth } from '../../auth';
+
+jest.mock('../../auth');
 
 describe('Dashboard', () => {
+  let old_env;
+  beforeEach(() => {
+    old_env = process.env;
+    process.env = {
+      VUE_APP_API_BASE: 'https://my-api.com',
+      VUE_APP_INPUT_LABEL: 'Fluunk',
+      VUE_APP_INPUT_CTA_LABEL: 'Fluu',
+    };
+    getAuth.mockReturnValue({
+      onAuthStateChanged: jest.fn(() => ({
+        email: 'test',
+        displayName: 'John Doe',
+      })),
+    });
+  });
+  afterEach(() => {
+    process.env = old_env;
+    jest.resetAllMocks();
+  });
   it('displays Input and Posts components when "isLoggedIn" is true', () => {
     const wrapper = shallowMount(Dashboard, {
       computed: {

diff --git a/frontend/src/components/Dashboard/index.vue b/frontend/src/components/Dashboard/index.vue
@@ -12,6 +12,7 @@
 import Input from './Input';
 import Posts from './Posts';
 import { mapGetters } from 'vuex';
+import { getAuth } from '../../auth';
 
 export default {
   components: {
@@ -24,9 +25,16 @@ export default {
     }),
   },
   mounted() {
-    if (!this.isLoggedIn) {
-      this.$router.push('/login');
-    }
+    getAuth().onAuthStateChanged((user) => {
+      if (user) {
+        this.$store.dispatch('setUser', user);
+        this.$store.dispatch('fetchPosts', this.$store.state);
+      } else {
+        if (this.$router.currentRoute._value.name === 'Dashboard') {
+          this.$router.replace({ name: 'Login' });
+        }
+      }
+    });
   },
 };
 </script>
diff --git a/frontend/src/components/NavBar/index.vue b/frontend/src/components/NavBar/index.vue
@@ -7,9 +7,15 @@
       >
         {{ appName }}
       </router-link>
+      <router-link
+        to="/about"
+        class="align-center block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+      >
+        About
+      </router-link>
       <div class="mx-auto w-100"></div>
       <div class="flex items-end md:order-2">
-        <UserMenu v-if="isLoggedIn" />
+        <UserMenu v-show="isLoggedIn" />
         <ThemeToggle />
       </div>
     </div>

diff --git a/frontend/src/main.js b/frontend/src/main.js
@@ -6,7 +6,6 @@ import App from './App.vue';
 import store from './store';
 import router from './routes/index';
 import './index.css';
-import { getAuth } from './auth';
 import VueToast from 'vue-toast-notification';
 import 'vue-toast-notification/dist/theme-default.css';
 
@@ -22,13 +21,6 @@ const firebaseConfig = {
 
 firebase.initializeApp(firebaseConfig);
 
-getAuth().onAuthStateChanged((user) => {
-  if (user) {
-    store.dispatch('setUser', user);
-    store.dispatch('fetchPosts', store.state);
-  }
-});
-
 const app = createApp(App);
 app.use(store);
 app.use(router);

diff --git a/frontend/src/routes/index.js b/frontend/src/routes/index.js
@@ -4,6 +4,7 @@ import Register from '../components/Register';
 import Dashboard from '../components/Dashboard';
 import Terms from '../components/misc/Terms';
 import PrivacyPolicy from '../components/misc/PrivacyPolicy';
+import About from '../components/misc/About';
 
 const router = createRouter({
   mode: 'history',
@@ -30,6 +31,11 @@ const router = createRouter({
       name: 'PrivacyPolicy',
       component: PrivacyPolicy,
     },
+    {
+      path: '/about',
+      name: 'About',
+      component: About,
+    },
     {
       path: '/',
       name: 'Dashboard',