684 comments found.
Hi~
Fix this bug please,it make our web fail. The photo shows the bug which we saw. https://photos.app.goo.gl/cEhT9pzuNoi7aJ7a9Thank you^^
Hi,
Sorry for the problem, please elaborate the problem since we can not reproduce it.
It would be helpfull if you tell us what is your way of using Glide Component. Is there multiple ones, you get your data async, can you see the error in original template?
Hi~
At same page in our webpage first time, we called 「GlideComponent」when this.state was changed https://photos.app.goo.gl/bcVsg9zy3DMgJWrW8
second time, we called 「GlideComponent」again when this.state was changed. https://photos.app.goo.gl/gVHt6FUe2UnQVd2x9
then … show Error : https://photos.app.goo.gl/Zax88B8oKVJYnZ8f8
Hi,
I have created a test environment and changed state with a timeout but could not replicate the error but I have noticed some other problems and fixed them. Please change below for “GlideComponent.js”, I am not sure if it solves the current problem of yours but it has a better approach to handle data change.
Let us know if you continue to get the same error.
(Pasting code here creates casing problems, you may get it below)
https://www.codepile.net/pile/QAoqoo8lI just installed the admin dashboard and i am missing the left navigation menu items for UI Components and Applications. I can access Applications from the top menu but all options 404. I am mostly looking for the Chat App. Can you help me understand why those are not loading?
Hi,
It’s quite a strange problem unless you are using one of the starter projects. If you are having the problem with Gogo-React project and not the start ones please let us know.
That was the problem. Thank you. I was starting the wrong project. Can you give me a suggestion on how to move the functionality of just the chat application into Gogo-React-Start-With-Auth and remove anything from Gogo-React-Start-With-Auth that would not pertain to Chat or Auth?
Hi,
I must say there is not a fast way to do it. You need to look into the imports of chat page and move parts from redux, containers and etc. All the content of the component folder is the same with the projects so you will not need to move anything from there. You may delete unnecessary ones if you want but they will not included in the build if they are not used.
I was able to figure it out. You guys have designed this very well. Nice Job!
Thanks, nice to hear you liked it.
Cheers.
Hi, how can I make the drop down menu in the navbar disappear when a user clicks on one of the items in the menu? Currently the menu stays on top. The implementation I’m talking about is in Topnav.EasyAccess.js. Thanks!
Hi,
You may use Dropdowns as a controlled component instead of UncontrolledDropdown. Here is the usage: https://reactstrap.github.io/components/dropdowns/
As a side note, support is only available for purchases made from Theme Forest. Envato Elements downloads don’t include support. Here is the policy: https://help.elements.envato.com/hc/en-us/articles/360000629166-Item-Support-on-Envato-Elements
Cheers.
I’ll give it a try, thanks! The theme was purchased by the company I work for.
Hello dear, Hope that you are ok? I have a simple question please i need to create a “reactTableCard” with checkboxes and get the selected all value with the “handleCheckChange” i can create a checkbox in the header and make a row with it in data columns like this : const dataTableColumns = [ { sortable: false, Header: <CustomInput className=”itemCheck” type=”checkbox” label=”” checked={isSelected}
/>
,
accessor: "",
Cell: props =>
<CustomInput
className="itemCheck"
type="checkbox"
label=""
/>
},
{
Header: "Identifiant",
accessor: "id",
Cell: props => {props.value}
},
{
Header: "Libellé",
accessor: "username",
Cell: props => {props.value}
},];I’m using my own data with mangoDB, I can display my information contained in the database but i have a problem with checkboxes it doesn’t select any of them even if i want to select one them i can’t so can i have a solution about this please.
i’m trying with bestSellers it’s the same so here my component : <BestSellers key={`todo_items`}
data={items}
dataTableColumns={dataTableColumns}
handleCheckChange={this.handleCheckChange}
isSelected={
loading ? selectedItems.includes(items) : false
}
/>Thank’s for your help
Hi,
We are very well, thanks, and hope you are as well.
As for your question, I could not work on your code mostly because the data is not available. Also the comment is somehow fractured.
However, I have modified the best sellers and managed to create check and check all functions. Hopefully you will be able to implement it to your needs. Here is the output: https://i.ibb.co/GtdJPfR/checkall.jpg
Here is the code: https://justpaste.it/4wz0q
Let me know if this does not help. Cheers.
import React, { Component } from "react";
import ReactTable from "react-table";
import "react-table/react-table.css";
import { Card, CardBody, CardTitle, CustomInput } from "reactstrap";
import Pagination from "../../components/DatatablePagination";
import data from "../../data/products";
class BestSellers extends Component {
constructor() {
super();
this.state = {
selectAll: false,
data: [],
checked: []
};
this.handleChange = this.handleChange.bind(this);
this.handleSingleCheckboxChange = this.handleSingleCheckboxChange.bind(
this
);
}
handleChange = () => {
var selectAll = !this.state.selectAll;
this.setState({ selectAll: selectAll });
var checkedCopy = [];
this.state.data.forEach(function (e, index) {
checkedCopy.push(selectAll);
});
this.setState({
checked: checkedCopy
}, () => {
console.log(this.state.checked);
});
};
handleSingleCheckboxChange = index => {
console.log(index);
var checkedCopy = this.state.checked;
checkedCopy[index] = !this.state.checked[index];
if (checkedCopy[index] === false) {
this.setState({ selectAll: false });
}
this.setState({
checked: checkedCopy
}, () => {
console.log(this.state.checked);
});
};
componentDidMount() {
const dataEdited = data.slice(0, 12);
var checkedCopy = [];
var selectAll = this.state.selectAll;
dataEdited.forEach(function (e, index) {
checkedCopy.push(selectAll);
});
this.setState({
data: dataEdited,
checked: checkedCopy,
selectAll: selectAll
});
}
render() {
return (
<Card className="h-100">
<CardBody>
<ReactTable
data={this.state.data}
defaultPageSize={6}
showPageJump={false}
showPageSizeOptions={false}
PaginationComponent={Pagination}
columns={[
{
sortable: false,
Header: (
<CustomInput
type="checkbox"
id="checkAll"
label="Check All"
onChange={this.handleChange}
checked={this.state.selectAll}
/>
),
Cell: row => (
<CustomInput
type="checkbox"
id={"check"+row.index}
label=""
checked={this.state.checked[row.index]}
onChange={() => this.handleSingleCheckboxChange(row.index)}
/>
),
sortable: false,
filterable: false
},
{
Header: "Name",
accessor: "title",
Cell: props => <p classname="text-muted">{props.value}</p>
},
{
Header: "Sales",
accessor: "sales",
Cell: props => <p classname="text-muted">{props.value}</p>
},
{
Header: "Stock",
accessor: "stock",
Cell: props => <p classname="text-muted">{props.value}</p>
}
]}
/>
</CardBody>
</Card>
);
}
}
export default BestSellers;
Merhabalar, sorum su olacak, menu iconlarinda dinamik bir deger kullanmak istiyorum, su an kullandigim iconda default olarak bir deger var (o da 3) bunu nasil dinamik hale getirebiliriz, veya bu datayi nereden aliyor icon.
Merhaba,
Malesef soruyu tam olarak anlayamadım. Menü derken sol menüyü değil de sağ üstteki kısmı kast ediyorsanız 3 değeri şu anda statik olarak “src/containers/navs/Topnav.Notifications.js” dosyasındaki “TopnavNotifications” componentinden geliyor.
Soyle aciklayayim, kullandiginiz iconlarin bazilari uzerinde rakamlar var, mesela ‘iconsminds-basket-items’ uzerinde 3 yaziyor default olarak. Bu data dinamiklestirilebilecek bir data midir?
Tesekkurler.
Şimdi daha net anladım. Malesef iconlar vektör olduğundan üzerlerinde dinamik düzenlemeler yapılamıyor.
Alternatif olarak absolute bir tag ile istediğiniz rakamı ekleyebilirsiniz ve şöyle bir çıktısı olur: https://i.ibb.co/GkJFSRG/icon-8.jpg
Bu şekilde bir kullanım işinize yararsa “src/containers/navs/Sidebar.js” dosyasındaki ilk map fonksiyonunun NavLink döndürdüğü kısmı(362. satır civarı) aşağıdaki şekilde düzenleyebilirsiniz. İstediğiniz icona göre düzenleme yapmanız için style kısmını inline olarak bıraktım.
<NavLink
to={item.to}
onClick={e => this.openSubMenu(e, item)}
data-flag={item.id}>
<i classname="{item.icon}" />{' '}
<span style="{{position:" fontsize:="" right:="" top:="">8</span>
<IntlMessages id={item.label} />
</NavLink>
İyi çalışmalar.
Hi Author,
We are using Okta authentication while login ( Okta is third party authentication service). We are facing issue when deployed react application to the tomcat server. When I am login we route to the /implicit/callback as it sets the keys then after authenticating it routes to error page instead of routing it to SecuredRoute(/app), this happen when I login first time but when I refresh then it routes to correct page, even though if I logout the application and login it again then it works fine on same browser. But if I am logging again on new browser page then this issue again repeats. Same code on local host works fine, only issue on after deploying on server
import { Security, SecureRoute, ImplicitCallback } from ”@okta/okta-react”;
<Router basename={process.env.REACT_APP_ROUTER_BASE || ''}>
<Security auth={auth}>
<Switch>
<Route path="/" exact component={main} />
<Route path="/error" exact component={error} />
<Route path="/implicit/callback" component={ImplicitCallback} />
<SecureRoute path="/app" component={app} />
<Redirect to="/error" />
</Switch>
</Security>
</Router>As okta store our keys on browser local storage where I notice that when application is running on local host then in localstorage then there is okta_cache_storage but when application running on server then okta_cache_storage is missing.
Thanks
Hi,
Unfortunately, we are not experienced neither with auth method nor with the server so we can not provide a proper guidence about your problem.
It is good to see that you have narrowed down the problem and I may suggest something to narrow it down a bit more. You have mentioned that it works fine on localhost but I guess you are reffering to dev build so if that assumption is correct then problem might be related to prod build or server. You may use “serve” package to quickly create an http server with node and run your prod build. If it runs without a problem, you will need to look for the problem at your server. If it does not, then problem might be related to prod build.
You may find information for serve package if you require here: https://create-react-app.dev/docs/deployment
Hi admin, i had realized that i bought the wrong version. Actually i was looking to buy this jquery version https://themeforest.net/item/dore-jquery-bootstrap-4-admin-dashboard/22604108 for my web template. Is there any way i could switch my product to this jquery version please?
Delon
Hi,
We would accept your refund request after you purchase jquery version.
Regards.
Hi,
Thanks for accepting my refund, may i know what are the process towards it?
Regards
Hi,
After purchasing jquery version, you may use this page to create your refund request for Gogo: https://themeforest.net/refund_requests/new
Hi,
Please help.
I bought the React bootstrap 4 admin dashboard template but I am not able to set it on on Visual studio. Creating an app for React, Redux and C#.
Please see log below for why is wont compile.
Failed to compile
./src/assets/css/sass/themes/gogo.dark.blue.scss (./node_modules/css-loader/dist/cjs.js??ref-6-oneOf-5-1-6-oneOf-5-3./node_modules/resolve-url-loader??ref
./src/assets/css/sass/themes/gogo.dark.blue.scss)
Hi,
Please try installing the project with using only command line and without Visual Studio so we can see if it is related to VS or Node.
Many thanks. The project works after installing nodejs 10.16.3 LTS version
Lastly, I can’t seem to find any layout for landing page, could you share one please?
Hi,
Nice to hear that it is working now.
As for the landing pages, they are not available anymore since Envato made us remove them.
Regards.
Can you please share privately?
Unfortunately we can’t share it, it is not included in the theme anymore.
Ok thanks
Hi I purchased the react latest version but been having same issues after several attempt to run the app.
Error:
Microsoft.AspNetCore.SpaServices:Information:
./src/assets/css/sass/themes/gogo.dark.purple.scss (./node_modules/css-loader/dist/cjs.js??ref-6-oneOf-5-1-6-oneOf-5-3./node_modules/resolve-url-loader??ref
./src/assets/css/sass/themes/gogo.dark.purple.scss)
Please help
Hi,
It looks like a nodejs issue. Please try switching to 10.16.3 LTS version.
After changing the version, please delete node_modules&package-lock.json and try installing again.
Let us know if this does not help.
Hi!
I’m looking to pick up this Template, but for what I need it for Calendar functionality is quite important…
Things like full screen calendar with events, day planning, hour by our and adding new events via popups are important.
Do you plan on adding more functionality for this soon?
Hi,
Thank you for your interest in our template.
Unfortunately, it is not in our short or mid term plan to provide a calendar app.
Cheers.
Hello,
I have issue with using firebase with redux-saga. How can i import the loginWithEmailPassword function to the login page and use it. Can you please help me with that.
Thank you.
Hi,
Login.js is already connected with redux and you may call this.props.loginUser as it is called in the file to reach loginWithEmailPassword in auth/saga.js
Regards.
Hello. I purchased the wrong version by mistake, I meant to purchase the NodeJS version, not the react version. Can you give me a refund? Thanks.
Hi,
Unfortunately, it is not considered as a valid reason for refund neither for Envato nor for us. You may check refund policy here: https://themeforest.net/page/customer_refund_policy
If you don’t think that this is not just, you may also reach Envato to investigate the problem.
Kind Regards.
That’s really unprofessional. I’ve already purchased the other version as well. Are you really not going to refund me?
I am sorry that you feel this way. We are trying to be professional by following the rules set by Envato and guiding you to a possible solution with contacting Envato staff to resolve the issue. We don’t see what is your purchases of our items unless you open a refund request. As a side note, if you have not downloaded item yet, please let us know since we accept them without any questions.
I am confident enough that we have done our part to prevent mistakes by putting the library/framework name at our title and previews. We have also added a big and even a repulsive purchase warning at our item detail page which clearly state what is it the template and what is it not. Here is the one at Gogo-React: “This item is not a HTML/jQuery template. Template uses React.js, Redux and needs Node.js, Webpack to compile”
You might be surprised what kind of bad experiences we had with the users. Asking for refunds with not eligible reasons, canceling the payment from their banks, sharing the template in forums. We even witnessed some people selling our template at their website. What would be the best approach to these time-consuming problems other than following the official guidelines. If you have an answer please let us know.
Well, hopefully you may see the problem with our point of view. If you still think that you should get the refund you may open a refund request with below link. We will approve it.
https://help.market.envato.com/hc/en-us/articles/202821460-Can-I-Get-A-Refund-Cheers.
Thanks for the well thought out response. I understand your position, I don’t think that you’re doing anything incorrectly. It is true that your listings are well named etc and with clear warnings, it was by no mistake of yours that I purchased the wrong item, I admit that’s fully my mistake. I will apply for a refund as I know my intentions are not ill mannered, and I will delete the download from my computer. I guess all you can do is trust that I’m not a fraudster. Thanks.
Hi, I installed the packages with npm install and am using VS Code. In VS Code, however, I’m getting the following error: ESLint: Failed to load config “react-app” to extend from. Referenced from: /Users/MoeHac/Projects/React/Templates/Gogo-React-Admin-Dashboard-4.2.1/Source/Gogo-React/package.json. Please see the ‘ESLint’ output channel for details.
Also, have any template for a landing page?
Hi,
Please try installing a fresh copy with using only the terminal so we may know if the problem is with the editor. Looking into the error at ‘ESLint’ output channel also might help. And final suggestion, please make sure you have LTS version(not current) of Nodejs.
Unfortunately, we don’t have landing pages.
Let us know if this does not solve the problem.
I am using GoGo 3.2.1, I see in the newer version you have rounded corners, what would be the best way to implement this in my modified version?
Hi,
Please locate main sass file of the project at “src/assets/css/sass/_gogo.style.scss” and find the section commented with /* 43.Rounded */.
Copying this section to your sass file and adding “rounded” class to body of the “public/index.html” file should do the trick.
Cheers.
Would it be a challenge to remove Firebase completely and replace with Auth0 or Azure AD B2C as authorization mechanism? If not, we will be adopting this theme. Thank you.
Hi,
Sorry for the late reply. I see that you have purchased the template. We don’t have any experience with Azure but hopefully docs section should provide you some guidence: https://gogo-react-docs.coloredstrategies.com/docs/guides/changing-auth-api
Cheers.
I have having issues when selecting only two checkbox through defaultValues it is selecting all the checkbox.
Hi,
Unfortunately, you need to purchase the item from ThemeForest to get support.
Cheers.
Hello,
First of all,I would like to Thank you for making such a beautiful UI.Hope you will keep on adding and updating new things in this template.
Can you tell me how to open the sub menu on hover of the main menu and hide it by default.
Thanks, Om Thacker
Hi,
Thank you for your kind words, I hope that you enjoy working on the template.
As for your question, unfortunately currently there is no quick way to make menu work with hover but you may set “defaultMenuType” variable to “menu-sub-hidden” at “src/constants/defaultValues.js” file to make sub menu hidden by default.
Cheers.
Hi, I just purchased this template to use it for our application. I found it pretty awesome when I saw it. But my react developers are very much fresh towards react and the structure for this project is quite difficult for them to understand and they won’t be able to work on this template for sure. I request you to kindly process me the refund as we will not use this template.
Thanks
Hi,
Thank you for the kind words, we really appreciate it.
As for your request, unfortunately it is not a valid one to get refund. You may read Envato refund policy here: https://themeforest.net/page/customer_refund_policy
To prevent this kind of problems, we have listed plugins that we use at item detail page. We have also added project structure, explained the plugins and provided information about handling state and routes at our documentation. We have added a link to documentation in the template preview so buyers may check before their purchase.
Thank you for your understanding.
Hi there!
Awesome work with the theme.
Since you haven’t connected the login with the Dashboard, done with the saga generator. so far so good.
I was wondering how to show spinner in navigating from login to dashboard. As i’m fetching from Api in Saga file. For obvious reason it’ll take time.
So how can i show spinner in between.
Thanks so much.
Hi,
Thank you for your kind words, I hope you enjoy working with the template.
As for your question, you are right about the need for a spinner. We have missed that one.
The login page receives a “loading” prop and when loginUser is called it is value set to true. Below is the login page with a spinner on the login button we have implemented by using this prop.
import React, { Component } from "react";
import { Row, Card, CardTitle, Form, Label, Input, Button } from "reactstrap";
import { NavLink } from "react-router-dom";
import { connect } from "react-redux";
import { loginUser } from "../../redux/actions";
import { Colxx } from "../../components/common/CustomBootstrap";
import IntlMessages from "../../helpers/IntlMessages";
class Login extends Component {
constructor(props) {
super(props);
this.state = {
email: "demo@gogo.com",
password: "gogo123"
};
}
onUserLogin() {
if (!this.props.loading) {
if (this.state.email !== "" && this.state.password !== "") {
this.props.loginUser(this.state, this.props.history);
}
}
}
render() {
return (
<Row className="h-100">
<Colxx xxs="12" md="10" className="mx-auto my-auto">
<Card className="auth-card">
<div classname="position-relative image-side ">
<p classname="text-white h2">MAGIC IS IN THE DETAILS</p>
<p classname="white mb-0">
Please use your credentials to login.
<br />
If you are not a member, please{" "}
<NavLink to={`/register`} className="white">
register
</NavLink>
.
</p>
</div>
<div classname="form-side">
<NavLink to={`/`} className="white">
<span classname="logo-single" />
</NavLink>
<CardTitle className="mb-4">
<IntlMessages id="user.login-title" />
</CardTitle>
<Form>
<Label className="form-group has-float-label mb-4">
<Input type="email" defaultValue={this.state.email} />
<IntlMessages id="user.email" />
</Label>
<Label className="form-group has-float-label mb-4">
<Input type="password" />
<IntlMessages
id="user.password"
defaultValue={this.state.password}
/>
</Label>
<div classname="d-flex justify-content-between align-items-center">
<NavLink to={`/forgot-password`}>
<IntlMessages id="user.forgot-password-question" />
</NavLink>
<Button
color="primary"
className={`btn-shadow btn-multiple-state ${this.props.loading ? "show-spinner" : ""}`}
size="lg"
onClick={() => this.onUserLogin()}
>
<span classname="spinner d-inline-block">
<span classname="bounce1" />
<span classname="bounce2" />
<span classname="bounce3" />
</span>
<span classname="label"><IntlMessages id="user.login-button" /></span>
</Button>
</div>
</Form>
</div>
</Card>
</Colxx>
</Row>
);
}
}
const mapStateToProps = ({ authUser }) => {
const { user, loading } = authUser;
return { user, loading };
};
export default connect(
mapStateToProps,
{
loginUser
}
)(Login);
Cheers.
Thank you for the reply. I have tried but it’s not working. Here’s the changes if i’m not wrong:
1) if ( !this.props.loading ){//-}
2) <Button> tag is updated.
Thanks
I have made changes for both login and registration but seems like it’s stuck for 2-3 seconds but no loading indicator. If i use the wrong credentials in my case ( using fetch ) i can see the response in inspect window but no loading meanwhile.
help me out here – Thanks
Thanks it worked like a charm.
there was a mistake in your code classname -> className thanks
Oh, sorry about that. I have tested the code and even included it in our source without problem.
Pasting here must have changed the case and it’s the first time we experience this problem. Glad to see that you have noticed it.
Cheers.
Problem #2: I have added notification in my login screen like this:
if (isSubmitting && this.props.error) { NotificationManager.error( this.props.error, “Login Failed!”, 4000, null, null, “filled” ); } else if (isSubmitting && this.props.loginState) { NotificationManager.success( “Login Successfull”, ””, 4000, null, null, “filled” ); }
in <Formik> Form. this is working fine but when i logout and without refreshing click the login button to re-login notification is shown 4 times out of the context. is it due to cache or something.
Thanks for the great help earlier.
I solved it! seems like i was using it in a wrong way.(i.e setting state after unmount component )
Problem #3: Css is not working at some points:
1) Validation errors: when i used it in login class they appeared to with the sharp corner instead rounded.
2) same is the case with notification.
Problem #2: Triggering action multiple times, now i have notification 4+ times everytime i render login or register. Is it related to (redux saga: takeEvery)?
face same problem: https://github.com/redux-saga/redux-saga/issues/502
Earlier Comment: I thought it was due to some conditional problem but it wasn’t.
Hi,
Sorry for the late reply but we are still looking into the problem and provide a decent solution as fast as we can.
Thanks!
Hi,
Sorry for the delay again, we took the weekend off.
We could not reproduce the problem about rounded corners. We have added validation and notification to the login page and all looks good. Please check the theme options on the right and make sure rounded is selected. You may also go ahead and add “rounded” class to body of public/index.html file.
We have not decided how to solve the saga issue yet but we will try to get back to you with a solution in a day or two.
Regards.
Hi,
We have created the login with validation and notifications. You may check here: https://gogo-react-dev.coloredstrategies.com
We have tested your case with login-logout and it looks fine. You may find logout at top right user dropdown to test. If this also looks fine for you, we may provide sources via email.
Regards.
thanks!
You are welcome, we have just completed the publishing the new version so you may download it.
Here are the changes: https://i.ibb.co/6tXfHYy/login-changes.jpg
Cheers.
Been playing about with this today and need some guidance.
In relation to auth and the below function, it should call the function regsierUser within src\redux\auth\actions.js and I need to adjust these to suit my firebase config ?
onUserRegister() {
if (this.state.email !== "" && this.state.password !== "") {
this.props.history.push("/");
}
}Could you explain the role of src\redux\actions.js also?
As a side note, the english text could do with a gramer tidy up. Happy to help with that if english isn’t your native lang
Hi,
We have not connected register user intentionally to prevent saving records to Firebase. You may check “src/redux/auth/saga.js” file for generator function implementations of register, login and logout and adjust them.
You may find Firebase configs at “src/constants/defaultValues.js” file.
“src\redux\actions.js” file contains string type values of the actions as constants to provide stability between action, reducer and saga files. You may search for “LOGIN_USER” throughout the project to see the usage in action, reducer and sage.
As for your help suggestion, you are right about that English is not first language of anyone in our team and we would be glad if you can provide corrections.You may reach us by support@crealeaf.com.
Let us know if you have additional questions.
One more thing.
Please download the item again to get Gogo-React-Start-With-Auth project. We have added it back.
