691 comments found.
Hi Team,
If will be very helpful, if you can provide some theme with react front-end and laravel back end and db with mysql or mongo.
Hi,
We prefer using backend as a service and don’t want to include technologies that we are not really familiar with. This approach is also better for creating much needed time for styling and adding extra layouts.
Cheers.
Hi, I spoke with the developer and he is planning to use Angular instead of React. Please could you swap this over?
Thank you
Kosala
Hi,
You may find Angular version here: https://themeforest.net/item/vien-angular-admin-template/25817698
All the best.
how can i stop the firebase connection? im using another database but GoGo is trying to connect to firebase with the default constants, how can i stop that request?
Hi,
Removing imports for ”/helpers/Firebase” and cleaning rest of the related codes at “src/App.js” and “src/redux/auth/saga.js” should solve the problem.
I also recommend checking this small guilde at our docs: https://gogo-react-docs.coloredstrategies.com/docs/guides/removing-auth
Cheers.
hi,
How can i make the GlideComponent (Single carousel) to be:- 1) autoplay
- 2) autoplay with interval 3 seconds
- 3) when i hover the image, it will pause or stop at the selected image
<GlideComponent settings={ {
gap: 5,
perView: 1,
type: “carousel”,
hideNav: true,
autoplay: true,
hoverpause: true,
}
}>
Please assist… thanks..
Hi,
Please try adding below setting.
hoverpause: true,
autoplay: 3000,
animationDuration: 200,
thanks it worked perfectly…
May i also ask how to set moving direction from Bottom to Top? Currently i can only find options below:
'ltr' - left to right movement
'rtl' - right to left movement
Unfortunately, the plugin does not support vertical slides. ltr and rtl values are for direction to support rtl languages.
Dear.
login after Signout is deforms.
Apparently it is because the “background” class disappears from the body element, but I could not fix it.
Regards.
Hi,
I could not understand the problem. I have tried login, logout and login again and all looks fine. It would be helpful if you may provide more details or steps to reproduce the error.
Here is the auth enabled build: https://gogo-react-dev.coloredstrategies.com/
I attach a video with the problem.
It occurs at the time of logout.
https://www.youtube.com/watch?v=9sstYBk2egEHi,
Sorry for the problem but we still can’t reproduce it. Here is the version that we see. https://coloredstrategies.com/vids/gogo-login-bug-2020-03-04%2019-13-43.mp4
You may find “background” class addition at src/layout/UserLayout.js. I am not sure if you recorded the video from the url I have provided since the address bar is not visible. If not and you have made some route changes or customizations, might be a good idea to implement UserLayout.js.
If this is not the case, let us know the version of Gogo you are using. Also it might be about the browser version but I really doubt that.
Below lines adds and removes classes for user pages.
componentDidMount() {
document.body.classList.add("background");
document.body.classList.add("no-footer");
}
componentWillUnmount() {
document.body.classList.remove("background");
document.body.classList.remove("no-footer");
}
I already checked it, it was a problem with the chrome plugin “Reverso Translate in Context” ( https://chrome.google.com/webstore/detail/reverso-translate-in-cont/onhiacboedfinnofagfgoaanfedhmfab )
Apparently it eliminates the “background” class of the body when it loads.
I disabled it and now it works without problems.
Thanks for the help.
How to edit this menu in data list view: https://prnt.sc/raqe1v
Hi,
It’s added to the page with below code.
<ContextMenuContainer
onContextMenuClick={this.onContextMenuClick}
onContextMenu={this.onContextMenu}
/>
And you may find the component at “src/containers/pages/ContextMenuContainer.js”
hi, i just purchased it.. and i did the following steps but still i received errors why trying to browse the Dashboard screen.
1) Download
2) On the Gogo-React-Start-With-Auth folder
3) npm install
4) npm buld run build
5) npm start
6) This opens up the http://localhost:3000/app/gogo/start
7) Great! i can see the home page
When i press to open Dashboard page (from top right menu)
9) This opens up the 404 page. Is this normal? I am expecting to see Dashboard page actually.
Kindly please assist.
Hello,
It is normal to get 404 error page because ’/app/dashboards/default’ page does not exist in project Gogo-React-Start-With-Auth.
You can link the pages that you want to direct the menu elements from in /src/containers/navs/Topnav.EasyAccess.js page.
Let us know if there is something we can help with.
oh thanks for quick response! i’ll go through again
hi, how can i make the GlideComponent (Single carousel) to be: 1) autoplay 2) autoplay with interval 3 seconds 3) when i hover the image, it will pause or stop at the selected image
Below is my code: <GlideComponent settings={ { gap: 5, perView: 1, type: “carousel”, hideNav: true, autoplay: true, hoverpause: true,
}
}>thanks.
Hi,
Please try adding below setting.
hoverpause: true,
autoplay: 3000,
animationDuration: 200,
Hi, I love your gogo react work, however I need your help getting it top us AWS Cognito in place of Firebase. Please could you help me? I am willing to pay you for this.
Hi,
Thank you, it’s nice to hear that you enjoy the template.
As for your request, unfortunately we don’t accept any custom works. Even if we would, we really don’t have any experience with Aws.
I may suggest to look at the guides at our docs if you haven’t. Might be useful.https://gogo-react-docs.coloredstrategies.com/docs/guides
https://gogo-react-docs.coloredstrategies.com/docs/guides/removing-auth
All the best.
How to Get the order of list item sortable in react ?
Hi,
Here is how to do it with the current version:
<Sortable
tag="ul"
className="list-unstyled"
options={{
handle: ".handle",
onChange : (event)=>{
const newList = [...event.target.children].map(x=>x.dataset.id)
console.log("TCL: SortableUi -> render -> newIndex", newList)
}
}}
>
<li data-id="1">...</li>
<li data-id="2">...</li>
<li data-id="3">...</li>
<li data-id="4">...
</li>
</Sortable>
Thanks
Can I get saved list from database and set it to sortable. Is there any attribute like setValue: [3,1,2,4]
Here how to do it:
const dataFromDatabase = [{primaryKey:1, label : "first"},{primaryKey:2, label : "second"},{primaryKey:3, label : "third"},{primaryKey:4, label : "fourth"}];
..
..
<Sortable
tag="ul"
className="list-unstyled"
options={{
onChange : (event)=>{
const newPrimaryKeyList = [...event.target.children].map(x=>x.dataset.id)
let newList= newPrimaryKeyList.map(p=>{return dataFromDatabase.find(x=>x.primaryKey==p)});
console.log("onChange -> newList", newList)
}
}}
>
{
dataFromDatabase.map(d=>(
<li data-id="{d.primaryKey}" key="{d.primaryKey}">{d.label}</li>
))
}
</Sortable>
When I try to reorder the options . The state changed but item is not resort.
Hi,
We have updated to newer version of sortable and will publish an update for the template soon.
I recommend you to update yours since new one is quite easy to use.
npm uninstall --save react-sortablejs
npm install --save react-sortablejs
Here is a basic example from their docs(https://github.com/SortableJS/react-sortablejs) :
import React, { Component } from "react";
import { ReactSortable } from "react-sortablejs";
interface BasicClassState {
list: { id: string; name: string }[];
}
export class BasicClass extends Component<{}, BasicClassState> {
state: BasicClassState = {
list: [{ id: "1", name: "shrek" }]
};
render() {
return (
<ReactSortable
list={this.state.list}
setList={newState => this.setState({ list: newState })}
>
{this.state.list.map(item => (
<div key="{item.id}">{item.name}</div>
))}
</ReactSortable>
);
}
}
Error notification not displaying on register page. I use this code: yield put(registerUserError(“Error”));
Ignore , I found it.
Hi, is there a datepicker included in this theme? If so, on what page do I find an example?
No need: I already found it in /app/ui/forms/components
In the Dashboard there is a table Best Sellers, how do I make the width of the column with the check boxes to the smallest width as possible?
Many thanks
Hi,
You may set a maxWidth property to the column of the check boxes.
columns={[
{
sortable: false,
Header: (
<CustomInput
...
),
Cell: row => (
<CustomInput
...
),
...
filterable: false,
maxWidth: 60 // this one
},
...
]}
When the columns get closer, it appears there is a problem with alignment. To fix it, please add below lines to “src/assets/css/sass/_gogo.style.scss” file.
.ReactTable .rt-thead .custom-control {
margin-top: -3px;
}
Hi, I am using an UncontrolledDropdown with several DropdownItem’s. How do I attach an onChange handler to the DropdownMenu to update the UI when a DropdownItem has been selected?
Many thanks
Hi,
You may use “onClick” event from “DropdownItem” and you may see usage example in “src/containers/navs/Topnav.js” with language selector.
I want to remove firebase files from my project because I am using Aws DynamoDB . Can you mention which files should I remove.
Hi,
I think below documentation pages should be helpful, if not please let us know.
https://gogo-react-docs.coloredstrategies.com/docs/guides/changing-auth-api
https://gogo-react-docs.coloredstrategies.com/docs/guides/removing-auth
How can I add custom authentication? I see that gogo uses firebase which is not suitable for me.
Hi,
Please check the docs page and let us know if it does not solve the problem. https://gogo-react-docs.coloredstrategies.com/docs/guides/changing-auth-apiCheers.
Hi ColoredStrategies,
Thank you for the great work on this template. It is beautiful and functional.
I’m struggling to use the data-list page thought. For some reason that I was not able to identify, I’m not able to map my API results into the component state.
Here is the error I get when I try to access my page:
TypeError: Cannot read property ‘map’ of undefined DataListPages.render src/views/app/locations/list.js:282 279 | toggleModal={this.toggleModal} 280 | categories={categories} 281 | /> > 282 | <Row> | ^ 283 | {this.state.items.map(product => { 284 | if (this.state.displayMode === “imagelist”) { 285 | return ( View compiled ▼ 18 stack frames were expanded. finishClassComponent node_modules/react-dom/cjs/react-dom.development.js:18470 updateClassComponent node_modules/react-dom/cjs/react-dom.development.js:18423 beginWork$1 node_modules/react-dom/cjs/react-dom.development.js:20186 HTMLUnknownElement.callCallback node_modules/react-dom/cjs/react-dom.development.js:336 invokeGuardedCallbackDev node_modules/react-dom/cjs/react-dom.development.js:385 invokeGuardedCallback node_modules/react-dom/cjs/react-dom.development.js:440 beginWork$$1 node_modules/react-dom/cjs/react-dom.development.js:25780 performUnitOfWork node_modules/react-dom/cjs/react-dom.development.js:24695 workLoopSync node_modules/react-dom/cjs/react-dom.development.js:24671 performSyncWorkOnRoot node_modules/react-dom/cjs/react-dom.development.js:24270 (anonymous function) node_modules/react-dom/cjs/react-dom.development.js:12199 unstable_runWithPriority node_modules/scheduler/cjs/scheduler.development.js:697 runWithPriority$2 node_modules/react-dom/cjs/react-dom.development.js:12149 flushSyncCallbackQueueImpl node_modules/react-dom/cjs/react-dom.development.js:12194 flushSyncCallbackQueue node_modules/react-dom/cjs/react-dom.development.js:12182 scheduleUpdateOnFiber node_modules/react-dom/cjs/react-dom.development.js:23709 enqueueSetState node_modules/react-dom/cjs/react-dom.development.js:13994 DataListPages.push../node_modules/react/cjs/react.development.js.Component.setState node_modules/react/cjs/react.development.js:325 ▲ 18 stack frames were expanded. (anonymous function) src/views/app/locations/list.js:205 202 | return res.data; 203 | }) 204 | .then(data => { > 205 | this.setState({ | ^ 206 | totalPage: data.totalPage, 207 | items: data.data, 208 | selectedItems: [],
Do you have any insights on what the issue might be?
Thanks, Ricardo.
Hi Ricardo,
This error message provides a very basic info about the source of the problem. It only shows us the state.items is null.
It might be related to data returned by the api. If you check the data from our api, it has data as a property. You may check api call at dataListRender function. https://api.coloredstrategies.com/cakes/paging
{
status true
totalItem 20
totalPage 2
pageSize "10"
currentPage "1"
data: [...]
}
Cheers.
Yes, I tested the API with Postman it is working fine. I think the setState function is not working for some reason, i will spend more time on it troubleshooting.
I want to remove the sidebar from the project. The problem is when I remove that component that the main page or blank-page starts indented from the left. How do I fix this?
Many thanks
Hi,
Setting “defaultMenuType” variable at src/constants/defaultValues.js to “menu-hidden” should solve the indent problem.
Cheers.
How to remove theme customizer : https://prnt.sc/r4c679
Hi,
Setting “isMultiColorActive” variable at src/constants/defaultValues.js to false should hide the color selector.
Cheers.
Thanks!!
How to keep menu open, The issue is when there is no sub-menu.Sidebar automatically close.
Hi,
If you mean not the whole sidebar but submenu, then it’s the normal menu behaviour to prevent showing an empty submenu as it is shown our preview: https://gogo-react.coloredstrategies.com/app/blank-page
If the whole sidebar is collapsing when screen size is larger than 768px, then there might be some other problem. Please let us know if this is the case.
All the best.
Thanks
Hi,
first of all compliment for your theme, I really like it.
I contact you regarding App.js component: can you explain or suggest a documentation about this part of the code?
<AuthRoute
path="/app"
authUser={loginUser}
component={ViewApp}
/>
Moreover which is the best location in your theme to fetch the user data from my API after login? I put it in index.js under “app” folder.
Thank you
Hi,
It’s nice to hear that you like the template, we really appreciate it.
As for your question, you may find “mapStateToProps” at the end of this page and it provides loginUser as a prop.
This is a basic Redux usage to persist user at state and it is kind of out of the context of our docs. You may check a very short example here: https://gogo-react-docs.coloredstrategies.com/docs/codebase/redux
You may also find some guidence about implementing your own api here: https://gogo-react-docs.coloredstrategies.com/docs/guides/changing-auth-api
All the best.
