Problem with iFrame in React rendering another app (flutter app) - javascript

I have a React app that is using an iFrame to render another app that was made in flutter (see the first image):
The flutter app is hosted in a certain domain (so it's like a micro frontend). The app in React is the dashboard and is hosted somewhere else (different than the flutter app)
My problem is that when testing the flutter app directly in the hosted URL, it works as expected. When you click on the name of one person, a sidebar opens with some information and a button "Gestion oferta".
When you click on the button, it should take you to this other view:
So this works as expected if I test the flutter app directly in the URL where it is hosted, but when I click on that button inside the react dashboard, it does not behave as expected, it just shows another instance of the same react app (dashboard) inside the iFrame, like this:
Here is my code for this component in the react app that renders the iFrame, in which I call the URL for the flutter app:
import { Fragment } from "react";
import { css } from '#emotion/react'
import Head from "next/head";
import DashboardLayout from "../../../layouts/DashboardLayout";
import { getTenantByCompanySiap } from "../../../helpers/tentant";
import { UAT, PROD, getEnv } from "../../../helpers/env";
export { getSSProps as getServerSideProps } from '../../../lib/Page'
export default function NuevaSolicitudPage(props) {
const tenant = getTenantByCompanySiap(props.infoRh?.codeCompanySIAP)
const branch = props.infoRh?.codeBranch
const user = props.employeeData?.email
const getCampanas = () => {
const env = getEnv();
const url = {
[UAT]: `https://url-for-testing`,
[PROD]: `https://other-url-for-production`
};
return url[env] || url[UAT];
};
const url = getCampanas()
return (
<Fragment>
<Head>
<title>Gestión de cartera | Campañas</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<DashboardLayout
{...props}
title="Campanas"
>
<iframe
src={url}
css={css`
width: 100%;
height: 100%;
`}
frameBorder="0"
/>
</DashboardLayout>
</Fragment>
);
}
I do not have access to the flutter app code, I only consume it and show it in the iFrame, but I heard from someone that I need to configure some files in order to display flutter apps in an iFrame in react, but he is also not sure. I have searched for something like this but could not find anything relevant to this problem because the app is showing, it just does not behave as expected.
Can somebody give me an advice on how to solve this issue? Thanks in advance.

This issue had to do with the cookies, somehow the cookie to store the user session got lost/erased, so whenever you have something similar and you use cookies for user sessions, check if they are stored and used properly.

Related

How to retrieve some data from API and use it in all the pages of a NexJS application before rendering on client side?

I have a NextJS application where I have a home page (index.js) and two other pages About(about.js) & Contact Us(contact.js).
I have created a BaseLayour.js file with is wrapping NextJS's MyApp component in _app.js file.
import React from "react";
import BaseLayout from "../layouts/BaseLayout";
function MyApp(props) {
const { Component, pageProps } = props;
return (
<BaseLayout>
<Component {...pageProps} />
</BaseLayout>
);
}
export default MyApp;
This BaseLayout component looks like this -
import React from "react";
import SEO from "../components/SEO";
import Header from "../components/Header";
import Footer from "../components/Footer";
function BaseLayout(props) {
const { children } = props;
return (
<div>
<SEO />
<Header />
{children}
<Footer />
</div>
);
}
export default BaseLayout;
As you can see above in the BaseLayout file, there is an SEO component (React). It contains some common metadata for all the pages. I have an API(api/getmetadata/) that delivers all the metadata in JSON format.
This metadata is supposed to load on the server-side so that the page will be optimized for SEO.
How can we call the API in order to retrieve the data on each request but only on the server-side?
What I have tried till now -
Tried calling API in the SEO component itself, but it is not running on the server-side as it is just a React component.
Tried creating a React context, and called the API from SEO/BaseLayout components, the API call is still not being made from the server-side.
Tried using getServerSideProps in the index.js page to call the API and retrieve the data, which worked perfectly, but the problem is we need to share the data between all the pages, not just the index.js home page.
Any help will be appreciated, If we can somehow make the API call and retrieve the data in the SEO component, it will solve our problem.
Thank you in advance guys.

Svelte Sapper detecting route change

I have an app written in svelte with sapper, where I have several routes created in a Next/Sapper way as separate files in routes folder. How can I detect the route change and where, I need to close navigation on mobile after user selects the route, however nothing is logged to the console unless page is refreshed.
<script>
import CartWidget from '../shared/CartWidget.svelte'
import { onMount } from 'svelte'
onMount(() => {
let path = window.location.pathname
console.log(path)
})
export let segment = '';
</script>
Thanks for advices

What is the best way to get shopOrigin from within Shopify react app?

Overview:
I am using Shopify's CLI to generate an embedded React app. I would like to be able to get the shopOrigin (see code below) from other pages within the application.
Problem:
I have attempted using store-js to store the shopOrigin. This works at first but it seems to clear when I navigate to any other pages within the application.
Note:
Since it is set properly in _app.js I feel that I should simply be able to get the shopOrigin further downstream (i.e. in my index page or any other page) without having to set it in storage.
So, I am completely open to obtaining the shopOrigin a different way without storing it via store-js or any other storage mechanism.
Nonetheless, here is my current code.
Code:
// _app.js
import store from "store-js";
// other imports
class MyApp extends App {
render() {
const { Component, pageProps, shopOrigin } = this.props;
store.set("shopUrl", shopOrigin);
return (
<AppProvider i18n={translations}>
<Provider
config={{
apiKey: API_KEY,
shopOrigin: shopOrigin,
forceRedirect: true,
}}
>
<ClientRouter />
<MyProvider Component={Component} {...pageProps} />
</Provider>
</AppProvider>
);
}
}
// index.js
import store from "store-js";
// other imports
function Index(props) {
console.log("SHOP URL IS HERE: " + store.get("shopUrl"));
}

Opening DeepLinks which are not specified in Routes in react-native

If i consider an example
https://app.abc.com/login
this opens login page in my app. But if the link is like
https://app.abc.com/loginUser //This link is a route in web app
this doesn't open the login page in App because the Path is not defined in routes
Now the requirement is, whenever a user clicks on Second link, even then it should open login component in App and not in web. ie. multiple routes for same component, or can i open a generic component for such routes? Can we achieve this in React-Native?
This was pretty simple, just had to explore documentation of React-Navigation
import { NavigationActions } from 'react-navigation'
const previousGetActionForPathAndParams = MyAPP.router.getActionForPathAndParams;
Object.assign(MyApp.router, {
getActionForPathAndParams(path) {
console.log("path in navigation", path)
if (
path === 'loginUser'
) {
// returns a profile navigate action for /my/custom/path
return NavigationActions.navigate({
routeName: 'Login',
});
}
// else {
// console.log("you have landed in an unknown space")
// }
return previousGetActionForPathAndParams(path);
},
});
Insert this code in your navigation file and you are good to go with React-Navigation
In previous versions, we could do that by giving multiple paths to a specific component as per here
Thanks to #DoğancanArabacı for a valuable comment, that once used to be a handy solution

App does not render when using browserHistory instead of hashHistory in React Router

I am using React Router in my current project:
const store = Redux.createStore(bomlerApp);
const App = React.createClass({
render() {
return (
React.createElement('div', null,
this.props.children
)
)
}
})
var rootElement =
React.createElement(ReactRedux.Provider, {store: store},
React.createElement(ReactRouter.Router, {history: ReactRouter.browserHistory},
React.createElement(ReactRouter.Route, { path: '/', component: App },
React.createElement(ReactRouter.IndexRoute, { component: Home })
)
)
)
ReactDOM.render(rootElement, document.getElementById('react-app'));
This does not work. The app does not render at all and I don't get any error messages.
However, if I use ReactRouter.hashHistory instead, the app works.
What am I not understanding here?
Server Configuration: the browser history setup can generate real
looking urLs without reloading the page. But what happens if the user
refreshes or bookmarks on a deep nested urL? these urLs are
dynamically generated at the browser; they do not correspond to real
paths on the server, and since any urL will always hit the server on
the first request, it will likely return a page not Found error.
To implement the browser history setup, you need to import the
createBrowserHistory method from the History library. You can then
invoke it, passing the generated browser history configuration as the
history prop of the Router component
***> to work with browser history setup, you need to make rewrite
configurations on your server, so when the user hits /some-path on the
browser, the server will serve index page from where react router will
render the right view.***

Categories