I am trying to use React Router from within react.rb. I started using the reactor-router Gem, but the Gem only works with React Router < 1 and I am using React Router 2.4.0 and the API is quite different.
Over the last weeks I have taken a few approaches to getting this working but none of the approaches have been correct, each having their own fault.
Please will someone steer me in the right direction as I am all out of options.
In terms of setup, I am using Webpack to require React and React Router so the application.js which is injected by Webpack looks like this:
React = require('react')
ReactDOM = require('react-dom')
_reactRouter = require('react-router')
Approach 1 - create the Router as native JS and call ReactDOM.render to render the router when rendering a top level component
before_mount do
#admin_members = React::API::create_native_react_class(Components::Company::AdminMember)
#squad_index = React::API::create_native_react_class(Components::Squad::Index)
#squad_show = React::API::create_native_react_class(Components::Squad::Show)
#tribe_index = React::API::create_native_react_class(Components::Tribe::Index)
#tribe_show = React::API::create_native_react_class(Components::Tribe::Show)
end
and then rendering the router to a div in after_mount:
after_mount do
`ReactDOM.render(React.createElement(
_reactRouter.Router,
{ history: _reactRouter.browserHistory },
React.createElement(_reactRouter.Route, { path: "admin/members", component: #{#admin_members} }),
React.createElement(_reactRouter.Route, { path: "/squads", component: #{#squad_index} }),
React.createElement(_reactRouter.Route, { path: "/squads/:squad_id", component: #{#squad_show} }),
React.createElement(_reactRouter.Route, { path: "/tribes", component: #{#tribe_index} }),
React.createElement(_reactRouter.Route, { path: "/tribes/:tribe_id", component: #{#tribe_show} })
), document.getElementById('bh_router_div')
);`
end
This approach, although not pretty, seems to work in that the Router is created and functions as expected. A URL or /tribe/22 will load the correct TribeShow component and will pass the correct ID to the component.
The problem I have with this approach is when it comes to creating a Link as the Link component does not share the same context as the router. I believe this is down to ReactDOM.render being called once by react-rb and then once again in the code above. This creates two root components on the page (TopLevelRailsComponent) and (ReactRouter).
The Link is created thus:
class MyRouter < React::NativeLibrary
imports '_reactRouter'
end
And then used in a components render method like this:
MyRouter.Link({to: "/admin/members"}) { "and here is the link"}
The link is rendered, but clicking on it gives the following warning and does not navigate to the component:
Uncaught TypeError: Cannot read property 'push' of undefined
Looking at the properties of the Link Component I see that context is null and I believe this is why. It seems the Link is being being drawn outside the context of the router.
Approach 2 - use the react-rb API to render the router so that ReactDOM.render is not being called twice on the page
This seems to be a better approach but so far I have not managed to get this to work properly.
Building on how I create the Link above, in the render method of a component:
MyRouter.Router({history: `_reactRouter.browserHistory` },
MyRouter.Route({ path: "/admin/members", component: #admin_members})
) {}
But I get the following warning and the page does not render:
Uncaught Invariant Violation: <Route> elements are for router configuration only and should not be rendered
Approach 3 - build the Route component in native JS so that it does not get rendered:
`var AppRoutes = React.createElement(_reactRouter.Route, { path: "/admin/members", component: #{#admin_members} });`
MyRouter.Router({history: `_reactRouter.browserHistory` },
`AppRoutes`
) {}
This gets past the previous error, BUT the router does not actually route and I get the following warning (and the component does not render):
Warning: [react-router] Location "/admin/members" did not match any routes
history: As a side note, in both the examples above, I have tried to set history as such:
MyRouter.Router({history: MyRouter.browserHistroy },
`AppRoutes`
) {}
But I get a warning about providing a depreciated history and when I check the value it is null. Using _reactRouter.browserHistorygets past this warning. I am not sure if this is relevant to this fact that the router is not routing or not.
I would really appreciate any help or steer on this. Even a steer as to which of the approaches is the correct and and any hints as to how to proceed would be very welcome indeed.
This has been addressed in the V2.4.0 branch of reactrb-router https://github.com/reactrb/reactrb-router/tree/v2-4-0
Also please note the new DSL
Related
So I'm trying to programmatically answer phone calls (on Android 10) in React Native. I tried using react-native-callkeep but it seems that I can't figure out the documentation. Here's my code using the package:
// Listening on call state changes
this.listener = EventRegister.addEventListener(
CallManager.listenerName,
type => {
switch (type) {
case CallManager.eventNames.Incoming:
self.setState({
isCurrentlyBeingCalled: true,
});
CallKeep.answerIncomingCall(); // This won't work
break;
}
},
);
The documentation tells me to pass a uuid - but what uuid??? I tried using random uuids but that doesn't work either.
Does someone maybe know another better package to simply answer phone calls in React Native?
If you look towards the lower end of the documentation, you will see the "Events" section. There you can register listeners which'll give you the callUUID so you can pass it into your method.
import RNCallKeep from 'react-native-callkeep';
RNCallKeep.addEventListener('didReceiveStartCallAction', ({ handle, callUUID, name }) => {
console.log(`Received Start Call Event - Name: ${name}, Uuid: #{callUUID}`;
RNCallKeep.answerIncomingCall(callUUID);
});
I haven't tested this, just what i compiled from the documentation, but try it out.
I have an Angular 7 application, running .Net Core on the back end.
I have the following routes defined:
const routes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'login', component: LoginComponent },
{ path: 'about', component: AboutComponent },
{ path: '**', redirectTo: 'home' }
];
In Visual Studio 2019, this is running at https://localhost:44358.
All works as expected.
But now I want to get metadata for a SAML implementation using sustainsys.saml2.aspnetcore2.
To get the metadata file, I try to enter https://localhost:44358/Saml2/ in my browser.
As expected, because the path does not match anything defined, the default route takes over and I am routed to the home page.
I removed the final path, so I no longer had any default routing for unmatched paths, and then it worked fine to get the metadata.
My question is: Is there any way to redirect to 'home' for all unmatched paths except some configured path (or paths), which would just be ignored as if the default route were not present?
Rather add a path to your base-href in index.html (e.g. <base href="/app/"/>) so that the Angular Router won't pick up paths on your root, then you'll be able to keep your wildcard redirect as is and /Saml2/ won't be intercepted.
Of course, if the app is already in production and you need to preserve URLs, you might not be in a position to make this kind of change.
I am very new to Angular and running into an issue while trying to get a local .json file via http.get. This is due to my routing rules but I'm not sure how to fix it.
Directory Structure:
api
mockAppointments.json
app
app.component.*
scheduler
scheduler.component.*
scheduler.component.ts where http.get() call is made:
getAppointments() {
return this.http
.get('api/mockAppointments.json')
.map((response : Response) => <Appointment[]>response.json().data)
.catch(this.handleError);
}
Routing rules:
const appRoutes: Routes = [
{
path: 'scheduler',
component: SchedulerComponent
},
{
path: '',
redirectTo: '/scheduler',
pathMatch: 'full'
}
];
As I browse to http://localhost:4200/scheduler, the page loads as expected but dev console has the error:
GET http://localhost:4200/api/mockAppointments.json 404 (Not Found)
When I try to get to that URL by typing it in the browser, I see the following in dev console:
ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL
Segment: 'api/mockAppointments.json'
So it's clear that the issue is with routing. For now I need all URLs redirected to /scheduler (which is happening). When I make a http.get('api/mockAppointments.json') call, it should just serve that as is, almost like a pass through. Everything I have looked at, I would need a component to go along with any routing rule. That is fine, but there wouldn't be a template associated with it.
I have tried putting the api folder under assets but it made no difference.
Eventually the api call would be external to the app so this wouldn't be an issue but how do I get it working during development?
TLDR: Is it possible to have a 'pass through' route which serves a JSON file as is via http.get() ?
copy your api folder into assets folder. Angular can only access files from assets folder.
getAppointments() {
return this.http
.get('assets/api/mockAppointments.json')
.map((response : Response) => <Appointment[]>response.json().data)
.catch(this.handleError);
}
Here is a screenshot from their docs about <Link> component
What state do they mean? A Redux state?
How does it look like to pass a state? Like this?
pathname: '/foo',
query: {
x: this.props.x,
},
state: store.getState()
It's a piece of information that you'd like to send to the next page. Nothing to do with Redux. It's a plain object. I believe Flipkart is a very nice example of how it can be used to improve user experience:
Go to a Flipkart search page on a mobile device (or simulate one using Chrome DevTools)
Tap on one of the items
You'll see that the transition happens instantly and pieces of information like product images, title, rating and price are readily available on the product page. One way to implement that is passing the state they had already loaded on the search page onto the next one:
<Link
to={`/product/${id}`}
state={{
product,
}}
/>
And then:
function ProductPage(props) {
// Always check because state is empty on first visit
if (props.location.state.product) {
console.log(props.location.state.product);
// { id: '...', images: [...], price: { ... } }
}
}
There are two ways to pass data from one route to another via Link.
URL Parameter.
As state.
URL parameter help when the route params contain strings for example we want to route to a particular profile:
<Link to='/azheraleem'>Visit Profile</Link>
However, the later i.e. the state helps us pass data from one route to another which is complex data structure. (objects/arrays).
As per the react router documentation, in case of passing data from one route to another it can be done as per the below code sample:
<Link
to={{
pathname: "/profile",
search: "?name=azheraleem",
state: { fromDashboard: true }
}}
/>
The pathname is the link to the route while the search attribute contains the query string parameters, thus the on clicking the link the URL will form something like:
http://localhost:3000/profile?name=azheraleem.
But the state variable value can be accessed in the called route using the useLocation hook:
import { useLocation } from "react-router";
const profile() => {
let data = useLocation();
console.log(data.state.fromDashboard);
}
The the state property of the to prop is the param of pushState method of History DOM object described here
That props used in push/replace methods of router as described here for transitions to a new URL, adding a new entry in the browser history like this:
router.push('/users/12')
// or with a location descriptor object
router.push({
pathname: '/users/12',
query: { modal: true },
state: { fromDashboard: true }
})
It also mentioned here:
router.push(path)
router.push({ pathname, query, state }) // new "location descriptor"
router.replace(path)
router.replace({ pathname, query, state }) // new "location descriptor"
state is a property that's part of the object you can provide to the to prop of the <Link> component.
It is particularly useful if you want to send data from the current view to one the <Link> directs you to, without using common techniques such as setting URL parameters or using libraries, such as Redux.
There isn't much official information about the state key, but here's what I found in the source code of that component:
Links may pass along location state and/or query string parameters
in the state/query props, respectively.
So basically, it's like sending props to a component from a parent. Here, you are sending "state" from the current view to the target view. That's about it, really.
In simple term state in <Link/> component is use to pass information from one view to other view through router in form of object.On other page it can be access using prop.location.state.
(Note: on browser refresh state no longer contain information)
To pass state in Link:
<Link to={{pathname: "/second_page", state: {id: 123}}} />
To access id in second page view:
let id = props.location.state.id;
For more Link properties : React Router Link
I'm learning both CoffeeScript and Backbone JS. I want to load just one piece of equipment. Yes, I know I don't need Backbone JS for this - But it helps me to learn if I start with basics. As soon as the page loads, I want it to grab some JSON from the server, and display it on the page.
Here is my coffeescript so far:
jQuery ->
class Equipment extends Backbone.Model
defaults:
title:''
desc:''
url:'/getData'
class ItemView extends Backbone.View
tagName: 'div'
initialize: ->
_.bindAll #, 'render'
render: ->
$(#el).html """
<h1>#{#model.get 'title'}</h2>
<p>#{#model.get 'desc'}</p>
"""
#
class AppRouter extends Backbone.Router.extend
routes:
'':'getData'
getData: ->
#equipment = new #Equipment()
#equipmentView = new #ItemView
model: #equipment
#equipment.fetch()
$('div').html #equipmentView.render().el
appRouter = new AppRouter
Backbone.history.start()
I feel like I have all the pieces in place, and am getting no errors (either in compilation or running the page).
The basic JSON I expect back from the server is just a PHP page echoing this:
{
"title": "title",
"desc": "description"
}
What am I missing?
Does #equipment.fetch() even trigger a HTTP request?
To my understanding you must set the id: #equipment = new #Equipment(id:123) which would trigger a "/getData/123" request.
or specify the url in the fetch: #equipment.fetch(url:"/getData") to load
But then the view would still be empty, because the data isn't yet loaded when the View render() is executed. Backbone doesn't automatically update views when models change (Like EmberJS does).
Add #listenTo(#model, "change", #render) to the initialize method to re-render when the model changes.
I found a nice guide/tutorial for you
http://adamjspooner.github.com/coffeescript-meet-backbonejs/
You have to tell Backbone to route your initial url ('') like this :
Backbone.history.start pushState: true
You also should pass an id (I think Backbone will request /getData/undefined in your case and on a side note I think you should use coffee's fat arrows instead of bindAll (it's one of the many great thing about coffeescript, but then you should get rid of some of the #s because they won't refer to window anymore...