How to use react component based on condition on activityMiddleware - web-chat

Do we have an example of how to pass all activities through a react component? I want each activity to go through react component and then based on the external data source, I would like to render the component.

Related

How to read UTM tags and redirect url in react

I have an URL with UTM tags as below. When a user clicks/ hits the below URL(source), I would like to read UTM tags and redirect to another url(target).
Does anyone have a documentation link to read UTM tags and redirect the url in react?
Example:
Source
https://www.CustomDomain.com/?utm_source=linkedin&utm_medium=email&utm_campaign=sale&utm_id=123&utm_term=job&utm_content=ad
Target
https://www.CustomDomain.com/dashbord
With the latest react-router-dom *v6*, you can use a new hook named useSearchParams. Use it to get query params and you can then store them into localStorage,:
const [searchParams, setSearchParams] = useSearchParams();
searchParams.get("utm_source"); // similar for the rest of query params
With React router v4, You need to use this.props.location.search for generic or this.props.location (with useLocation) for functional components and parse the query parameters either by yourself or using a package

How to display dynamic json data in angular?

I am a beginner in angular. My question is - Based on the excel file which user uploads, api returns some data in JSON format. So the column headers and data are dynamic. I want to display the json data in HTML table.
I want to know how should my json look like and its respective TS and HTML code.
User upload an excel file like this
file example
My output should look like this :
output
First column and row is dynamic.
As you are new to Angular, I will show you one of the procedure you can use
Angular part:
Every time the server sends data, you can get your data by HTTP methods or web-socket by "service" from angular.
Service:
in services, you can import HTTP to get data and after you get data you can emit it by using "behavior-subject" to any component you want which contains your tables and save data values there. (behavior-subject is from rxjs library).
Component:
Now your component in angular has the json data every time and you can analyze
your JSON file, based on your JSON shape you can use *ngfor in the HTML part of the component table and it will change the table online.

How to access Dynamic Zones and Components as JSON in Strapi backend

I am trying to search for certain data inside a Collection Type or Single Type through localhost://1337.
Strapi allows you to search the json data of a basic structure such as: localhost:1337/articles/ OR even localhost:1337/articles/1.
But I wish to go deeper and access the json of a dynamic zone or a component inside of a single type or a collection type.
In the settings of Strapi under Permissions/Content-Manager you have options for finding collection types and anything inside of that specific collection type.
For example /content-manager/collection-types/:model
In the above image you will see a dynamic zone with a Component called Data which has another component called Technology inside it.
I wish to somehow access the Technology component directly as a json in localhost://1337.
An example of me trying to access technology component:
http://localhost:1337/navigation/solutions/Data/technology
I would like to know how to access technology.
Strapi explains that you must go through this specific manner but it doesn't seem to work for me:
/content-manager/collection-types/:model

What would be a good way to communicate between components and services in Angular

I am looking for best practices in Angular to communicate between a UI component and an Angular Service.
My UI has a status bar component. It has a signin button. When user signs in, the username and password are sent from the status bar component to a angular service. The angular service then uses http.post method to send the request to the server. The angular service handles the response from the server and then emits an Observable of its own which contains the outcome of login request. The status bar component subscribes to the observable of the angular service (at ngOnInit) and depending on the result value, it either pops an error message or replaces the login button with welcome ... message. Is this the right way of communicating between components and services in Angular or is there a better design pattern?
Yes this is a perfectly valid use case of services in a component, this type of service usage is called dependency injection.
One thing that should be known are "stores", such as Redux, RxJs or Ngrx Store..
Stores can be useful when the application is split up in lots of different component that may be sharing the same data.
In these cases there can be some difficulties keeping all the components data in the same "state". Stores is a good way to keep the shared data in sync

Passing data to Angular page from Node API

I want to be able to load a blog post when a user is directed to /feed/:id and I want this page to load in Angular.js. Basically I want Node to pass the post title, content, etc. to the Angular template in JSON format (post.html) and for Angular to use the JSON attributes of the post (post.name, post.content, etc...).
I know how to build the API on the Node side to get this data from a MongoDB datastore but I'm not entirely sure how to pass it on to the Angular controller once I have it in Node.