Retrieving the route parameter in Next 9 when loading a page directly? - reactjs

I'm trying the get the route parameter in Next 9 and all the examples in the docs make sense and work. Here https://nextjs.org/learn/basics/clean-urls-with-dynamic-routing/dynamic-routing and here https://nextjs.org/docs#imperatively
My problem is that these examples are all in the context of navigating to a page from a link, I would like to load the page directly from the url.
If I go to localhost:3000/meeting/123 it loads the index page, not teh page nested in the meetings folder.
The query parameter shows the 'asPath' key with eth value 'meeting/123' so its all working but it doesn't actually use the code at pages/meeting/[meetingId].js
How do I load a dynamic route directly from the url?

For anyone else reading this, this works absolutely fine, false alarm, I just forgot to remove my customer server setup that I had for this previously. To do this prior to next 9 you had to set up a custom server and startup using the server. I set everything up for version 9 but was still starting up in teh custom server. Leaving this up here in case anyone else makes teh same mistake.

Related

Sanity/next slug- 404 not found

When I try to access my slug page, the name of the slug shows in the browser search bar (so I know its accessing the backend data), but nothing shows up on the page. In the console, error 404 keeps coming every 3 seconds.
Due to lack of timing, experience, knowledge, etc., I've had to switch from react to next very last minute (learning both for the first time at the moment). In react, I remember you could establish a path/page that went '/pageName/:slug', but I haven't seen that for next. I think this might be what is causing the issue, that I don't have an equivalent of that, but I'm not sure how to go about doing that. How do I fix this issue?
I'm happy to post any code if needed.
Got it. I hadn't given much context in the post, but I had two .js page files, gallery.js (where I can select a set), and sets.js where I wanted the slug to route into. So my link in gallery.js looked like this: <a href="./sets/[slug]">.
The fix: I renamed sets.js to [slug].js, and removed /sets/ so that it was just <a href="./[slug]">.

ReactJS - first entry point

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.

Custom webform-mail template in Drupal 7 does not work

I'm trying to customise the webform email template for a specific webform following the steps in THEMING.txt, but those changes aren't being reflected in the form's default email template. I may have made a mistake in multiple places so I'm going to walk through my steps and hopefully someone will be able to spot what I did wrong :)
1) I copied the webform-mail.tpl.php template from /sites/all/modules/webform/templates directory over into the /themes/mytheme/ directory. Is that the correct place to drop it?
2) To test it, I simply changed some of the text. So I just changed 'Submitted on %date' to 'Entered on %date'.
3) I then renamed the page to webform-mail-1226.tpl.php, where 1226 is the number I see in the url when I go to edit the webform.
4) Then I tried to clear the cache, but I think this is the step I did wrong. The THEMING.txt file says to visit admin/settings/performance, but that path doesn't seem to work/exist for me. What I tried instead was admin/config/development/performance/ and then cleared the cache with the options here. Am I supposed to go somewhere else to clear a different cache?
5) I then went to the emails section corresponding to this form, and when I either go to an existing email or create a new one, the default email template does not reflect the changes I tried to implement.
Does anyone have any ideas why this isn't working? Thanks for your time and help :)
Here is checklist you need to verify:
1) Your Step 1 is okay nothing to worry.
2) If it is reflecting the change then it means default webform email template file is working fine.
3)* Here you need to verify node-id you used in filename. www.yoursite.com/node/xxx/webform, xxx = 1226 in the filename.
4) The Drupal 7 - Clear cache correct URL is admin/config/development/performance.
5)* Here you need to check in webform email setting you have to select "Default template".
Try selecting "Default template" the clear Drupal cache and then test.
Helpful link.

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.

adding controller later

I'm trying to create an NG app where parts can be enabled/disabled dynamically. The idea is to have an "admin" page, where parts of the app can be enabled or disabled, and then see new functionality appear, in the form of an adjusted menu at the top of the page, and matching routes, controllers, etc loaded into the app (I'm using SocketStream w/ NG).
The first step was to add / remove routes dynamically, for which I found a solution at https://stackoverflow.com/a/13173667 - working well, as far as I can tell.
Next, adding items to the menu bar - easy with ng-repeat on ul/li items.
So the app adjusts its menu and recognizes the corresponding route. So far so good.
The problem comes with registering a controller. I'm calling myApp.controller('SandboxCtrl',[...]) with proper args (same as what worked when initialising statically on startup), but the controller does not appear to get loaded or inited properly. Navigating to the newly added route generates errors such as:
Error: Argument 'SandboxCtrl' is not a function, got undefined
assertArg#http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.js:973
assertArgFn#http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.js:984
#http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.js:4638
update#http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.js:14007
$broadcast#http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.js:8098
#http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.js:7258
wrappedCallback#http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.js:6658
wrappedCallback#http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.js:6658
#http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.js:6695
$eval#http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.js:7848
$digest#http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.js:7713
$apply#http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.js:7934
#http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.js:5433
I'm currently at a loss on how to proceed. I've not been able to find a solution on the web. The app is too large to put in a jsFiddle, but I can commit the last changes on GitHub if needed.
Questions: is this feasible? what can I do to debug this? any examples I could look at?
EDIT: The code is now at https://github.com/jcw/housemon (needs node/npm/redis). It's easy to reproduce the problem: launch with "npm start", browse to localhost:3333, go to admin tab, click on "jcw-sandbox" and then "Install". Top menu will update with new a "Sandbox" entry. Clicking on that entry generates the error shown above.
Oh, almost forgot: relevant code is in client/code/app/main.coffee and client/code/modules/routes.coffee ...
The answer turns out to be two-fold:
the NG calls were made from SocketStream RPC callbacks, and had to be wrapped in $scope.$apply calls - my bad, didn't know about this SS/NG interaction
the rest of the solution was outlined by #matys84pl - pick up $controllerProvider (and $filterProvider) early on, so they can be called at a later time instead of the normal "app.controller" and "app.filter" members, which don't seem to work anymore later on
Example code in GitHub, I'll link to a specific commit so this answer stays valid:
https://github.com/jcw/housemon/commit/f199ff70e3000dbf57836f0cbcbb3306c31279de

Resources