React Lazy Loading Routes with Page Transitions

See also questions close to this topic

• Getting an error while trying to interact with a server using socket io with node js and a react frontend

  I am getting this error on the frontend.

  Access to XMLHttpRequest at 'http://localhost:6969/socket.io/?EIO=4&transport=polling&t=NWJnNb2' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

  The socket io documentation says that if the server is configured properly then it probably happens because the browser isnt able to reach the Socket.io server and in that case the following command:

  curl "https://api.example.com/socket.io/?EIO=4&transport=polling"
  

  is going to return something similar to this:

  0{"sid":"Lbo5JLzTotvW3g2LAAAA","upgrades":["websocket"],"pingInterval":25000,"pingTimeout":5000}
  

  and it did.(I replaced the https://api.examle.com part with http://localhost:6969 and it returned a similar output in the console)

  But the documentation never explains what to do in case this actually happens and it only says "this could mean that your browser wasn’t able to reach the Socket.IO server." How do I fix it?

  Here is the server code if it helps:

  const express = require('express');
  const app = express();
  const cors = require('cors');
  const socket = require('socket.io');
  
  require('dotenv').config();
  app.use(cors({ origin: '*' }));
  
  const server = app.listen(process.env.PORT, (): void => {
    console.log('Server listening on port ' + process.env.PORT);
  });
  
  const io = socket(server);
  
  io.on('connection', (s: any) => {
    s.on('join', (data: any) => {
      console.log(data);
    });
    s.on('disc', (data: any) => {
      console.log(data);
    });
  });
  

  And here is the frontend React code:

  import React, { useState, useEffect } from 'react';
  import io from 'socket.io-client';
  
  const App = () => {
    // let socket;
    const PORT = 'http://localhost:6969/';
    const [state, setState] = useState({
      username: '',
      room: '',
    });
  
    const [socket, setSocket] = useState('');
  
    useEffect(() => {
      setSocket(io('http://localhost:6969', { transport: ['websocket'] }));
    }, [PORT]);
  
    const handleChange = (e) => {
      setState((prev) => {
        return {
          ...prev,
          [e.target.name]: e.target.value,
        };
      });
    };
  
    const Join = (e) => {
      socket.emit('join', state.room);
      console.log(socket);
    };
  
    return (
      <div>
        <input name='username' type='text' onChange={handleChange} />
        <input name='room' type='text' onChange={handleChange} />
        <button onClick={Join}>Join </button>
      </div>
    );
  };
  
  export default App;
  
• mobx react lite migration 'this' is undefined when callback function is called

  I've migrated to react mobx lite, but although I've a solution I don't understand the error below.

  I get "this is undefined", when a callback method is called via rootStore.view.openWithCallback. To fix it I have to bind the store but not sure this is supposed to be fixed like that. (On mobx-react -not lite- this was working fine)

  // index.js
  const rootStore = new RootStore(locale)
  const StoreContext = React.createContext(rootStore);
  export const useStores = () => React.useContext(StoreContext);
  export const StoreProvider = ({children, rootStore}) => {
    return (
        <StoreContext.Provider value={rootStore}>{children}</StoreContext.Provider>
    );
  };
  
  
  ReactDOM.render(
        <StoreProvider rootStore={rootStore}>
        <App />
        </StoreProvider>,
      document.getElementById('root')
  );
  
  
  const routes = [
    { path: '/', action: () => rootStore.view.openWithCallback("/", rootStore.view.noop, true, true) }, 
    { path: '/account', action: () => rootStore.view.openWithCallback("/account", rootStore.user.getAddresses) },...]
  const router = new UniversalRouter(routes)
  router.resolve(window.location.pathname)
  

  rootStore.user.getAddresses is the callback. if I change it to rootStore.user.getAddresses.bind(rootStore.user) it works, but is there a more elegant way to achieve the same thing?

  below more code to help understand what I could be doing wrong. thanks!

  // from ViewStore (RootStore->ViewStore)
  @action.bound
      async openWithCallback(page, callback, initCat = true, awaitRequested = false) {
  
          this.loading = true
          this.page = page
          if (awaitRequested) {
              await this.init(initCat)
          } else {
              this.init(initCat)
          }
  
          await callback() // CALLBACK FOR rootStore.user.getAddresses
         
          runInAction(() => {
              this.loading = false
          })
          this.ga(this.page) //google analytics
      }
  
  // from RootStore
  export default class RootStore {
      view
      user,...
     
      constructor(browserLocale) {
          makeAutoObservable(this)
          this.user = new UserStore(this)
          this.view = new ViewStore(this)
  
• google-map-react: Map is too zoomed in at 0 zoom

  I am using google-map-react to add maps to the bottom corner of my React website. However, even when I the map a zoom of 0, the map is pretty zoomed in.

  Here is a picture of what it looks like right now.

  My intention is to be able to see the entire world, or at least a significant portion of it, at the lowest zoom level. On the official Google Maps website, you can see almost the entire world at once.

  Is there a way to recreate this using google-map-react? Please let me know if you need any of the code I'm using. Thank you!

  [Edit] Here is the CSS for the map:

  .map {
    position: absolute;
    bottom: 9vh;
    right: 2vw;
    height: 33vh;
    width: 28%;
    z-index: 10;
  
    opacity: 0.9;
  }
  
• Can't get Error Message for when a user is not found to show up. It goes into infinite loading when searching

  router.post('/dashboard', function (req, res) {
  const { username } = req.body;
  let errors = [];
  
  User.find({ username: username }).exec((err, user) => {
      if (user.length > 0) {
          for (var i = 0; i < user.length; i++) {
              if (user[i].username == username) {
                  errors.push({ msg: 'Username Found! :)' });
                  console.log("Username Found!");
              } 
              if(user[i].username !== username ) {
                  errors.push({ msg: 'Username Not Found.. :(' });
                  return res.redirect('dashboard');
              }
          }
          res.render('searchUser', {
              errors: errors,
              username
          });
      }
  });
  });
  

  I can search for a user that exist in the Mongodb but when I try to type a user that does not exist, it loads forever. I want the error message to pop up and say that the user was not found. Similar to how I have the top if statement. I'm confused on what I am doing wrong as this User.find works with my sign up registration method but not this.
• routing in angular with tabs

  I am trying to get the routing working with angular tabs I have setup and am obviously doing something wrong, if anyone can spot my mistake it would be hugely appreciated!

  The home page with the tabs code is:

  <ion-tabs>
  <ion-tab-bar slot="bottom">
  <ion-tab-button tab="tracker">
    <ion-label>Participation Tracker</ion-label>
    <ion-icon name="analytics-outline"></ion-icon>
  </ion-tab-button>
  <ion-tab-button tab="rota">  
    <ion-label>Volunteer Rota</ion-label>
    <ion-icon name="calendar-number-outline"></ion-icon>
  </ion-tab-button>
  <ion-tab-button tab="qr-scanner">  
    <ion-label>QR-Code Scanner</ion-label>
    <ion-icon name="qr-code-outline"></ion-icon>
  </ion-tab-button>
  </ion-tab-bar>
  </ion-tabs>
  

  my routing is as follows:

  const routes: Routes = [
  {
  path:'tabs',
  component: HomePage,
  children: [{
    path: 'tracker', 
  children: [{
    path: '',
    loadChildren: './tracker/tracker.module#TrackerPageModule'
  }]},
  {
   path: 'rota',
   children: [
     {
       path:'',
       loadChildren:'./volunteer-rota/volunteer-rota.module#VolunteerRotaPage'
     }
   ]
  }
  ]
  },
  {
  path: '',
  redirectTo: '/home/tabs/tracker',
  pathMatch: 'full'
  }
  ]
  
  @NgModule({
  imports: [
  CommonModule,
  FormsModule,
  IonicModule,
  RouterModule.forChild([
    {
      path: '',
      component: HomePage
    }
  ])
  ],
  exports: [RouterModule],
  
  declarations: [HomePage]
  })
  export class HomePageModule {}
  

  I have added the last tab yet, assuming if I can get one to work and redirect from homepage to tracker page or rota page then can copy method to qr-scanner page. Many thanks in advance
• route with parameter express

  I have trouble with route with parameter with express. Routes are working normally when they are with no parameter and does not otherwise. No idea of what I am doing wrong here is the very basic code

  const app=express()
  const listePub=require('./listePublication.json')
  var path=require('path')
      const router=express.Router()
      
       router.get('/blog:id',(req,res)=>{
          const id=parseInt(req.params.id)
        console.log("l'di est "+id)
          const rst=listePub.find(rst=>rst.id===id)
          res.status(200).json(rst)
        })
        router.get('/blog/test/:id', (req,res)=>{
          const id=parseInt(req.params.id)
          res.send("on y est aussi "+id)
        });
        router.get('/blog',(req,res)=>{
          res.send("c'est correcte là")
        })
      
      app.use(router)
      
      //demarage serveur
      app.listen(8080, () => {
        console.log('Serveur à l\'écoute')
      })
  
• Lazy load Eloquent relation with parameter

  I want to lazyload the products with a Laravel Eloquent Entity

  /**
   * This is in my Orders model
   */
  public function product($lang = '') {
      switch ($lang){
          case '':        return $this->belongsTo(ViewProducts::class, 'product_id', 'id');
          case 'en_us':   return $this->belongsTo(ViewProductsEnUs::class, 'product_id', 'id');
      }
  }
  /**
   * This is what works. But its not lazy
   */
  $orders = Oders::where('email','me@me.com')
      ->get();
  
  foreach ($orders as $order){
      $product = $order->products('en_us')->first();
  }
  
  /**
   * This is what I want. Lazyload the product in a different language 'en_us'
   */
  $orders = Oders::where('email','me@me.com')
      ->with('products', // I want to pass the param 'en_us' in any way //)
      ->get();
  

  Anybody out there who knows how to pass a param (in any way) to the Eloquent Entity so I can lazyload my product data?

  I appreciate your help.
• Screen reader doesn't recognize main land mark in Lazy Loading Router Angular 10

  In Lazy-loading, Whenever navigating from Home to TestMonitoringSystem Heading tags or main land mark will be read by NVDA screen reader by calling readMainLandMark()

  Issues are observed when navigating from TestMonitoringSystem to other pages suchas CandidateVerification, CandidateVerification/SecurityCheck, CandidateVerification/Checkin, OnlineProctoring Heading or main land mark will not be read by the screen reader. But whenever reload/refresh occurs screen reader reads the heading tags

  <h1 tabindex="-1">
      {{ResourceKeys.somePathName}} <!-- Same tags are mentioned giving respective names
  </h1>
  
  constructor(private router: Router) {
      this.readMainLandMark();
  }
  
  readMainLandMark() {
      this.router.events.pipe(filter(e => e instanceof NavigationEnd)).subscribe(() => {
          const mainHeaders = document.getElementsByTagName('h1');
          if(mainHeaders.length !== 0) {
              mainHeaders[0].focus();
          }
      });
  }
  

  Here is a coding snippets which will navigation from TestMonitoringSystem to the respective pages

  this._manageSessionService.saveRoutingData(this.routingData).subscribe(response => {
      if (response != null && response.length > 0) {
          this._router.navigate(['/CandidateVerification']);
          this._router.navigate(['/OnlineProctoring']); // Based on the condition & rest of the code remains same
          this._router.navigate(['/CandidateVerification/SecurityCheck']); // Based on the condition & rest of the code remains same
          this._router.navigate(['/OnlineProctoring']); // Based on the condition & rest of the code remains same
      }
  });
  

  Lazy Loading partial snippets

  const appRoutes: Routes = [
      { path: 'TestTrackingSystem', loadChildren: () => import('../Administration/ExamMonitoringSystem/TestMonitoringSystem/test-monitoring-system.module').then(m => m.TestMonitoringSystemModule) },
      { path: 'CandidateVerification', loadChildren: () => import('../Administration/ExamMonitoringSystem/CandidateVerification/candidate-verification.module').then(m => m.CandidateVerificationModule) },
      { path: 'OnlineProctoring', loadChildren: () => import('../Administration/ExamMonitoringSystem/OnlineProctoring/onlineProctoring.module').then(m => m.OnlineProctoringModule) },
      { path: '**', redirectTo: '/CourseCatalog', pathMatch: 'full' }
  ];
  

  To be precise & crystal clear with statement, navigating from Home to TestMonitoringSystem screen readers reads the heading tags or main land mark. But this is not the case when navigating from TestMonitoringSystem to other pages. But reloading/refreshing the all the loaded page screen reader reads the heading tags

  How to accomplish reading of heading tags when navigated through router?
• Call next on iter, selectively on any file handle?

  I have list of files in path, to which i want to create iter objects, so i can read from any file at any time, while all files are being open. Number of files in the path are dynamic.

  filehandles = []
  for filename in glob.glob(path):
      filehandles += [open(filename, 'r')]
  print(filehandles)
  

  The below code throwing compile error, while calling next()

  () missing 1 required positional argument: 'filehandle'

  for filehandle in filehandles:
      fileiters += [iter(lambda filehandle: filehandle.readline(), '')]
  
  print(next(fileiters[2])(filehandles[3]))
  

  If i dont keep any parameter to lambda, it is taking the last filehandle in the loop for all filehandles.

  Can someone help in how do create iter over all the open files and call next selectively?
• Page transition css on button click (right, left, up, down)

  I'm planning a webpage in Wordpress with navigation arrows (buttons) on top, right, bottom and left of the page screen. With clicking on one of the buttons you get to the next page – but with a page transition depending on the button you click on.

  in short: user clicks on "right arrow" = next page slides in from the right // user clicks on "down arrow" = next page slides in from bottom ...

  As the pages can appear in all the directions, the button I click on should give the indication in which direction the page has to slide. How can I achieve that via css?

  Or does it work the other way round? The current page has to slide out right, left, top, bottom on click?

  I found something like this: https://tympanus.net/codrops/2013/05/07/a-collection-of-page-transitions/ But in this case all contents are in one html file. That's not a real page-transition... Thank you
• Flutter Page Transition Package on non-named Route

  With a named route this package works perfectly but have not been able to get it working for route below.

    void _toResultsPage() {
      print('getting to results page');
      Navigator.of(context)
          .push(MaterialPageRoute(builder: (BuildContext context) {
        return Scaffold();
  

  The following is what I would like to have working with this page route but still being able to use the builder instead of creating a named route:

  Navigator.push(
        context,
        PageTransition(
          type: PageTransitionType.bottomToTop,
          child: Scaffold(),
  );