685 comments found.
Hello, there is no error message in the input input box, whether this will be added to this template.
Hi,
You can specify a tag property with AvInput.
<AvInput className="form-control" tag="Textarea" name="rank" id="avexampleName" required />
Regards.
Is there a demo in the gogo-react demo template? On which page
Hi,
You can check validation part on http://gogo-react.crealeaf.com/app/ui/forms page.
I assume you meant textarea validation.
Regards.
Hi, sorry to bother you. In the process of using templates, I found that `availity-reactstrap-validation` is not as good as `Formik`, and `react` is also recommended to use `Formik`.
Import {
AvForm,
AvField
} from "availity-reactstrap-validation";
...
Class LoginLayout extends Component {
handleSubmit(event, errors, values) {
//How do I trigger an error when submitting, assuming I have an ajax request here
}
Render() {
Return(
<AvForm
className="av-tooltip"
onSubmit={this.handleSubmit}
>
<AvField name="username" label="phone / email" type="text" />
<AvField name="password" label="password" type="text" />
<Button>login</Button>
</AvForm>
);
}
}
How do I trigger an error when submitting
Hi,
We choosed Availity not because of React but Reactstrap. It is like a default Bootstrap validation to get started.
If I understand you correctly, you may find what you require at Availity docs. https://availity.github.io/availity-reactstrap-validation/components/validators/ under Custom / Async title. It is at the end of the page which simulates a network call.
Regards.
Hi, I have read the documentation many times, this feature has not been mentioned, it is a headache and I can’t implement my function. Can you help me? My problem is: execute an AJAX request in ‘onSubmit’. The data error message returned by AJAX, for example: the username is not in the correct format. Trigger an error in AvInput and display the error message on the page. (This way of handling error messages will be used extensively in my entire project. Secondly, is there a Discord chat room? This will be a lot easier to communicate)
Hi,
We currently do not have a chat room or ticket system, we only provide support with this comment section or email.
If I understand it correctly you need to make the ajax call “only” when submit button clicked. It is not something that availity reactstrap validation provides but we have a workaround. It is not very pleasant but it gets the work done.
import React, { Component, Fragment } from "react";
import {
Button,
} from "reactstrap";
import { AvForm, AvField } from 'availity-reactstrap-validation';
export default class FormsUi extends Component {
constructor(props) {
super(props);
this.state = {
validateFromSubmit: false, showAjaxError: false
};
}
usernameValidate = (value, ctx, input, callback) => {
let thisForm = this.form;
if(this.state.showAjaxError) {
// showing ajax error and setting it false for next validation
this.setState({ showAjaxError: false });
return "Ajax validation failed";
}
if (this.state.validateFromSubmit) {
console.log("validating username");
// cancel pending 'network call'
clearTimeout(this.timeout);
// value needs to be validated by backend
console.log("value : " + value);
// simulate network call
this.timeout = setTimeout(() => {
// after network call ends, we are setting validateFromSubmit to false since it needs to be set true only with onValidSubmit
this.setState({ validateFromSubmit: false });
if (value !== "gogo") {
// if value is not gogo we assume ajax verification failed so setting show error true
this.setState({ showAjaxError: true });
thisForm.validateInput('username');
} else {
// if none of these above conditions true, code reaches here
this.allValidationsDone();
}
}, 500);
return;
}
if (ctx.username === "") {
return "Username can not be empty";
}
return true;
}
allValidationsDone = () => {
console.log("All validations done");
}
onValidSubmit = (event, values) => {
//setting the validateFromSubmit true so usernameValidate function can validate the ajax part
this.setState({ validateFromSubmit: true });
this.setState({ values });
//calling form ref to validate username
this.form.validateInput('username');
};
render() {
const { errors, values } = this.state;
return (
<Fragment>
<AvForm ref={c => (this.form = c)} onValidSubmit={this.onValidSubmit}>
<AvField label="Username" name="username" validate={{ async: this.usernameValidate }} />
<AvField label="Email" name="email" required />
<Button>Submit</Button>
</AvForm>
<br />
{errors && errors.length && Errors: {JSON.stringify(errors, null, 2)}}
{values && Values: {JSON.stringify(values, null, 2)}}
</Fragment>
);
}
}
thank you for your help.
Hello, I have a question. After I log in, on a url page, I refresh the current page. The menu bar on the left is how to set the selected state of the current page.
Hi,
We could not fully understand what you asked, active state of the menu items should be set by itself.
You should check src/containers/Sidebar/index.js file setSelectedLiActive function.
You may check this on demo pages. http://gogo-react.crealeaf.com
Regards.
The secondary menu is when the page is refreshed. Not selected. How to set the active value when the secondary menu is refreshed.
In other words. const selectedlink = document.querySelector(".sub-menu a.active");, the value of this selectedlink is always null. I don’t see any difference from the example.
My sidebar data is requested from the api. In other words, in the constructor of Sidebar.js, go to the ajax request.
Hi,
Thank you for stating that you are doing an async request. I think the problem is, all the necessary functions are called before your menu rendered since rendering waits for the ajax call.
I assume you are getting the data from an api and putting it in state and rendering from state. After your ajax request complete and data is in the state please call following functions to set active items.
this.handleWindowResize();
this.handleProps();
this.setSelectedLiActive();
Regards.
感谢你的帮助。
别客气
Hello there. Still the problem before. What I am thinking about now is to execute the asynchronous request in componentDidMount to modify the leftMenu in props, and then in componentDidUpdate, use this.handleWindowResize();
this.handleProps();
this.setSelectedLiActive(); Renders the selected menu option. However, I don’t know why this is an infinite loop.
Hi,
You should not use componentDidUpdate without a condition. In your case it calls functions to change the state and then called again since the state has changed. https://reactjs.org/docs/react-component.html#componentdidupdate
I have tested our earlier suggestion with a timeout and it seemed working. Please provide us your code so we can look into it.
Regards.
componentDidUpdate(prevProps) {
console.log(this.props.leftMenu, prevProps.leftMenu);
if(this.props.leftMenu !== prevProps.leftMenu) {
window.addEventListener("resize", this.handleWindowResize);
this.handleWindowResize();
this.setSelectedLiActive();
}
if (this.props.location.pathname !== prevProps.location.pathname) {
this.setSelectedLiActive();
this.toggle();
window.scrollTo(0, 0);
}
this.handleProps();
}
componentDidMount() {
//Asynchronous api request sidebar data using redux-saga
this.props.getApiMenu();
}
That is great, thank you for taking time and sharing your solution.
Regards.
Hello, I want to access this component of the chat room. Is it possible to recommend a websocket package in npm.
Hi,
We have not actually implemented a chat room and can not suggest a direction. Created the interface since everybody was doing so:)
Regards.
Hello,
First of all thank you for this beautiful project.
I want to add a menu item without a submenu. When I clicked this menu the first time, it works correctly and the submenu page does not open. After clicking on a menu with a sub-menu, an empty sub-menu page opens when I click the menu without a sub-menu. Can you help with this?
Thanks.
Hi,
Thanks for your nice comment, hope you keep enjoying our theme.
As for the question, please drop us a line at support@crealeaf.com so we can send you an example project with a menu containing a main menu item without sub items.
Regards.
Simply beautiful! Do you have (and share) the design files?
Hi,
Thanks for your nice comment.
We used Photoshop only to design some of the pages to create the concept and decided not to include them since people might expect psd file for every page.
Regards.
How to combine line and bar chart into a mix chart? i try using chartjs
Hi,
Thank you for the purchase.
Have you take a look at this: https://www.chartjs.org/docs/latest/charts/mixed.html
yes, i saw. I was thinking which file u did for the changes, is it chartconfig.js? realise all the charts are base on chartjs, are there plans to use other libraries like react chart or d3?
Charts are made with help from two files. One is as you have noticed constants/chartConfig file which contains theme and data of the chart. Other file is components/Charts/index.js and this file contains custom plugins and new chart types which created by extending default charts.
We have checked other libraries as you have mentioned and decided that the most complete and future rich one is Chart.js. We also needed a library to support shadows and opacity. Chart.js is canvas based and has everything we need so we did not want to include any other library.
Regards.
Can i know how to make the progress bar vertical as now all are horizontal type?
Hi,
The progress bars we used are Reactstrap’s and both Reactstrap and Bootstrap does not support vertical bars so we can not suggest anything at this point. You should find an online library or implement your own solution.
Regards.
I can’t see a demo unless I register? Is this for real? 
Ofcourse not, just click the login please. Regards.
Hey, This looks good there but I am having trouble with ‘side nav menu’ documentation. It confused me.
I am trying to create a parent menu item named ‘business leads’ which is directly clickable (no sub menu) and I want to display ‘forms’ page given by you (which is under ui/forms). I followed your documentation but its throwing 404 error. I tried copy pasting and creating folders, updating switch under index.js does not work.
Here are my 2 quick questions/requirements: 1. Can you guide me in creating a main parent menu item ‘business leads’ and when I click on it it should go to ‘forms’ page. Can you let me know steps to add code and what folder I need to copy paste.
2. Repeat the same requirement but this time ‘forms’ will be displayed after I clieck on a sub-menu item ‘business leads sub-menu’. What’s the code for this and what do I need to copy paste or create folders for this?
I really hope your documentation would have been clear but I am sorry it is incomplete.
Thanks
Hi,
You are right, it is a little confusing since main menu, sub menu, menu labels, routing and creating the page is all related to each other. An error with one of them can result with 404. Main project menu is also kind of crowded.
Here is what i understand from your requirements:
Main-Menu-1 => Goes to a page(Lets say Test Page)
Main-Menu-2
Sub-Menu-2-1 => Goes to same Test Page
If above assumption is correct, please drop a line to support@crealeaf.com so we can configure the starter project with these menu items and send it to you.
Regards.
Hi,
There was a problem with my example since menu can not set active class correctly when there are two same pages. Here is what we will send:
Main-Menu-1 => Goes to a page(Lets say Test Page)
Main-Menu-2
Sub-Menu-2-1 => Goes to another Test Page
Regards.
Hi,
Do you plan to release an Angular version of this beautiful theme?
Hi,
Thank you for your interest and kind words. We are currently working on a Vue version and after that we will focus on Angular.
Regards
Hello,
It’s been a while but just wanted to let you know that Angular version of the template is finally available.https://themeforest.net/item/vien-angular-admin-template/25817698
Cheers.
Hi, Are you planning to provide create-react-app version of that theme?
Hi,
I think it is not quite possible at this point since the theme structure evolved differently than create-react-app.
Regards.
Hello, I saw a .elsintrc file in the project documentation but it didnt come with the download. can I have the copy of the .eslintrc that comes with the project?
Thanks in advance
Hi,
We have not configured Eslint since it sometimes get problematic with Visual Studio Code but here is the content of the file:
{
"extends": "react-app",
"rules": {
"react/no-deprecated": 0
}
}
Regards.
Hi, I bought this template a couple of weeks ago. I would like to recommend this template to other people. You did a good job. However, it doesn’t have any test cases. Could you add the test cases into the project? Also, can you add date into the changelog? Thank you.
Hi,
Thank you for the purchase and we are glad that you liked it so far.
As for the tests, i must admit that we are not very experienced about tdd. We also need to be carefull deciding about where to invest our time. So our current plan is to add a media library and a landing page.
You are right about the changelog, we even forgot to add the last one to the list. We will fix it asap. Here are the dates of versions.
Version 1.0.1 – September 29, 2018
Version 1.0.2 – October 8, 2018
Version 1.1.0 – October 30, 2018 (Current)
Regards.
Hello, author. I want to remove the multi-language plugin, the other files have been removed from this code, and no error is reported. When I try to modify /src/containers/TopNav/index.js to become export default connect( mapStateToProps, { setContainerClassnames, clickOnMobileMenu, logoutUser, changeLocale } ) (TopNav) This code is when. The program reports an error: Index.js:122 Uncaught TypeError: Cannot read property ‘messages’ of undefined At ProxyComponent.render (VM13119 index.js:122) At ProxyComponent.hotComponentRender (react-hot-loader.development.js:622) At ProxyComponent.proxiedRender (react-hot-loader.development.js:637) At finishClassComponent (react-dom.development.js:14299) At updateClassComponent (react-dom.development.js:14262) At beginWork (react-dom.development.js:15087) At performUnitOfWork (react-dom.development.js:17809) At workLoop (react-dom.development.js:17849) At HTMLUnknownElement.callCallback (react-dom.development.js:149) At Object.invokeGuardedCallbackDev (react-dom.development.js:199)
I am a recact beginner. Where I also quoted this code to cause an error, I used the Gogo-React-Start-With-Auth version.
Hi,
Please reach us from support@crealeaf.com or from the contact form on our profile page.
We can send you modifed version of TopNav file.
Regards.
I have sent a message, have you received my mail?
Hi,
Yes we received and sending a link to you to donwload Gogo-React-Start-With-Auth with a single language option.
Regards.
Sorry, I still have a question. Is firebase convenient for development? I saw package.json, except for firebase, there seems to be no other interactive plugins? I tried to read the firebase documentation because my country could not access and use all of Google’s services, so firebase is not my right choice. Please author me to recommend a plugin for api requests. (I have been trying to understand this template with your ideas)
Hi,
I don’t think we can explain the Firebase issue more than we did before so here i am pasting it below.
You may write your own backend and use Axios to make api requests from react easily.
Here is our earlier message in case you have missed it:
Main idea here is using backend only as a web service. React app makes calls to this service and performs CRUD operations. Backend operations is out of scope of this theme since it is up to user who might want to impelement it via c#, java, php or even javascript. But i will try to explain it briefly.
We included Firebase login api to serve you as a starting point. You can of course write your own server side implementation and alter the react source to fit your needs.
You should work on Gogo-React-Start-With-Auth project while figuring this out since it is a starter project and compiles fast.
Here is where to start. src>redux>auth>saga.js This file contains methods to call the web services and has a method with a name loginWithEmailPasswordAsync. This method passes user credentials to auth.signInWithEmailAndPassword which is a Firebase method to invoke a service call. You should implement your own code here to make the frontend backend connection. You should use included method fetch method or an external library like axios to send user credentials and receieve an object in return. For example { user “profileName” :”John Doe”, uid } } Or if the login is not successful an error object like this { “message” : “Login failed” } Then loginWithEmailPassword method will write user info to local storage and call loginUserSuccess.
That is basically it. You may also find some online examples throughout the web.
Regards.
Thank you for your answer, I think I still need to learn to use it.
Dear gogo Author: Hello, now routing prefix after the template has all login / app / xxx / xxx this, I want to remove the app. For example, the link after my login is /user/create; /user/index; /category/create … such a link, I removed the app in the route in /src/containers/App.js, the code is as follows: ``` Class App extends Component {
Render() { Const { location, match, user } = this.props; If (location.pathname === ’/’ || location.pathname === ’’) { Return (<Redirect to={defaultStartPath} />); }
Return ( <Fragment> <NotificationContainer /> <Fragment> <Switch> <InitialPath Path={`${match.url}`} authUser={‘asd’} Component={MainApp} Exact /> <Route path={`/login`} exact component={login} /> <Route path={`/forgot-password`} exact component={forgotPassword} /> <Route path={`/error`} exact component={error} /> <Redirect to=”/error” /> </Switch> </Fragment> </Fragment> ); } } ``` Also modify /src/routes/index.js as follows: ``` Class MainApp extends Component { Constructor(props) { Super(props); }
Render() { Const { match, containerClassnames} = this.props; Return ( <TopNav history={this.props.history} /> <Sidebar/> <main> <Switch> <Route path={`${match.url}index`} component={index} /> <Route path={`${match.url}gogo`} component={gogo} /> <Route path={`${match.url}two`} render={() => ??? } /> <Redirect to=”/error” /> </Switch> </main> ); } } ``` I type localhost:3000/two in the address bar to always jump to error. How can this link be implemented?Hi,
We are looking into this and will get back to you on Monday (GMT+2)
Regards.
Hi,
We have sent an email with an example project and screenshots.
Regards.
Hello, I saw the react-saga middleware used in the template. I noticed that in the current demo example, axios or fixed temporary data demos are used in the ui component. Now, I want to use the reducer data in the page. How to get it
Sorry I found the solution, I think I should map the state to the current component.
Hi,
That is great, there are lots of examples in theme about Saga usage.
Regards.
Hi Team,
I want to configure login with JWT token with .NET-CORE Api. Can I just modify firebase auth login structure or should I write it from scratch.
Thank you
Hi,
We have included Firebase login, register and logout only as a starting point. If you take a look at the src/redux/auth/saga.js file, you may see it is not actually controlling user authorisation.
We are planning to add Auth0 but currently you need to make your own implementation.
Regards.
Hi, I’m getting this error starting, can you help me?
98% after emitting SizeLimitsPluginERROR Failed to compile with 1 errors 21:50:59error in ./src/index.jsSyntax Error: SyntaxError: Unexpected token (9:6) > 9 | <MainApp />, | ^ 10 | rootEl 11 | ); 12 | };
@ multi (webpack)-dev-server/client?http://localhost:3002 (webpack)/hot/dev-server.js babel-polyfill react-hot-loader/patch ./src/index.jsHi,
Thank you for the purchase and sorry for the installation trouble.
We have experienced this problem with only one other user. We have tried to recreate the problem with different computers(mac and windows) and different node&npm versions but we could not. It seems related to Babel not understanding the React syntax but since we could not recreate it, we don’t have a solid solution. Searching for it also did not help because the problem seems 2-3 years old and most of the suggestions are already implemented in the project.
We believe that this might be computer related. Older installations or global packages can be the cause ot the problem. Please try to install it on a clean computer if you can.
That is only logical support we can provide for this problem at the moment. If you can not make it work, you may have a refund if you like.
Regards.
Hi,
One of our users had this exact problem and he managed to find the source of it.
In his case, it is about files which start with a dot being hidden by his os and failing to copy them.
In project directory there should be a ”.babelrc” and ”.eslintrc” files and the problem occurs when ”.babelrc” file is missing. Maybe you should also check it when you have time.
Regards.
Hi I really want to buy your template but I absolutely need the landing pages also. Can you promise me to send me those pages after the buy? Anyways you made a beautiful job Sincerely
Hi,
Thank you for your interest and kind words for our template.
It is in our plan to add landing pages but i am sorry that i can not let you buy it base on a promise. It is against Envato rules. It can also take longer than we think, you may not like when it is done or any other problem can occur.
Regards.
Hi,
Landing page is available if you are still interested.
You may check it under Landing Page menu item: http://gogo-react.crealeaf.com/
Regards.
Hi I wanna ask u if u can provide the RTL features on ur dashboard pls let me know as soon as possible thanks best regards ABDELHADI
Hi,
It is in our plans to add rtl support but i must say it is not currently our priority. We will need to complete media library and landing page first. Then we will work on rtl version. And i am sorry that i can not provide a timeline for this updates.
Regards.
Your website is doen “server not found” cannot really view dhe demo
Hi,
Sorry about the problem, it is something about our hosting provider. We are waiting for them to fix.
If you would like to know when it is up, we can ping you with another reply.
Regards.
Hi, I’m not able to view the documentation. This is the error that I’m getting: gogo-react-web.crealeaf.com’s server IP address could not be found.
Hi,
Thank you for your understanding and warning, it indeed looks like a problem with server. We will inform you as soon as the problem is solved.
Regards.
Hello!
I would like to change the initial route of the app, but I do not know how to do it Currently it starts at http://localhost:3001/app/gogo/start I would like it to be something like http://localhost:3001/newname
Thank you!
Hi,
Thank you for reaching out, we have forgotten adding this to documentation and now realized that we could have made it a little more dynamic. Sorry about these.
As for the solution, here is what needs to be done:
src > containers > App.js
line :45
if (location.pathname === '/' || location.pathname==='/newname'|| location.pathname==='/newname/') {
return (<Redirect to={defaultStartPath} />);
}
line: 57
<InitialPath
path={`${match.url}newname`}
authUser={user}
component={MainRoute}
/>
And menu links should also be defined as /newname/newitem in sidebar.
If you have a problem with implementaion, please reach us so we can provide further assistance.
Regards.
Hello! First, thanks for the quick return!
I tried to implement the changes as presented, but it did not work. When I change to “newname” and start the application, it automatically directs itself to the address http://localhost:3000/error I confess that I am fairly new to react and am having difficulties that may seem silly.
I found ’/app/gogo/start’ reference also in the constants/defaultValues.js and other stuff in routes/index.js. But, i do not really know how to do it.
Anyway, if you can give me a new guide to do this, thank you.
Hi,
That is okay, we are here to help you to get started.
No worries, that is okay to see error page since application still redirects to ”/app” route and we changed it with ”/newname”. At this point you should be able to open a page with directly entering the url like: http://localhost:3002/newname/gogo/start.
If putting the url directly works, then you should change the defaultStartPath variable at defaultValues.js file as you have mentioned.
If this also goes well, then you will notice that clicking the links from the menu redirects to error page. containers/Sidebar/index.js file is where you should make the necessary changes to NavLink items.
That is basically it. If you continue to have problems please drop us a line to support@crealeaf.com so we may send you start project with changed default path.
Regards.
Survey component is firing an error at the moment when I add multiple answer options like checkbox or radio buttons for a question.
The error is: Encountered two children with the same key, `1`. Keys should be unique so that components maintain their identity across updates.
I think this error is coming from SurveyQuestionBuilder component. The same error is happening on your online demo template, just try to add multiple radio or checkbox buttons.
Hi,
Thank you for your interest in our template.
As for the question, the applications are there for a proof of concept. Their purpose is to provide a theme to work on so they are not completely functional.
The error you get is a very common React error which occures when two or more items have same id rather than unique ones.
I think it is a good starting point to take a closer look at addQuestion function in survey/details.js and addAnswer function in SurveyQuestionBuilder component. nextId is created by adding one to largest id so they are not exactly unique. As i mentioned earlier, this is only for demo purpose.
How to make them unique is all up to you. You can implement a logic for answers which uses surveyid+questionid+answerid as an id or you may check uid libraries for react at github.
Regards.
Can I use components in my existing app? Like reactstrap for example, just package without redux etc. If yes – can you provide guide?
Hi,
Menu, authorization and applications require redux.
To use other components and libraries, it is required to include our sass files and add packages. That is all.
If you decide to use our template we can of course lend a hand when you have a problem.
Regards.
