I have a chat area in my app, implemented following mostly https://getstream.io/chat/demos/team/ .
I have a React router that displays the chat at /chat so that I can link to the chat section like this:
<Link to="/chat" />
I'd like to add a link that starts in a particular channel, e.g. <Link to="/chat/general" /> or <Link to="/chat/random" />.
How could I implement this?
I recently implemented something like this using the router in NextJS.
I basically had my main chat page at /chat and then used the router to query the URL param which referenced the channel name. There is then a prop on the ChannelList stream react component customActiveChannel.
So for your chat/general example, you could use something like the following react component:
<ChannelList
filter={yourFilter}
sort={yourSort}
options={yourOptions}
customActiveChannel={ChannelName || ""}
/>
Where ChannelName here is a variable for the channel name general say.
Here are the docs if you want to check more of the props: https://getstream.github.io/stream-chat-react/#!/ChannelList
Related
Hello in react router dom v5 i can get params inside redux. Sample code is below:
1- passing parameter
<Route path="/saveproduct/:productId" component={AddOrUpdateProduct} />
2- get params inside redux. I can get the productId inside ownProps
function mapStateToProps(state, ownProps) {...
But when i call route in v6 i cant get the productId inside ownProps
First, in react-router-dom v6 you should pass component to Route like an element. See docs.
<Route path="/saveproduct/:productId" element={ <AddOrUpdateProduct /> } />
Second,
react-router-dom v6 Route components rendered via the element prop don't receive route props
See question. Redux is not needed here. Just use params react hook
const { productId } = useParams();
Im new at react and it take my one day. But finally i found the solution. I am not sure this is the best practice but it make sense for me now. Check link for solution.
https://youtu.be/qdCHEUaFhBk
Also thanks #kupp
I am developing an E - Commerce website in React and Node.js. I am facing two problems described below.
I have two different master .html files for admin side and front end side. Hence I am using builtin React admin template in which index.html is loading on project start. My problem is how can I load another master .html for front end design?
I want to use Node.js as the back end. Hence I can not integrate node.js with React front or admin side which will run if the React application runs.
Any suggestions or solution steps will be highly appreciated.
Here's a very basic concept of the first idea:
const AdminIndexPage = children => (<section className="AdminIndexPage">{children}</section>)
const PublicIndexPage = children => (<section className="PublicIndexPage">{children}</section>
const App = props => {
if(props.indexPageToShow === 'admin'){
return <AdminIndexPage {...props} />
}else{
return <PublicIndexPage {...props} />
}
}
Here's a very basic concept of the second idea:
index.html
<html>
<head>
<script src="index.js"></script>
</head>
<body>
<div id="AdminPageIndex"></div>
<div id="PublicPageIndex"></div>
</body>
</html>
index.js
import {AdminPageIndex, PublicPageIndex} from './pages'
ReactDOM.render(AdminPageIndex, document.getElementById('AdminPageIndex'))
ReactDOM.render(PublicPageIndex, document.getElementById('PublicPageIndex'))
Let's say I have a react projects, and an Express server for serving my project, as follows(After building the project):
]
This way, only the index.html is served, isn't it? If the user routes to a different page, how is that page sent to him?
Routing in javascript is managed by using HTML5 push state. So every time you click a link and go to another route, the browser history and push state is being used. That's the basis for routing in almost of all the single page applications.
Until and unless you refresh the page, your request doesn't go to the server. Hence, index.html is served only once and after that the router (here the react-router) takes over and manages the routing in url using the history API of the browser.
Hope this helps !
That is done using react-router which manages the routing using the browser's History API.
This style of a website is called a single page application as opposed to a multi page application where the server sends different pages depending on the url you route to.
you can use react-router-dom like this
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/someurl" component={ComponentForSomeUrl}
</Switch>
and render it with BrowserRouter
but you can use something like history.push, in my opinion react-router-dom is really simple and better than react-router
you don't need to send html file to specific route, in case of react express is used for building API (in most cases)
In you React folder you want to do npm install --save react-router-dom.
So inside the React Router family of libraries, there is a couple of different dependencies you can possibly install.
Ensure you never install React Router by itself.
The react-router library as it is published on npm is the core library of everything inside the React Router general project.
So react-router has some core navigational logic inside of it. It decides how to work with React, how to change content out depending on different rules and some other low-level logic.
To gain some actual implementation as it works specifically in the browser, install react-router-dom.
So anytime you want to use React Router on a project to handle navigation, always install react-router-dom, not react-router.
There are other similarly named projects that you might think you need as well, react-router-native for use inside of React Native projects.
In web applications we make use of react-router-dom, we are not making native mobile apps.
React-router-native is for native mobile applications only.
For the browser you always want react-router-dom as opposed to react-router-native
So perhaps in your App.js component you want to set something up that looks like this:
import React from "react";
import { BrowserRouter, Route } from “react-router-dom”;
const App = () => {
return <div>App</div>;
};
export default App;
I also recommend if you are new to React Router to get familiar with it by setting up something temporary like so:
import React from "react";
import { BrowserRouter, Route } from “react-router-dom”;
const PageOne = () => {
return <div>PageOne</div>;
};
const PageTwo = () => {
return <div>PageTwo<button>Click Me</button></div>;
};
const App = () => {
return (
<div>
<BrowserRouter>
<div>
<Route path=“/” exact component={PageOne} />
<Route path=“/pagetwo” component={PageTwo} />
</div>
</BrowserRouter>
</div>
);
};
Visit your localhost:3000 and then your localhost:3000/pagetwo, check out how all that is working.
When we visit a page called localhost:3000 and we type that address into the url it loads up the application.
React Router itself does not care about that entire url, instead React Router only cares about all the characters that are listed after the domain name or port definition.
Localhost:3000 is interpreted as being localhost:3000/
If I go to localhost:3000/ it still loads up my application.
Now I have other examples here if I go to localhost:3000/pageone, React Router only cares about everything after the port and domain
Same thing if I went to airbnb.com/listings/spain react router would only consider /listings/spain when deciding what content to render to the screen.
Notice in the example above I created an instance of BrowserRouter, well BrowserRouter creates an object of its own known as the history object.
This history object is going to look at the URL inside the address bar and extract just that portion of the URL that react router cares about.
The history object is then going to communicate that path over to BrowserRouter who communicates that path to both Route components and those Route components decide whether to show themselves or hide themselves depending on the path that the user is visiting and the path property that it was passed when it was created.
I am working on nodejs express app. I want to include google polymer ui components in my express app.I tried a lot about integrating polymer in express app. I found no solution for this. Is there any way to integrate polymer ui component in express app ?
I used polymer webcomponents to create a node express server found on this: express-web-components
His tutorial shows how to use webcomponents to create a server, but you can clearly adopt that to your usecase and use ui components like the server ones. Note: To use the server-side web components, the ScramEngine offers access to the runtime.
Basically it is:
Include polymer and your component like so:
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/express-web-components/express-app.html">
Use your component for example like so.
<express-app port="1234">
<express-middleware>
</express-middleware>
</express-app>
This is only for Polymer 2. Version 3 will be different from the import side.
Goal: After user saves data to my mysql DB, a JSON teaser of the newly saved content is broadcasted to all users.
What are some quick and dirty solutions to achieve this? I am working with php/mysql. Got a taste of Socket.io, and a node.js server listening on the side....
Any good links would be greatly appreciated.
Background--------
After many years of working with php, I have decided to jump onto the NodeJS Bandwagon- and have no clue to do anything other than the vanilla "Hello World".... This is my starting point. Thanks again!!
If you would like to broadcast to all users including yourself, then you should use:
io.sockets.emit('global', {data: 'this will be received by everyone'});
If you would like to broadcast to all users without yourself being notified, then you should use:
socket.broadcast.emit('Hello everyone!');
Hope this helps!
Can you define what you mean by "broadcast" in this context?
Do you want to display an alert on a web page?
If so, do you wish to alert only those users who are currently viewing pages on your site or those who come to your site during a period of time? If the later, do you care if the alert appears to a single user more than once?
Socket.IO is one way to transmit/receive messages to/from a remote browser, but without a client-side handler that has some way of displaying your message to the user, it's kind of moot.
I've found now.js to be a far better abstraction of browser<-->server communications as shown in this possible solution that will display an alert on pages currently viewed by your users:
Step 1: Install now.js (remove the -g if you don't want now installed globally):
npm install -g now
Step 2: Create a HTTP server and cause it to listen on a port 80
var PORT=80,
http=require('http'),
nowjs=require('now'),
app=http.createServer(requestHandler).listen(PORT), // create your server
everyone=nowjs.initialize(app); // initialize now on your listening server
function alertUsers(msg){ // sends msg to showAlert() callback on clients
everyone.now.showAlert(msg);
}
function requestHandler(req,res) {
...
...
/*
* Ok, something has happened you want to inform your currently
* connected users of...
*
* if the thing can happen as a result of a request, do it here
*/
var msg="Whoohoo! Something's happened!";
alertUsers(msg);
...
...
}
// or if it happens somewhere else, just call alertUsers() there.
Step 3: And then in the browser-side HTML:
<html>
<head>
<style type="text/css">
.alert { background-color:red; color:white; font:24pt bold sans-serif; }
.hidden { display:hidden; visibility:none; }
</style>
</head>
<body>
<div id="alert" class="alert hidden">
<div class="main-content">
<!-- main page content -->
</div>
<script type="text/javascript" src="...load jQuery here..."></script>
<script src="/nowjs/now.js"></script> <!-- *SEE NOTE BELOW -->
<script type="text/javascript>
$(document).ready(function(){
// after the document has finished loading
now.showAlert=function(msg){ // define your callback function
$('#alert').removeClass('hidden').text(msg);
};
});
</script>
</body>
</html>
* Note that the <script src="/nowjs/now.js"></script> request is magic in that the referenced file doesn't really exist server-side at that location. By running nowjs.initialize() on your http server instance, you're setting things up so that nowjs will intercept the request for /nowjs/now.js and serve it back to the client without invoking your requestHandler().
Also, this solution does not display your alert to anyone who connects after the alert is sent from the server. If you want to do that, you'll need to do something different.