Is there a builtin UI component in the Stream for react-native library to edit a user's profile?
I have the feeds and activities working and integrated with my user id and token server side api, but users obviously show up as the default "Unknown" with no photo. I don't have profile storage yet in this new application so I'm wondering if there is a quick drop-in for a Profile screen and editing of that profile or if I have to build that and add the metadata to the stream User API.
There is no profile component, but you can access the information and create your own.
Firstly, set the profileImage field of the user in getstream like so (example shown server side but you can use do client side with a token):
const client = stream.connect('xxx', 'xxxxxxxxxxxxxx', 'xxxxxx');
let clientData = await client.user(userId).get();
if (!clientData.data) return null;
clientData.data.profileImage = 'https://cdn.com/profile.png';
await client.user(context.params.userId).update(clientData.data);
Then you can access it like so on client: (example shows feed with a custom header.):
const CustomActivity = (props) => {
return <Activity {...props}
Header={
<View style={styles.avatarView}>
<Avatar
source={props.activity.actor.data.profileImage}
size={36}
noShadow
/>
<View style={styles.actorView}>
<Text style={styles.actorName}>{props.activity.actor.data.name}</Text>
<Text style={styles.metaData}>{formatRelative(new Date(props.activity.time), new Date())}</Text>
</View>
</View>
}>
</Activity>
<StreamApp apiKey={STREAM_API_KEY} appId={STREAM_APP_ID} token={user.activity.token}>
<FlatFeed feedGroup="timeline" notify Activity={CustomActivity} />
</StreamApp>
Related
I need to load all the products in my nodeJS application with WooCommerce Rest Api. I use the WooCommerce REST API - JavaScript Library and the Syncfusion Grid Component. Because I can't load all data at once, I wanted to use the Load data on demand like this, but I can't find any documentation or examples on this.
I have something like this:
import React from 'react';
import { useEffect, useState } from "react";
import { GridComponent, ColumnsDirective, ColumnDirective, Resize, Sort, ContextMenu, Filter, Page, ExcelExport, PdfExport, Edit, Inject } from '#syncfusion/ej2-react-grids';
import WooCommerceRestApi from "#woocommerce/woocommerce-rest-api";
var WooCommerce = new WooCommerceAPI({
url: 'http://example.com',
consumerKey: 'ck_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
consumerSecret: 'cs_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
wpAPI: true,
version: 'wc/v1'
});
const WooCommerceProducts = () => {
const [products, setProducts] = useState([]);
useEffect(() => {
fetchOrders();
}, []);
let fetchOrders = () => {
WooCommerce
.get("products", {
per_page: 100,
page: 1
})
.then((response) => {
if (response.status === 200) {
setProducts(response.data);
}
})
.catch((error) => { });
};
return (
<div className='m-2 md:m-10 p-2 md:p-10 bg-white rounded-3xl'>
<Header category="Page" title="WooCommerce Orders" />
<GridComponent
id='gridcomp'
dataSource={orders}
allowPaging
allowSorting>
<ColumnsDirective>
<ColumnDirective field='id' />
<ColumnDirective field='name' />
<ColumnDirective field='slug' />
<ColumnDirective field='status' />
...
</ColumnsDirective>
<Inject services={[Resize, Sort, ContextMenu, Filter, Page, ExcelExport, PdfExport]} />
</GridComponent>
</div>
)
}
export default WooCommerceProducts
Please help and thx
If you are using any custom services, I suggest you use the custom-binding feature to bind the data to the grid. I would like to share the behavior of custom-binding in EJ2 Grid.
For every grid action (such as Filter, Page, etc.,), I have triggered the dataStateChange event, and, in the event arguments, I have sent the corresponding action details (like skip, take, filter field, value, sort direction, etc.,) Based on that, you can perform the action in your service, return the data as a result, and count objects.
Note: ‘dataStateChange’ event is not triggered at the Grid initial render. If you are using a remote service, you need to call your remote service by manually with a pagination query (need to set the skip value as 0 and take a value based on your pageSize of pageSettings in Grid. If you are not defined pageSize in pageSettings, you need to send the default value 12 ) in load event of Grid. Please return the result like as "{result: […], count: …}" format to Grid.
‘dataSourceChanged’ event is triggered when performing CRUD actions in Grid. You can perform the CRUD action in your service using action details from this event, and, you need to call the endEdit method to indicate the completion of the save operation.
Custom-binding: https://ej2.syncfusion.com/react/documentation/grid/data-binding/data-binding/#custom-binding
Demo: https://ej2.syncfusion.com/react/demos/#/material/grid/custom-binding
sample: https://stackblitz.com/edit/react-v64sms-wx3hsy?file=index.js
I am trying to implement Stripe payments in my Next.js app as described in the guide here: https://stripe.com/docs/payments/quickstart
The guide tells me that in order to use Stripe Elements for my checkout form, I need to know payment intent. It says:
Create PaymentIntent as soon as the page loads
The issue is - our website will not have a separate payments page, the payment form will be displayed inside the modal, which is loaded on every page of the website. That means, I would have to fetch the payment intent for any user who ever visits any page on our website, whether they're planning to purchase the course or not, just so that I could display the payment form inside the modal. That doesn't seem right to me.
Can you give me some advice, let me know if there's a better way to handle this?
Another issue is that this guide tells me that I should pass the fetched payment intent clientSecret as an option to <Elements/> wrapper.
And if I hover on <Elements/> wrapper in my VSCdoe, it tells me:
[...] Render an Elements provider at the root of your React app so that it is available everywhere you need it. [...]
So, does that mean I have to put <Elements/> wrapper into my _app.tsx file? And that means I'd have to fetch the payment intent clientSecret inside of the _app.tsx? So that my app would fetch payment intent secret any time any user ever loads any page on my website?
Again, this seems pretty weird, wouldn't it slow things down, add extra requests and loading time to all my pages, and create a whole bunch of payment intents that are never used?
Render the payment form in a modal in Layout.js and wrap the
entire project in the Layout component
place this code in _app.js
import React, { useEffect, useState } from "react"
import { loadStripe } from "#stripe/stripe-js"
import { Elements } from "#stripe/react-stripe-js"
import Layout from "../components/Layout"
import PaymentModalForm from "../components/PaymentModalForm"
const promise = loadStripe("pk_test_....")
// replace pk_test_... with your publishable key
const API_URL = "http://localhost:8000"
// replace API_URL with your backend server url
const App = ({ Component, pageProps }) => {
const [secret, setSecret] = useState(null)
useEffect(() => {
const fetchSecret = async () => {
const response = await fetch(`${API_URL}/create_intent`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
items: [{ id: 'adidas boost', quantity: 2}]
})
})
const { client_secret } = await response.json()
setSecret(clientSecret)
}
fetchSecret()
}, [])
const options = {
clientSecret: secret,
appearance: { theme: "stripe"}
}
return (
{secret && (
<Elements stripe={promise} options={options}>
<Layout>
<Component {...pageProps} />
</Layout>
</Elements>
)}
)
}
export default App
Then in your Layout.js, fill in this code
import PaymentModalForm from "../components/PaymentModalForm"
import React, { useEffect, useState } from "react"
const Layout = ({ children }) => {
const [showModal, setShowModal] = useState(false)
const handleClick = () => {
if (showModal) {
setShowModal(false)
} else {
setShowModal(true)
}
}
return (
<div>
<div className="container">
{children}
<button onClick={handleClick}>Show Payment Modal</button>
</div>
{showModal ? (
<div className="modal fade">
<div className="modal-dialog">
<div className="modal-content">
<PaymentModalForm />
</div>
</div>
</div>
) : ( null )}
</div>
)
}
export default Layout
There's more work to be done in PaymentModalForm.js
I have been looking for a guide to create a showcase view on first launch of my react native app, I might don't know the correct word for it, actually it's a user guide for features on first launch, it has a direction towards the icon and it's details, I haven't found anything on it, it'll be a great help if anyone guide me about that, thanks
Here is some demo code from the doc of react-navigation. I think it's similar to your case.
if (state.isLoading) {
// We haven't finished checking for the token yet
return <SplashScreen />;
}
return (
<Stack.Navigator>
{state.userToken == null ? (
// No token found, user isn't signed in
<Stack.Screen
name="SignIn"
component={SignInScreen}
options={{
title: 'Sign in',
// When logging out, a pop animation feels intuitive
// You can remove this if you want the default 'push' animation
animationTypeForReplace: state.isSignout ? 'pop' : 'push',
}}
/>
) : (
// User is signed in
<Stack.Screen name="Home" component={HomeScreen} />
)}
</Stack.Navigator>
);
Add a firstLaunch state to true first and then set it to false and save in the asyncstorage.Something like:
let firstLauch = await AsyncStorage.getItem("firstLauch");
firstLauch = JSON.parse(firstLauch);
firstLauch = firstLauch === false?firstLauch:true
let [isFirstLauch,setIsFirstLauch]=useState(firstLauch);
return (
<Stack.Navigator>
{isFirstLauch ? (
// No token found, user isn't signed in
<Stack.Screen
name="FirstLauch"
component={FirstLauchScreen}
/>
) : (
<Stack.Screen name="Home" component={HomeScreen} />
)}
</Stack.Navigator>
);
Don't forget to set firstLauch to false in your firstLauchScreen.
Have a try with the popular npm package for creating your showcase of first launch https://www.npmjs.com/package/react-native-copilot
I was using react-admin, it's really quickly and productively. However, I want to implement some features like programmatic display resource and crud operation component according to the attributes of a logged user.
Something like this.
const App = () => (
<Admin restClient={jsonServerRestClient('http://jsonplaceholder.typicode.com')}>
<Resource name="users" list={UserList} haveListPermission={user.hasUsersListPermission}/>
<Resource name="tags" havePermission={user.hasTagPermission} />
</Admin>
);
This is documented here: https://marmelab.com/react-admin/Authorization.html
In a nutshell, the Admin component accepts a function as children (think render prop) which will be called with your permissions (from your authProvider). So assuming you are using react-admin (and not admin-on-rest) and your authProvider resolves with the current user when called with type AUTH_GET_PERMISSIONS:
const App = () => (
<Admin authProvider={authProvider} dataProvider={jsonServerRestClient('http://jsonplaceholder.typicode.com')}>
{user => (
{user.hasUsersListPermission && <Resource name="users" list={UserList} />}
{user.hasTagPermission && <Resource name="tags" />
)}
)}
</Admin>
);
I have a React Navigation Tab Component like this:
const RootNavigator=TabNavigator({
Home:{
screen: Home,
navigationOptions:{
tabBarIcon: ({focused}) => (
<Icon
name={focused? 'ios-home':'ios-home-outline'}
style={{color: '#464646'}}
size={16}
/>
)
}
},
Notifications:{
screen: Notifications,
navigationOptions:{
tabBarIcon: ({focused}) => (
<TabNotifications focused={focused} />
)
}
}, {});
Is there a way to make a callback when leaving a screen?
In this case, I would like to perform a function when I leave the Notifications tab. Such as mark the notifications as seen and remove the badge indicator.
As of now, I am pulling the Notification icon from another component in order to show the number badge.
Thanks in advance.
One option is to use onNavigationStateChange to check the current change of the navigation and do the action you need to clear notifications etc.
onNavigationStateChange(prevState, newState, action)
Function that gets called every time navigation state managed by the
navigator changes. It receives the previous state, the new state of
the navigation and the action that issued state change. By default it
prints state changes to the console.
Another option is to use addListener. This way you can subscribe to willFocus/didFocus or willBlur/didBlur events and do the action you need.
addListener - Subscribe to updates to navigation lifecycle
React Navigation emits events to screen components that subscribe to
them:
willBlur - the screen will be unfocused
willFocus - the screen will focus
didFocus - the screen focused (if there was a transition, the transition completed)
didBlur - the screen unfocused (if there was a transition, the transition completed)
Example from the docs
const didBlurSubscription = this.props.navigation.addListener(
'didBlur',
payload => {
console.debug('didBlur', payload);
}
);
// Remove the listener when you are done
didBlurSubscription.remove();
// Payload
{
action: { type: 'Navigation/COMPLETE_TRANSITION', key: 'StackRouterRoot' },
context: 'id-1518521010538-2:Navigation/COMPLETE_TRANSITION_Root',
lastState: undefined,
state: undefined,
type: 'didBlur',
};
For those who want a third option, you could use the NavigationEvents component as suggested by the docs to listen to navigations hooks and to whatever you intended to do.
Edit: This is documentation for React Navigation 2.x, which is no
longer actively maintained. For up-to-date documentation, see the
latest version (6.x).
import React from 'react';
import { View } from 'react-native';
import { NavigationEvents } from 'react-navigation';
const MyScreen = () => (
<View>
<NavigationEvents
onWillFocus={payload => console.log('will focus',payload)}
onDidFocus={payload => console.log('did focus',payload)}
onWillBlur={payload => console.log('will blur',payload)}
onDidBlur={payload => console.log('did blur',payload)}
/>
{/*
Your view code
*/}
</View>
);
export default MyScreen;