684 comments found.
HI! I’m currently stuck at clearing the attached files in the dropzone component. Could you please provide me the fastest or most basic way of doing that? I just wanted to clear all the dropped files upon successful submit of my form.
Thanks!
Hi,
You may reach dropzone object and call its methods in “src/containers/forms/DropzoneExample.js” file. Here is the component part with a “clear” function.
export default class DropzoneExample extends Component {
clear() {
this.myDropzone.removeAllFiles(true);
}
render() {
return (
<DropzoneComponent
config={dropzoneComponentConfig}
djsConfig={dropzoneConfig}
eventHandlers = {{
init: (dropzone)=>{
this.myDropzone = dropzone;
}
}}
/>
);
}
}
<DropzoneExample ref={ node => this.dropzone = node }/>
After above step, you may call clear method anywhere you need.
this.dropzone.clear();
Let us know if you have any problems.
Cheers.
Thank you so much! Works 
how would you prever to add custom css?
Hi,
You may add your css in anywhere you like and you may import it at src/index.js file.
Alternatively, you may add it at the end of src/assets/css/sass/_gogo.style.scss file to make sure yours overrides Gogo styles.
The reason I asked it was because of updates. When i update the project and you modified the src/index.js or _gogo.style.css i have to add/import my custom css again.
In your case, safest solution would be creating a new file and importing it in index.js. For most of the minor updates index.js stays the same or have a line of css addition.
ok tnxs!
Hi,
We are getting this warning, but the package,json and components that we are using are identical from the source we donloaded.
backend.js:6 Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.
- Move code with side effects to componentDidMount, and set initial state in the constructor.
- Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.
Please update the following components: ReactImageLightbox r @ backend.js:6 printWarning @ react-dom.development.js:12050 lowPriorityWarning @ react-dom.development.js:12071 push../node_modules/react-dom/cjs/react-dom.development.js.ReactStrictModeWarnings.flushPendingUnsafeLifecycleWarnings @ react-dom.development.js:12232 flushRenderPhaseStrictModeWarningsInDEV @ react-dom.development.js:24508 commitRootImpl @ react-dom.development.js:23765 unstable_runWithPriority @ scheduler.development.js:676 runWithPriority$2 @ react-dom.development.js:11855 commitRoot @ react-dom.development.js:23750 runRootCallback @ react-dom.development.js:22836 (anonymous) @ react-dom.development.js:11907 unstable_runWithPriority @ scheduler.development.js:676 runWithPriority$2 @ react-dom.development.js:11855 flushSyncCallbackQueueImpl @ react-dom.development.js:11902 flushSyncCallbackQueue @ react-dom.development.js:11890 discreteUpdates$1 @ react-dom.development.js:22968 discreteUpdates @ react-dom.development.js:2440 dispatchDiscreteEvent @ react-dom.development.js:6275 backend.js:6 Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.
- Move data fetching code or side effects to componentDidUpdate.
- If you’re updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
- Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.
Please update the following components: ReactImageLightbox
Hi,
Some of the plugins (in this case ReactImageLightbox) have not implemented new lifecycle hooks. It is not a critical problem currently but we keep an eye on them and include new versions in our updates.
Hi,
Thanks for pointing that out, we will look into it.
Hi. I’m react beginner. I was trying to remove the multi-language plugin and caught a lot of errors. Please, send me without multi-language (providers, langs folder etc) version. I also sent letter to your email support@crealeaf.com. Thank you.
Hi,
Unfortunately, we don’t have a version without language plugin and I really don’t suggest renoving it completely. You may remove dropdown from top nav and use it as it were since it’s integrated in most of the template.
It might also works for a string database for your project and help make your codebase clean. If you utilize it, it might be helpful to make string changes easier when the project gets bigger.
All the best.
Hello,
I uploaded my website to production, so when I’ve tried refresh my website, 404 Not found page appeared.
The page show information like this ////////// Not Found The requested URL /login was not found on this server.
Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request. //////////
Do you have any idea to fix it? Thank you
Hi,
You need a basic url rewriting for your server to direct all urls to index.html page. This will make React to manage all the routes.
Hello Colored Strategies
I would like to store questions into state, it only store ids please can you help me out , here is my code
thank you by advance
import React, { Component, Fragment } from "react";
import { connect } from "react-redux";
import {
Row,
Nav,
NavItem,
Button,
DropdownToggle,
DropdownItem,
DropdownMenu,
TabContent,
TabPane,
ButtonDropdown,
Card,
CardBody,
FormGroup,
Label,
} from "reactstrap";
import Select from "react-select";
import CustomSelectInput from "../../../components/common/CustomSelectInput";
import { Formik, Form, Field } from 'formik';
import { NavLink } from "react-router-dom";
import classnames from "classnames";
import { mapOrder } from "../../../helpers/Utils";
import IntlMessages from "../../../helpers/IntlMessages";
import { Colxx } from "../../../components/common/CustomBootstrap";
import Breadcrumb from "../../../containers/navs/Breadcrumb";
import QuestionBuilder from "../../../containers/applications/QuestionBuilder";
import {
getCategoryList,
getSurveyDetail,
deleteSurveyQuestion,
saveSurvey
} from "../../../redux/actions";
import { injectIntl } from "react-intl";
// import SurveyQuotas from "../../../containers/applications/SurveyQuotas";
// import SurveyCharts from "../../../containers/applications/SurveyCharts";
import SurveyDetailCard from "../../../components/applications/SurveyDetailCard";
const surveyData = [];
class NewTemplate extends Component {
constructor(props) {
super(props);
this.toggleTab = this.toggleTab.bind(this);
this.toggleSplit = this.toggleSplit.bind(this);
this.state = {
activeFirstTab: "1",
dropdownSplitOpen: false,
surveyData: surveyData,
category: "",
template: {
name: "",
description: "",
category: "",
contents: []
}
};
}
componentWillMount() {
this.props.getCategoryList();
}
toggleTab(tab) {
if (this.state.activeTab !== tab) {
this.setState({
activeFirstTab: tab
});
}
}
toggleSplit() {
this.setState(prevState => ({
dropdownSplitOpen: !prevState.dropdownSplitOpen
}));
}
addQuestion() {
const { survey } = this.props.surveyDetailApp;
const { template } = this.state;
var nextId = 0;
if (template.contents.length > 0) {
var ordered = template.contents.slice().sort((a, b) => {
return a.id < b.id;
});
nextId = ordered[0].id + 1;
}
// const newSurvey = Object.assign({}, survey);
template.contents.push({ id: nextId });
// this.props.saveSurvey(newSurvey);
}
handleSortChange(order, sortable, evt) {
const { survey } = this.props.surveyDetailApp;
var ordered_array = mapOrder(survey.questions, order, "id");
this.props.saveSurvey(ordered_array);
}
deleteQuestion(id) {
this.props.deleteSurveyQuestion(id, this.props.surveyDetailApp.survey);
}
validate(values) {
let errors = {};
if (!values.email) {
errors.email = 'Please enter your email address';
} else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
errors.email = 'Invalid email address';
}
if (!values.name) {
errors.name = 'Please enter your name';
} else if (values.name === 'admin') {
errors.name = 'Value must be longer than 2 characters';
}
return errors;
}
render() {
console.log(this.props, this.state);
const { survey, loading } = this.props.surveyDetailApp;
const { template } = this.state;
const { categoryItems } = this.props;
return (
<Fragment>
<Row className="">
<Colxx xxs="12">
<h1>
{/* <i classname="simple-icon-refresh heading-icon" />{" "} */}
<span classname="align-middle d-inline-block pt-1">
<IntlMessages id="template.new.title" />
</span>
</h1>
<div classname="text-zero top-right-button-container">
<ButtonDropdown
className="top-right-button top-right-button-single"
isOpen={this.state.dropdownSplitOpen}
toggle={this.toggleSplit}>
<Button
outline
className="top-right-button"
size="lg"
color="primary">
<IntlMessages id="template.btn.save" />
</Button>
<DropdownToggle
size="lg"
className="dropdown-toggle-split btn-lg"
caret
outline
color="primary" />
<DropdownMenu right>
<DropdownItem>
<IntlMessages id="survey.delete" />
</DropdownItem>
<DropdownItem disabled>
<IntlMessages id="survey.edit" />
</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</div>
<Breadcrumb match={this.props.match} />
{/* {loading ? ( */}
<Fragment>
<Nav tabs className="separator-tabs ml-0 mb-5">
<NavItem>
<NavLink
className={classnames({
active: this.state.activeFirstTab === "1",
"nav-link": true
})}
onClick={() => {
this.toggleTab("1");
}}
to="#">
DETAILS
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({
active: this.state.activeFirstTab === "2",
"nav-link": true
})}
onClick={() => {
this.toggleTab("2");
}}
to="#">
RESULTS
</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={this.state.activeFirstTab}>
<TabPane tabId="1">
<Row>
{/* <SurveyDetailCard survey={survey} /> */}
<Colxx xxs="12" lg="4" className="mb-4">
<Card>
<CardBody>
<h6 classname="mb-4">
<IntlMessages id="template.list.title" />
</h6>
<Formik
validate={this.validate}
initialValues={{
// name: '',
// email: '',
}}
onSubmit={this.handleSubmit}>
{({ errors, touched, isValidating }) => (
<Form className="av-tooltip tooltip-label-right">
<FormGroup>
<Label>
<IntlMessages id="template.field.name" />
</Label>
<Field className="form-control" name="name"
onChange={(e) => {
this.setState({ template: { ...this.state.template, name: e.target.value } });
}} />
{errors.name && touched.name && <div classname="invalid-feedback d-block">{errors.name}</div>}
</FormGroup>
<FormGroup>
<Label>
<IntlMessages id="template.field.category" />
</Label>
<Select
components={{ Input: CustomSelectInput }}
className="react-select"
classNamePrefix="react-select"
name="category"
options={categoryItems ?
categoryItems.map((x, i) => {
return { label: x.nom, value: x._id, key: i };
}) : []}
value={template.category}
onChange={val => {
this.setState({ template: { ...this.state.template, category: val.value } });
}}
/>
{errors.category && touched.category && <div classname="invalid-feedback d-block">{errors.email}</div>}
</FormGroup>
<FormGroup>
<Label>
<IntlMessages id="template.field.description" />
</Label>
<Field
className="form-control"
name="description"
component="textarea"
onChange={e => {
this.setState({ template: { ...this.state.template, description: e.target.value } });
}}
/>
{errors.details && touched.details ? (
<div classname="invalid-feedback d-block">
{errors.details}
</div>
) : null}
</FormGroup>
<Button color="primary" type="submit">Submit</Button>
</Form>
)}
</Formik>
</CardBody>
</Card>
</Colxx>
<Colxx xxs="12" lg="8">
<ul classname="list-unstyled mb-4">
{template.contents.map((item, index) => {
return (
<li data-id="{item.id}" key="{item.id}">
<QuestionBuilder
order={index}
{...item}
expanded={!item.title && true}
deleteClick={id => {
this.deleteQuestion(id);
}} />
</li>
);
})}
</ul>
<div classname="text-center">
<Button
outline
color="primary"
className="mt-3"
onClick={() => this.addQuestion()}>
<i classname="simple-icon-plus btn-group-icon" />{" "}{" "}
<IntlMessages id="template.btn.add_content" />
</Button>
</div>
</Colxx>
</Row>
</TabPane>
<TabPane tabId="2">
<Row></Row>
</TabPane>
</TabContent>
</Fragment>
{/* ) : (
<div classname="loading" />
)} */}
</Colxx>
</Row>
</Fragment >
);
}
}
const mapStateToProps = ({ surveyDetailApp, category }) => {
return {
surveyDetailApp,
categoryItems: category.categoryItems
};
};
export default injectIntl(connect(
mapStateToProps,
{
getCategoryList,
getSurveyDetail,
deleteSurveyQuestion,
saveSurvey
}
)(NewTemplate));
Hi,
Applications are included mostly to provide the appearence and necessary components, you might need to customize several components and containers to make them work as you may want.
Unfortunately, we can only provide support for technical problems, installation issues and so on. We can not provide support for code editing, customization and React specific problems.
Thank you for your understanding. All the best.
Hi There,Can I custom this template depend on business login like add users tab,orders-order details and new pages tabs?
Hi,
You will receive the project upon your purchase and you may customize it however you want if you are efficient in React. You may check the docs to add new pages and get informed about various parts of the project. https://gogo-react-docs.coloredstrategies.com/docs/codebase/routing
Hello,
We are happy to use your beautiful theme. We just download the package and we didn’t find the design asset for our ux/ui designer. Do you have a PSD or Sketch asset for this theme ?
Thx for your help,
Arnaud Gazet
Hi Arnaud,
It’s nice to hear that you are happy with the template.
We don’t include the design files in the download folder but we may provide you if you reach us via the contact form at our profile page. https://themeforest.net/user/coloredstrategies
Cheers.
Hi! I’ve installed npm within project directory with a couple of error messages. When I run npm start it throws an error
”./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)
Error: ENOENT: no such file or directory, scandir ’/..../Source/Gogo-React-Start/node_modules/node-sass/vendor’
never mind, I reinstalled node and it worked
Nice, we would probably advice the same
I couldn’t find virtual lists / grids. Paging sucks!
Hello,
kindly assist: I keep getting this error when I run the template on IE11
“SCRIPT438: Object doesn’t support property or method ‘includes’ “
Hi,
The problem occurs since IE11 does not support “include”, both for array and string types. If you want to check support table and include polyfills you may check below links.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includeshttps://developer.mozilla.org/tr/docs/Web/JavaScript/Reference/Global_Objects/Array/includes
As a side note, the template does not support IE so after solving this you may get another error of some kind. Just my guess but wanted to let you know.
Cheers.
Ok, many thanks for your response. I also observed that the logic for “Forgot Password” wasn’t implemented, was that deliberate?
if it’s an omission, could you please share the script?
Hi,
We have somehow skipped that part, sorry about it.
We will make the implementation and reach you in a day or two.
ok, thanks
Hi,
We have completed implementation of forgot password and reset password and will publish an update lated today. If you only require the solution for the main project(Gogo-React) and don’t want to wait for the update we may provide it via email. If so, you may reach us via the contact form right side of the page here: https://themeforest.net/user/coloredstrategies
Any update publishing the update?
Hi, I also noticed that icons aren’t loading….what could be the reason?
Hi,
You may download the updated version from your downloads page like a normal download.
As for the icons, you may need to check public/index.html file and public/assets directory and make sure they are same with the downloaded versin.
Cheers.
Hi Guy.
I have a problem with your template, following the installation instruction “npm install” it shows me a error, well, several. One of them says “gyp ERR! stack Error: `C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\MSBuild\15.0\Bin\MSBuild.exe` failed with exit code: 1” and the other says “npm ERR! grpc@1.20.0 install: `node-pre-gyp install—fallback-to-build—library=static_library`”
I have tried several solutions but none works, the most logical is the one in this repo. https://github.com/nodejs/node-gyp/issues/119 I read your documentation but there is nothing more than an “npm install”. I hope you can help me, thanks.
Check this https://photos.app.goo.gl/wPtkpqK6fZtv8bjdA
Hi,
This is most likely due to Node version. Please follow below steps.
1. Make sure you have 10.16.3 LTS version of nodejs. It looks like you have 12.x if I am not mistaken.
2. Remove package-lock.json file and node_modules and try installing again.
Please let us know if these do not solve the problem.
It served me, if I have problems with any component I will let you know. Thank you very much for the help, what a good job you did with this template, congratulations.
You are welcome and glad to hear that you like the template
Ps: Consider giving the item a review when you have time. https://themeforest.net/downloads
Cheers.
I would like to set the menu dynamically and only show the options according to the permission level of each user. Is there any property in menu.js that defines the visibility of the item?
Hi,
Unfortunately, there is no user type implementation.
As a side note, support is available for Theme Forest purchased accounts only.
Cheers.
Hi, I would like to enquire for react. In description it is mentioned that this theme is React Compatible. So Once I purchase I will get HTML CSS JS files. Do I get a CRA (Project) for this theme purchased. The preview available is it in react or is in HTML CSS? Regards, Akash Jadav
Hi,
Yes Gogo is a React template and it is created with CRA. It’s not ejected and preview is React.
Gogo does not contain Html&Css&jQuery version but we have it as separate. You may check it here: https://themeforest.net/item/dore-jquery-bootstrap-4-admin-dashboard/22604108
Cheers.
Hi Author, I want update template Gogo React. Please help me! I don’t see part “Boder Radius” in your source, please guide me. Thank you
Hi,
Here is how to do it in two steps:
1. Please locate ”/src/assets/css/sass/_gogo.style.scss” file and copy /* 43.Rounded */ part from new version.
2. Add “rounded” class to body of the “public/index.html” file.
Cheers.
Hi,
When is reach the breakpoint of <GlideComponent /> The cards are totaly hided. I expected that they move to the bottom? It is not clear that you have to swipe horizontal to see the other cards. Is it posible to move them to the bottom or show the nav when the breakpoint is reached?
Hi,
I am afraid I have not understand the question, there are lots of Glide usage throughout the project and I am not sure which one you are referring.
Nonetheless, you may alter or dublicate GlideComponent and make nav bullets visible when screen size is smaller. Here is a render method of the compoenent as an example which makes bullets visible only for xxs and xs:
render() {
return (
<div>
<div classname="glide" ref="{node"> this.carousel = node}>
<div data-glide-el="track" classname="glide__track">
<div classname="glide__slides">
{this.props.children}
</div>
</div>
<div classname="d-block d-sm-none">
{
!this.props.settings.hideNav && (
<div classname="glide__arrows slider-nav" data-glide-el="controls">
<button className="glide__arrow glide__arrow--left left-arrow btn btn-link" data-glide-dir="<">
<i classname="simple-icon-arrow-left" />
</button>
<div classname="glide__bullets slider-dot-container" data-glide-el="controls[nav]">
{this.renderDots()}
</div>
<button className="glide__arrow glide__arrow--right right-arrow btn btn-link" data-glide-dir=">">
<i classname="simple-icon-arrow-right" />
</button>
</div>
)
}
</div>
</div>
</div>
)
}
Hello dear
Please how can I add a new lang ?
I already added a new locale and entry for fr_FR and set it up in AppLocale in lang/index.js and finaly add new lang in localeOptions in constants/defaultValues.js
I also change defaultLocale but it’s still not work
Hi,
I am not sure how to answer this since you may have made a small mistake with any of these steps. If you may point us to the problem more specifically, we may provide better help.
- You may try changing “defaultLocale” to “es” to see that part working. You may also need to open the project on incognito mode to prevent reading old value from local storage.
- You may duplicate one of the objects at the “localeOptions” to see if language switch working.
- You may edit or duplicate one of the locales.
Help us to help you:)
Hello
I have changed “defaultLocale” to “es” and that worked well. I think it’s better to tell me how to add a new lang from scratch.
Thanks you
Hello dear
In Gogo-React-Start-With-Auth , how to force authentification before show others pages ?
Thanks
Hi,
It already forces the login screen. You may need to check it with in incognito mode or by log out with the sign out button in the user dropdown at top right.
You may find the logic at “src/App.js” in the “AuthRoute” constant.
Cheers.
do you have a solution to run this template on Nextjs?
Hi,
We have not looked into Nextjs and don’t have any experience with it. We will probably continue with CRA only.
It might be unrelated for your use case but here is piece of information that I think that can be helpful. If you want Nextjs solely for Google seo, you might want to check below link. It’s our docs page which we used Gogo and Google has been indexing it pretty well. Of course ssr might be better. As a side note, our preview page has not indexed well since we had a login control for it as a start page for a long time.
https://www.google.com/search?client=firefox-b-d&q=site%3Agogo-react-docs.coloredstrategies.com
