685 comments found.
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.
Hi,
I’m designer in a team which uses your Gogo – React admin template. The package they get has only Photoshop design source files.
By any chance, do you have the template sources in Sketch source file as well?
Thank you in advance Dzmitry
Hi Dzmitry,
Unfortunately there is only PSD version.
All the best, Arthur.
Icons and Images are not showing after new installation in my react app : https://prnt.sc/r3abxx
I solved it by moving assets to my public directory.
Thanks, I ignore it.
Can you also fix phone and tablet lagging/hang issue. It is very slow on small devices.
Hi,
We have worked a lot on responsive part and the template supports smaller screens above 400px but lagging issues are related with the charts and canvas as we see.
Cheers.
Can you add point of sale page with products on left and cart on right, I’ll definitely buy this template. Example: https://prnt.sc/r13ugp
Hi,
We plan to work on ecommerce part more and want to implement cart, checkout and etc but currently working on another project and I am not sure when the updates will be available.
Cheers.
FIrst I want to thank you for the great design it help a lot specially I am new to react. My question: if the user sign in using firebase does it show him his own dashboard (own session) or any user connect it will be directed to the same dashboard? My project need to have many users accounts each one with his own details.
Hi,
It’s nice to hear that you like the template, we appreciate it.
As for your question, data of the template is mostly static since its main purpose is to provide the components and view. You will need to get data of the logged in user from a database and provide the data to dashboard and other parts of the project per user.
Purchase code: 2c2d928b-b5cf-4b4c-8562-13229904ad6b
Hi there!
First of all I would like to congratulate you about the work you have done.
I have some questions about your product:
1) I see on product’s web page, the possibility of make “right click menu” but i didn’t find anything about this in the live preview page. I’m interesting to implementing this functionality in my web application then i would kwon how it’s possible.
2) I have a lot of doubt about the routing system. In the full app demo i downloaded, the principal features are into “app” folder and this cause a routing url like this “http…../app/functionality”. I would make a simple routing system like ”/login”, ”/dashboard”, ”/config”. etc… I have a very difficult to make this. The problem is to render component, to allineate breadcrumb’s voices. Do you have a simple example for make this? I mean 3 simple route (/login, /dashboard and /config)
Sure of your kind reply, thank you and wish you a good day.
Simone Mandaglio (sorry for my bad english)
Hi Simone,
It’s nice to hear you like the template, we really appreciate it.
As for your questions,
1- Right click menu is imlemented on the list items. Here you may see it in action by right clicking an item: https://gogo-react.coloredstrategies.com/app/pages/product/data-list
2- The /app path is mainly there to provide a general auth protection. Instead of defining routes one by one we created this route so everything under it requires a login. This approach provides a better way to create new files without worrying about or altering authentication. You may check this logic at src/App.js file. I honestly could not understand the part with breadcrumb but if you really think that you need the routing as you have described, please reach us via the contact form at our profile page so we may create a starter project for you.
All the best, Arthur.
