BaQend is all set to go as it initializes, just make sure to verify the user's login

Currently, I am utilizing BaQend and Ionic2 to implement certain tasks at the start of my application.

1. Database Readiness

Instead of repeating this process on every page:

ionViewCanEnter(): Promise<baqend> {
        // Verify Baqend SDK readiness and wait for initialization
        return this.ready.resolve().then(db => this.db = db);
}

I attempted an alternative approach, however it did not yield the desired results:

initializeApp() {
        this.platform.ready().then(() => {
          // Platform and plugins are ready.
          // Perform any necessary native operations here.
          this.statusBar.styleDefault();
          this.splashScreen.hide();
          return this.ready.resolve().then(db => this.db = db);
        });
      }

2. User Login Status Check

During app initialization, it is essential to assess the user's login status. If the user is not logged in, prompt them to sign in using the LoginModal.

ionViewWillEnter(){
    if (this.db.User.me) {
      console.log(this.db.User.me.username,' entered HomePage with ID ', this.db.User.me.id);
    } else {
      this.openLoginModal()
      console.log('Hello Anonymous');
    }
  }

The above code functions effectively for the rootPage, although integrating it into the application startup would be more beneficial.

Any suggestions or recommendations?

Answer №1

Great observation!

After careful consideration, we have made adjustments to our ionic starter. The DBReady check has been relocated to the root view, specifically in the tabs.component.ts file of our starter. This ensures that the Rootview always waits for the database before rendering the child views.

If you choose to update the db.service.ts, you will now have access to the db exported from the SDK through:

import { db } from "baqend";

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Challenges arise when working with Vue 3.2 using the <script setup> tag in conjunction with TypeScript type

Hey there! I've been working with the Vue 3.2 <script setup> tag along with TypeScript. In a simple scenario, I'm aiming to display a user ID in the template. Technically, my code is functioning correctly as it shows the user ID as expect ...

Prevent loading data in Angular 5 by handling errors from undefined objects

Is there a way to avoid console errors from undefined objects? Imagine I have the following code: name : string; constructor(private data: DataService) { this.data.name.subscribe(res => this.name = res); } In my HTML, I have this: <p> {{name}} ...

Discover the magic of integrating FeathersJS REST functionality within Angular with these simple steps

I've encountered a challenge while trying to make Feathers work in Angular with a Feathers REST server. It seems that no requests are being made. My Feathers server hosts the resource http://example.com/app/experiences which returns data in paginated ...

Error: You can't use the 'await' keyword in this context

I encountered a strange issue while using a CLI that reads the capacitor.config.ts file. Every time the CLI reads the file, it throws a "ReferenceError: await is not defined" error. Interestingly, I faced a similar error with Vite in the past but cannot ...

Using Flickity API in Vue 3 with Typescript Integration

I have encountered an issue with implementing Flickity in my Vue 3 application. Everything works perfectly fine when using a static HTML carousel with fixed cells. However, I am facing difficulties when attempting to dynamically add cells during runtime us ...

Error encountered while trying to create a new project using Angular-

After executing ng new onepage, I encountered the following error message after waiting for a few minutes: npm WARN deprecated <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ec8b9e8d8f898a9980c18a9facddc2dec2df">[email  ...

Utilizing custom hooks for passing props in React Typescript

I have created a unique useToggler custom hook, and I am attempting to pass toggle props from it to the button child in the Header component. However, when I try using toggle={toggle}, I encounter this error: Type '{toggle: () => void;}' is ...

IE11 is throwing an error due to an unexpected quantifier in the regular expression

I have a string like SHM{GHT} and I need to extract the value from within the curly braces (GHT in this case). I used RegExp successfully to do this, but encountered an issue when testing on Internet Explorer. The page broke and I received an error message ...

Testing useEffect with React hooks, Jest, and Enzyme to add and remove event listeners on a ref

Here is a component I've been working on: export const DeviceModule = (props: Props) => { const [isTooltipVisible, changeTooltipVisibility] = useState(false) const deviceRef = useRef(null) useEffect(() => { if (deviceRef && dev ...

Exploring the distinctions between types and classes through type hinting

It seems that I am facing some challenges with this task and the reason is unclear to me switch (typeof request) { case 'EnrollmentRequest': The type '"EnrollmentRequest"' cannot be compared to the type '"string" | "number" | ...

Tips on launching a bootstrap modal by clicking a button in an Angular project

I'm working with a Bootstrap Modal that includes a button to trigger it. Here is the code: <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data- ...

Discovering the world of Promises in TypeScript and understanding how to return specific types

Transitioning from coding in Clojure for the past two years to TypeScript has been an interesting journey. However, I've hit a bit of a roadblock today. The issue lies with my interface: interface ICustomer { id: number, first_name: string } I ...

A guide on selecting the best UI container based on API data in React using TypeScript

I have been developing a control panel that showcases various videos and posts sourced from an API. One div displays video posts with thumbnails and text, while another shows text-based posts. Below is the code for both: <div className=""> &l ...

Handling events in React using TypeScript

Currently diving into the world of React with Typescript and encountered a challenge involving event handling using the onClick property. I have a react component displaying a list of items from an array, and I aim to log the clicked item in the console. I ...

Tips for resolving Typescript type error when overriding MuiContainer classes

My application is divided into two main files: (https://codesandbox.io/s/react-ts-muicontainer-override-yywh2) //index.tsx import * as React from "react"; import { render } from "react-dom"; import { MuiThemeProvider } from "@material-ui/core/styles"; imp ...

The user callback for @firebase/database encountered an exception. TypeError: Unable to access property 'myID' as it is undefined

After deploying my app to Firebase hosting, some users are encountering this error: @firebase/database: FIREBASE WARNING: Exception was thrown by user callback. TypeError: Cannot read property 'myID' of undefined screenshot Despite not havin ...

Updating the date format of [(ngModel)] with the ngx-datepicker library

One of the challenges I'm facing is dealing with a web form that captures date of birth. To accomplish this, I'm utilizing the ngx-bootstrap version 2.0.2 datepicker module. The issue I encounter lies in the fact that my API only accepts date val ...

encountering issues while trying to set up an Angular project

I encountered an issue in my Mac's terminal while trying to create a new Angular project. Here is the command I entered in the terminal: ng new ProjectName The error message I received: npm WARN deprecated <a href="/cdn-cgi/l/email-protection ...

What is the best way to click on a particular button without activating every button on the page?

Struggling to create buttons labeled Add and Remove, as all the other buttons get triggered when I click on one. Here's the code snippet in question: function MyFruits() { const fruitsArray = [ 'banana', 'banana', & ...

Stop automatic scrolling when the keyboard is visible in Angular

I have created a survey form where the user's name appears on top in mobile view. However, I am facing an issue with auto scroll when the keyboard pops up. I want to disable this feature to improve the user experience. <input (click)="onFocusI ...