Below is my store which will retrieve observable units from an API by using the loadUnits method, the API is working well, I also added a console.log() here, I can see the first element's value.
import { ITutorialUnit } from "./../model/unit";
import { action, observable } from "mobx";
import { createContext } from "react";
import agent from "../api/agent";
class UnitStore {
#observable units: ITutorialUnit[] = [];
#observable title = "hello from mobx";
#observable loadingInitial = false;
#action loadUnits = () => {
this.loadingInitial = true;
agent.TutorialUnits.list()
.then(units => {
units.forEach((unit) => {
this.units.push(unit);
});
})
.then(() => console.log("from store:" + this.units[0].content)) // I can see the data from this logging
.finally(() => (this.loadingInitial = false));
};
}
export default createContext(new UnitStore());
then when I want to use the observable units in App.tsx :
import React, { Fragment, useContext, useEffect, useState } from "react";
import { Container } from "semantic-ui-react";
import "semantic-ui-css/semantic.min.css";
import NavBar from "../../features/nav/NavBar";
import { ActivityDashboard } from "../../features/Units/dashboard/tutorialUnitDashboard";
import UnitStore from "../stores/unitStore";
import { observer } from "mobx-react-lite";
import { LoadingComponent } from "./LoadingComponent";
import agent from "../api/agent";
import { ITutorialUnit } from "../model/unit";
const App = () => {
const unitStore = useContext(UnitStore);
const units = unitStore;
useEffect(() => {
unitStore.loadUnits();
console.log("from App.tsx: " + units); // will only log a undefined
}, [unitStore]);
if (unitStore.loadingInitial) {
return <LoadingComponent content="Loading activities..." />;
}
return (
<Fragment>
<NavBar />
<Container style={{ marginTop: "7em" }}>
<h1>{unitStore.title}</h1>
<ActivityDashboard />
</Container>
</Fragment>
);
};
export default observer(App);
I can't get the observable units's data, but I can get another observable title's data, which is just a string, the LoadingComponent is not working either.
please help me!
I figured this out. the version of Mobx should below 6.0.0, i use 5.10.1 and everything's just fine.
Related
I want to know if is possible to navigate between screens, using like a context api, or something else, where I can get the "navigateTo" function in any component without passing by props. And of course, without the cycle dependency problem.
Example with the cycle dependency problem
NavigateContext.tsx:
import React, { createContext, useMemo, useReducer } from 'react'
import { Home } from './pages/Home'
interface NavigateProps {
navigateTo: (screenName: string) => void
}
export const navigateContext = createContext({} as NavigateProps)
const reducer = (state: () => JSX.Element, action: { type: string }) => {
switch (action.type) {
case 'home':
return Home
default:
throw new Error('Page not found')
}
}
export function NavigateContextProvider() {
const [Screen, dispatch] = useReducer(reducer, Home)
const value = useMemo(() => {
return {
navigateTo: (screenName: string) => {
dispatch({ type: screenName })
},
}
}, [])
return (
<navigateContext.Provider value={value}>
<Screen />
</navigateContext.Provider>
)
}
Home.tsx:
import React, { useContext, useEffect } from 'react'
import { Flex, Text } from '#chakra-ui/react'
import { navigateContext } from '../NavigateContext'
export function Home() {
const { navigateTo } = useContext(navigateContext)
useEffect(() => {
setTimeout(() => {
navigateTo('home')
}, 2000)
}, [])
return (
<Flex>
<Text>Home</Text>
</Flex>
)
}
Yes, this is possible, but you'll need to maintain the list of string view names independently from your mapping of them to their associated components in order to avoid circular dependencies (what you call "the cycle dependency problem" in your question):
Note, I created this in the TS Playground (which doesn't support modules AFAIK), so I annotated module names in comments. You can separate them into individual files to test/experiment.
TS Playground
import {
default as React,
createContext,
useContext,
useEffect,
useState,
type Dispatch,
type ReactElement,
type SetStateAction,
} from 'react';
////////// views.ts
// Every time you add/remove a view in your app, you'll need to update this array:
export const views = ['home', 'about'] as const;
export type View = typeof views[number];
export type ViewContext = {
setView: Dispatch<SetStateAction<View>>;
};
export const viewContext = createContext({} as ViewContext);
////////// Home.ts
// import { viewContext } from './views';
export function Home (): ReactElement {
const {setView} = useContext(viewContext);
useEffect(() => void setTimeout(() => setView('home'), 2000), []);
return (<div>Home</div>);
}
////////// About.ts
// import { viewContext } from './views';
export function About (): ReactElement {
const {setView} = useContext(viewContext);
return (
<div>
<div>About</div>
<button onClick={() => setView('home')}>Go Home</button>
</div>
);
}
////////// ContextProvider.tsx
// import {viewContext, type View} from './views';
// import {Home} from './Home';
// import {About} from './About';
// import {Etc} from './Etc';
// Every time you add/remove a view in your app, you'll need to update this object:
const viewMap: Record<View, () => ReactElement> = {
home: Home,
about: About,
// etc: Etc,
};
function ViewProvider () {
const [view, setView] = useState<View>('home');
const CurrentView = viewMap[view];
return (
<viewContext.Provider value={{setView}}>
<CurrentView />
</viewContext.Provider>
);
}
Iam trying to display a component whenever response of an api is true. but if i try to do it in the axios where iam sending api request it does not work and if i remove the below return it gives me an error that there is nothing to render.
My code
import React from "react";
import { useState, useEffect } from "react";
import { SignUpComponent } from "../index";
import axios from "axios";
import { Redirect, useParams } from "react-router-dom";
import { getToken } from "../../common/constants/variables";
function Reference() {
const [openSignUp, setOpenSignup] = useState(true);
const [refer, setRef] = useState({});
let { ref } = useParams();
function toggleToSignUp() {
setTimeout(() => {
setOpenSignup(true);
}, 350);
}
axios
.post("https://theappsouk.com/api/v1/check-referral", {
ref: ref,
})
.then((response) => {
if (response.data.status == true) {
return (
<SignUpComponent open={openSignUp} toggleModal={toggleToSignUp} />
);
} else{
<Redirect to= '/'/>
console.log("NOTHING")
}
console.log("REFFEERR", JSON.stringify(response.data.status));
});
console.log("REFF", JSON.stringify(ref));
return ( //what ever the api response is it seems to render only this return statement
<div>
<SignUpComponent open={openSignUp} toggleModal={toggleToSignUp} />
</div>
);
}
export default Reference;
you should request axios in the useEffect, and display all the UI inside the return
import React from "react";
import { useState, useEffect } from "react";
import { SignUpComponent } from "../index";
import axios from "axios";
import { Redirect, useParams } from "react-router-dom";
import { getToken } from "../../common/constants/variables";
function Reference() {
const [openSignUp, setOpenSignup] = useState(true);
const [status, setStatus] = useState(true);
const [refer, setRef] = useState({});
let { ref } = useParams();
function toggleToSignUp() {
setTimeout(() => {
setOpenSignup(true);
}, 350);
}
useEffect(() => {
axios
.post("https://theappsouk.com/api/v1/check-referral", {
ref: ref,
})
.then((response) => {
setStatus(response.data.status)
});
}, []);
return ( //what ever the api response is it seems to render only this return statement
<div>
{
status? <SignUpComponent open={openSignUp} toggleModal={toggleToSignUp} /> :
<Redirect to= '/'/>
}
</div>
);
}
export default Reference;
I am trying to get the auth status after refreshing the app and previously signing in but firebase.auth().onAuthStateChanged() gives undefined. The motive behind this is to either navigate to home screen or signIn screen by using the auth status.
import React, {Component} from 'react';
import {View} from 'react-native';
import firebase from 'firebase';
import {connect} from 'react-redux';
import {Spinner} from '../components/common';
class Switch extends Component {
componentDidMount() {
const userData = this.checkUser();
this.switchContent(userData);
}
checkUser = () => {
firebase.auth().onAuthStateChanged(async (userData) => {
return userData;
});
};
switchContent(userData) {
console.log(userData);
if (userData) {
return this.props.persistantSignIn();
}
return this.props.navigation.push('SignInForm');
}
renderComponent() {
return (
<View style={{flex: 1}}>
<Spinner />
</View>
}
render() {
return <View style={{flex:1}}>{this.renderComponent()}</View>;
}
}
export default connect(null, {persistantSignIn})(Switch);
The results of onAuthStateChanged (i.e. userData) should be processed within the anonymous function. Also note that until a user is signed in, userData will be null.
componentDidMount() {
firebase.auth().onAuthStateChanged( (userData) => {
this.switchContent(userData);
});
}
There is no need to wrap firebase.auth().onAuthStateChanged within an anonymous function, unless, for example, you were to use useEffect, such as the following:
import { useEffect } from 'react';
...
useEffect(() => {
auth.onAuthStateChanged( userData => {
this.switchContent(userData);
})
},[])
I'm integrating NextJS into my React app. I face a problem, on page reload or opening direct link(ex. somehostname.com/clients) my getInitialProps not executes, but if I open this page using <Link> from next/link it works well. I don't really understand why it happens and how to fix it. I have already came throught similar questions, but didn't find any solution which could be suitable for me.
Clients page code:
import React, { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { ClientsTable } from '../../src/components/ui/tables/client-table';
import AddIcon from '#material-ui/icons/Add';
import Fab from '#material-ui/core/Fab';
import { AddClientModal } from '../../src/components/ui/modals/add-client-modal';
import CircularProgress from '#material-ui/core/CircularProgress';
import { Alert } from '../../src/components/ui/alert';
import { Color } from '#material-ui/lab/Alert';
import { AppState } from '../../src/store/types';
import { thunkAddClient, thunkGetClients } from '../../src/store/thunks/clients';
import { SnackbarOrigin } from '#material-ui/core';
import { IClientsState } from '../../src/store/reducers/clients';
import { NextPage } from 'next';
import { ReduxNextPageContext } from '../index';
import { PageLayout } from '../../src/components/ui/page-layout';
const Clients: NextPage = () => {
const [addClientModalOpened, setAddClientModalOpened] = useState<boolean>(false);
const [alertType, setAlertType] = useState<Color>('error');
const [showAlert, setAlertShow] = useState<boolean>(false);
const alertOrigin: SnackbarOrigin = { vertical: 'top', horizontal: 'center' };
const dispatch = useDispatch();
const { clients, isLoading, hasError, message, success } = useSelector<AppState, IClientsState>(state => state.clients);
useEffect(() => {
if (success) {
handleAddModalClose();
}
}, [success]);
useEffect(() => {
checkAlert();
}, [hasError, success, isLoading]);
function handleAddModalClose(): void {
setAddClientModalOpened(false);
}
function handleAddClient(newClientName: string): void {
dispatch(thunkAddClient(newClientName));
}
function checkAlert() {
if (!isLoading && hasError) {
setAlertType('error');
setAlertShow(true);
} else if (!isLoading && success) {
setAlertType('success');
setAlertShow(true);
} else {
setAlertShow(false);
}
}
return (
<PageLayout>
<div className='clients'>
<h1>Clients</h1>
<div className='clients__add'>
<div className='clients__add-text'>
Add client
</div>
<Fab color='primary' aria-label='add' size='medium' onClick={() => setAddClientModalOpened(true)}>
<AddIcon/>
</Fab>
<AddClientModal
opened={addClientModalOpened}
handleClose={handleAddModalClose}
handleAddClient={handleAddClient}
error={message}
/>
</div>
<Alert
open={showAlert}
message={message}
type={alertType}
origin={alertOrigin}
autoHideDuration={success ? 2500 : null}
/>
{isLoading && <CircularProgress/>}
{!isLoading && <ClientsTable clients={clients}/>}
</div>
</PageLayout>
);
};
Clients.getInitialProps = async ({ store }: ReduxNextPageContext) => {
await store.dispatch(thunkGetClients());
return {};
};
export default Clients;
thunkGetClients()
export function thunkGetClients(): AppThunk {
return async function(dispatch) {
const reqPayload: IFetchParams = {
method: 'GET',
url: '/clients'
};
try {
dispatch(requestAction());
const { clients } = await fetchData(reqPayload);
console.log(clients);
dispatch(getClientsSuccessAction(clients));
} catch (error) {
dispatch(requestFailedAction(error.message));
}
};
}
_app.tsx code
import React from 'react';
import App, { AppContext, AppInitialProps } from 'next/app';
import withRedux from 'next-redux-wrapper';
import { Provider } from 'react-redux';
import { makeStore } from '../../src/store';
import { Store } from 'redux';
import '../../src/sass/app.scss';
import { ThunkDispatch } from 'redux-thunk';
export interface AppStore extends Store {
dispatch: ThunkDispatch<any, any, any>;
}
export interface MyAppProps extends AppInitialProps {
store: AppStore;
}
export default withRedux(makeStore)(
class MyApp extends App<MyAppProps> {
static async getInitialProps({
Component,
ctx
}: AppContext): Promise<AppInitialProps> {
const pageProps = Component.getInitialProps
? await Component.getInitialProps(ctx)
: {};
return { pageProps };
}
render() {
const { Component, pageProps, store } = this.props;
return (
<>
<Provider store={store}>
<Component {...pageProps} />
</Provider>
</>
);
}
}
);
Looking for your advices and help. Unfortunately, I couldn't find solution by myself.
This is the way Next.js works, it runs getInitialProps on first page load (reload or external link) in the server, and rest of pages that where navigated to with Link it will run this method on client.
The reason for this is to allow Next.js sites to have "native" SEO version.
I'm currently learning React Native. I want to write a ListView. The tutorial I'm following uses the deprecated method componentWillMount, which is now called UNSAFE_componentWillMount. I googled an people said one should replace that method with componentDidMount. My problem is when I add this method to my code, the app breaks.
Here is the code:
/* #flow */
import React, { Component } from "react";
import { ListView } from "react-native";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import ListItem from "./ListItem";
class LibraryList extends Component {
componentDidMount = () => {
const ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2
});
this.dataSource = ds.cloneWithRows(this.props.libraries);
};
renderRow = library => <ListItem library={library} />;
render() {
return <ListView dataSource={this.dataSource} renderRow={this.renderRow} />;
}
}
LibraryList.propTypes = {
libraries: PropTypes.array
};
const mapStateToProps = state => {
return { libraries: state.libraries };
};
export default connect(mapStateToProps)(LibraryList);
And here is the error message that I get TypeError: Cannot read property 'rowIdentities' of undefined. Which method am I supposed to use here, or how can I fix this?
I solved the problem by using a FlatList instead. I found out that ListView is deprecated :) Here is the code I ended up using:
/* #flow */
import React, { Component } from "react";
import { FlatList } from "react-native";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import ListItem from "./ListItem";
class LibraryList extends Component {
state = {
dataSource: []
};
componentDidMount = () => {
this.setState({ dataSource: this.props.libraries });
};
renderRow = ({ item: library }) => <ListItem library={library} />;
render() {
return (
<FlatList
data={this.state.dataSource}
renderItem={this.renderRow}
keyExtractor={item => item.id.toString()}
/>
);
}
}
LibraryList.propTypes = {
libraries: PropTypes.array
};
const mapStateToProps = state => {
return { libraries: state.libraries };
};
export default connect(mapStateToProps)(LibraryList);