ReactJS - first entry point - reactjs

I am trying to work out if a visitor is entering / first page they visit is site.com/life
As we need a change a few things like:
CSS
Audio Playing in Background
etc etc.
I am wondering is their a function that allows us to work out if a path was the first entry point for that visitor?
I was thinking we could check to see if their is a back history but not sure if this would work?
Any advice would be great.

If your app is using react-router, you can access the history object and see where the oldest entry is.

Related

Twilio sample react app trying to pass a room name in the URL and put it into a hidden field?

I know this sounds like a big ask, but I'm assuming someone else has already done this and has a simple answer because it seems like an obvious use case.
Twilio has a sample app available on GitHub for their video service. Unfortunately, I don't know much about react, so I was able to make a couple of little changes, but this one has me stumped.
The code is called: Twilio / twilio-video-app-react
https://github.com/twilio/twilio-video-app-react
When you launch the code to enter a video room, you are presented with a form to enter your name and the name of a video room. I need to remove that room name input field and replace it with a hidden variable that was provided in the URL. In other words:
Get a room name variable that was passed as a query parameter on the URL
Make sure the room name is "safe" (alphanumeric) and then put it into a hidden variable in the form
Remove the visible input field (room name) from the form
That would take me two minutes in PHP, and it's probably really easy in react as well, but I can't figure it out. Hope someone can point me in the right direction.

Adding Segment telemtry to React component that is only one DOM node

I'm looking to add segment analytics to my JupyterLab extension. No worries if you've never heard of a JupyterLab extension - the best way to think about it: I get control over a single node in the DOM where I can place some HTML, so I'm doing the following:
function Welcome(props) {return <h1>Hello</h1>;}
ReactDOM.render(<Welcome/>, dom_element_i_control)
This all works fine - I'm now looking to add some analytics code to this. For example, I'd like to be able to:
See when my code is rendered
See when someone interacts with my rendered element (e.g. if there was a button in the Welcome function, when the user clicked on it).
However, segment is a JS library that is delivered as a script that you load into a webpage at the top in a string tag like:
<script>
!function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&...}}();
</script>
Where would I even put this code? I don't have control over the larger page + HTML, so I'm not sure where I can slap this so I can start using analytics.
Thanks for any information!
My workaround:
Instead of using the above linked segment script, I used the analytics-node package from segment.
I create an Analytics object right before ReactDOM.render - and then can use it wherever I want :)
Note that this will not work for anyone who uses an add blocker, obviously!

Scrolling website with angular: states/routing setup

I can't seem to wrap my head around a routing setup for a project I'm working on at the moment. I tried ngRoute, angular-sement-router, now trying ui-router, however I'm still struggling to understand how to use them in my scenario.
I've attached an image to illustrate the kind of a thing I want to achieve. Basically, I need to have two types of pages — one type is a multi-section scrolling page. Another one is just a plain page with text and images.
The multi-section one should scroll to a certain section according to a current route. Each section has a set of subsections. So the route like
#!/section-2/subsection-2
should make the app scroll to Section-2 (smooth scrolling is not an issue at the moment) and activate Subsection 2.
I tried using named ui-views, but then I have to have an initial state of each named ui-view on my route state. It leads to another problem. If let's say I would navigate to
#!/section-1/subsection-1
my Section 1 subsection will return to whatever is set in the initial state.
Another issue is that my setup should separate Sections 1-4 from Section 5 which is a separate page.
I hope my description makes sense. Would love to here any advice on what I can read or where can I find some useful ideas. Thanks in advance.

Implementing basic next/previous picture

I'm trying to convert the Adjuster example mentioned here: http://agiletoolkit.org/learn/understand/view/interactive
into a View that is able to show me the next/previous picture of a list of given images.
I guess the number in the example could be an index into an array of pictures.
I'm just not sure how to provide the list of pictures, when all the code is put in init() for the View, so no way to give it the picturelist before that...
Should I use memorize/recall for this list also to prevent it getting lost upon reload ?
is there another example that might help me?
I think you what you are doing can be much easier done with a classic JavaScript Lightbox script. You would supply it list of images and it would show one full-screen.
If not, you can use this:
https://gist.github.com/romaninsh/7217119
This will give you slides similar to the ones on http://agiletech.ie/
Be advised that this code is a little old.

Reverse Routing Slug-Based URL in CakePHP

(I know there's a couple of other reverse-routing-slugs questions on this site, but I'm not having much luck relating the answers to my particular issue, so I'll ask my more specific question...)
I am building a site whose URLs now need to be slug-based, i.e. what was initially news/item/1 now has to have the URL news/firstnewsitem. And so on for a number of other controllers. I can easily get these addresses to work, and maybe even not stomp on my existing utility actions, with something like:
Router::connect('/:controller/:slug',
array('action'=>'item'),
array('pass'=>array('slug'), 'slug'=>'[^(index|add|edit|view|delete)]')
);
However, the reverse routing of these new links seems to be a non-starter: Cake is still generating such links as news/item/3. It seems optimistic to hope that a slug-based URL would automagically happen, but is there any array that I can pass in my Html->link parameters that will create the :controller/:slug format I'm looking for? Or do I have to cut my losses and back away from reverse routing at this point?
There's a pretty decent plugin for handling slug-based routing here:
https://github.com/jeremyharris/slugger
If you used this, you would be able to create links something like this
$html->link("some item", array(
'controller'=>'items',
'action'=>'view',
'Item'=>$item['id']
));
and that would output a link to /items/view/slug-for-your-item

Resources