Is it possible to use listUpcomingEvents function from a different page/component
mrpacino opened this issue · comments
When I call listUpcomingEvents from the same component in my app that I actioned the handleAuthClick method it works, but when I attempt to call this function from another page it tells me 'this.gapi is not loaded" & that the listUpcomingEvents is not a function?
Is there a way to authenticate from one component/page in my app and call listUpcomingEvents from a different one?
Just to provide some context I am working with create-react-app using react-router 4
Thank you very much,
Marco
Normally, yes
Will check this in few minutes,
Your component(react-google-calendar-api) need to be instanced at the start of your app and never be destroy
Aymeric
Normally, yes
Will check this in few minutes,
Your component(react-google-calendar-api) need to be instanced at the start of your app and never be destroyAymeric
Thanks, if there is anything else I can provide to help please let me know
Do you create the ApiCalendar component on your main Page/Application?
Do you create the ApiCalendar component on your main Page/Application?
Not sure if i'm 'creating' it on my main page maybe thats a step i'm missing, but what I'm doing currently is importing the package in my index.js file which handles all of the react-router stuff and passing the ApiCalendar down as a prop to the two pages/components that I want to authenticate from & call the listUpcomingEvents function from.
Ok seems good so,
Can you show me the code for the router?
Ok seems good so,
Can you show me the code for the router?
here you go, I left out a long list of imports so thats not clogging up the comment but heres everything from the import of your package downwards. The components I am passing it to are Settings && JobDetailContainer
import ApiCalendar from 'react-google-calendar-api'
const history = createBrowserHistory();
const trackPageView = location => {
ReactGA.set({ page: location.pathname });
ReactGA.pageview(location.pathname);
};
const initGa = history => {
ReactGA.initialize(process.env.REACT_APP_ANALYTICS, {
debug: false
});
trackPageView(history.location);
history.listen(trackPageView);
};
initGa(history);
getStoredState(
{
whitelist: ["session"]
},
(err, loadedState) => {
const middleware = [thunk, routerMiddleware(history)];
const store = createStore(
rootReducer,
loadedState,
composeWithDevTools(applyMiddleware(...middleware), autoRehydrate())
);
persistStore(store, {
whitelist: ["session", "chosenSkill", "chosenCategory", "onboardskill"]
});
RequestService.getSession = function() {
return store.getState().session || {};
};
ReactDOM.render(
<Provider store={store}>
<ConnectedRouter history={history}>
<div>
<Route exact path="/" component={About} />
<Route path="/:uniqueWordPath">
<div>
<Switch>
<Route exact path="/components" component={Components} />
<Route exact path="/about" component={About} />
<Route
exact
path="/professionals"
component={Professionals}
/>
<Route exact path="/employers" component={Employers} />
<Route exact path="/agencies" component={Agencies} />
<Route exact path="/cookies" component={Cookies} />
<Route exact path="/hovertest" component={HoverTest} />
<Route exact path="/signup" component={ProfessionalSignup} />
<Route exact path="/signin" component={ProfessionalSignin} />
<Route exact path="/logoff" component={ProfessionalLogoff} />
<Route
exact
path="/forgotpassword"
component={ForgotPassword}
/>
<Route
exact
path="/resetpassword"
component={ResetPassword}
/>
<Route exact path="/search/:query" component={Search} />
<Route exact path="/search" component={Search} />
<Route
exact
path="/onboard"
component={ProfessionalOnboard}
/>
<Route
exact
path="/skills"
component={ProfessionalSkillsRating}
/>
<Route
exact
path="/agency/suggestions/:followerId?/:followerType?"
component={AgenciesSuggestions}
/>
<Route
exact
path="/employer/suggestions/:followerId?/:followerType?"
component={EmployersSuggestions}
/>
<Route
exact
path="/professional/suggestions/:followerId?/:followerType?"
component={ProfessionalsSuggestions}
/>
<Route
exact
path="/company/:type/new"
component={CompanyNew}
/>
<Route
path="/company/:mentionTag/edit"
component={CompanyEdit}
/>
<Route
path="/company/:mentionTag"
component={CompanyProfile}
/>
<Route
exact
path="/dashboard"
component={ProfessionalDashboard}
/>
<Route
exact
path="/profile/edit"
component={ProfessionalProfileSettings}
/>
<Route exact path="/agencies" component={AgenciesList} />
<Route exact path="/employers" component={EmployersList} />
<Route
exact
path="/professionals"
component={ProfessionalsList}
/>
<Route
exact
path="/notifications"
component={NotificationList}
/>
<Route exact path="/settings" component={()=>{
return <Settings ApiCalendar={ApiCalendar}/>
}} />
<Route exact path="/home" component={Home} />
<Route
exact
path="/companysignup"
component={CompanySignup}
/>
<Route
exact
path="/jobs/applications"
component={JobApplications}
/>
<Route
exact
path="/jobs/:jobId"
component={()=>{
return <JobDetailContainer ApiCalendar={ApiCalendar}/>
}}
/>
<Route exact path="/jobs" component={MyJobs} />
<Route exact path="/pricing" component={Pricing} />
<Route exact path="/messages" component={Messages} />
<Route exact path="/privacy" component={Privacy} />
<Route exact path="/terms" component={Terms} />
<Route
exact
path="/activities/:id"
component={ActivityShow}
/>
<Route exact path="/notfound" component={UserNotFound} />
<Route
exact
path="/invite-friends"
component={InviteFriends}
/>
<Route
path="/:username"
component={args => {
return (
<ProfessionalProfile
username={args.match.params.username}
/>
);
}}
/>
</Switch>
</div>
</Route>
</div>
</ConnectedRouter>
</Provider>,
document.getElementById("root")
);
unregister();
}
);
Can you print ApiCalendar.gapi in both components?
Can you print ApiCalendar.gapi in both components?
No worries now, I was trying to action things instantly but after some digging into the source code of your pkg I realised the API isn't ready instantly so thats why I was having problems, its all good now. Thank you very much for your time & sorry for the trouble!
No problems,
Thanks to use the pkg and if you have any issues or other things,
Come on the chat(gitter in the readme) or post another issue.
Feel free to contribute too
Hope the package will help you!