Discussion on Gogo - Vite React Admin Dashboard (React 19)

Discussion on Gogo - Vite React Admin Dashboard (React 19)

Cart 3,582 sales
Recently Updated
Well Documented

ColoredStrategies supports this item

Supported

This author's response time can be up to 5 business days.

691 comments found.

Dear support,

I notice the last release was over 4 months ago.

Do you have an estimate when the next release will be available?

What is the upgrade procedure from the current version to the next version?

One more question: Do you have any recommendations for how to organize the project so that it will simplify things for future updates to the theme?

Hi,

You are right about the updates. We have waited quite some time for external plugins to support new lifecycle methods. After the supports are shipped, we implemented updates for most parts of the template but it is not completed yet. Lately, we started to miss our deadlines because of the quarantine. So I really can’t provide an ETA for the update.

We don’t prioritise integration of updates. Main reason for it, the template is basically an implementation of multiple libraries. Users would eventually need to work on the files that may get changed with an update. Another reason is that every step we take to make updates easier customization and flexibility gets harder. The template gets encapsulated. Learning curve gets higher.

If you think your project would need updated lifecycles of React, then I don’t think now is a good time for purchasing and starting your project with Gogo.

All the best.

Congratulations for the great Design. Just a pre-sale question. Can I use this for a single user’s different sub-domain with regular license? Am I getting a stand alone code base with all the customizations possible?

Hi,

Thank you for your kind words, we appreciate it.

As for your question, I think it is okay to use the templates with multiple domains as long as it is a single end product.

The template contains a CRA implementation with multiple external libraries. You will get all the source code, images, styles and so on.

Cheers.

Which Template stack would be better if I am planning to integrate it for a PHP based application? I found Dore as JQUERY version and this one is for React App. Please help. Thank you!

I think Dore might be better if you want to integrate php code with html.

Hey,

Is there a documentation for this template. The documentation in the zip files are not enough to twice and modify the template.

Hi,

Yes, that is the documentation. https://gogo-react-docs.coloredstrategies.com/

Please let us know the parts that you think lacking. Also if you have any questions, we are happy to help.

Cheers.

this is not enough to modify the template. we can’t even move things around without breaking the code. there is no documentation on the codebases. Its fully lacking codebase documentation.

Hello.. i need you help!!!

where I can find information on how the information shown in the data-list is constructed.

As much as I analyze the DatalistView, I don’t find where it’s getting the data from.

Can you guide me please?

ok.. i understood.. data come from https://api.coloredstrategies.com/cakes/paging... ca in construc a date-list from json file?

Hi,

That is correct. Please check “dataListRender” function. It calls an api to retrieve data by selected parameters such as order and search term.

I am building an app using your Gogo React Template. I used the Gogo-React-Start-With-Auth project as a starting point, and have been pulling in the bits I need from the full preview Gogo-React folder as needed. It’s been successful almost everywhere. I am having trouble with the VideoPlayer though. It seems to show up, not sized to the card, but in its full resolution with excess simply discarded. If I toggle autoplay to true in the code, the video successfully starts playing, but the size is also wrong and doesn’t fit. When running the Gogo-React folder it runs and the video works. When I copy the full blog-detail page from that same project and bring in the dependancies too into my project, same result. I’ve compared in the browser inspect and they look 100% identical. Could you give me any advice to get the video running?

Hi,

It might be related to css import at src/index.js.

There are some plugins that comes decoupled from styles so we import them in index.js file.

import "video.js/dist/video-js.css";

Let us know if this does not help.

Thank you so much for the quick response! It did the trick, I’m all set now. So impressed with the support and with the template in general.

You’re welcome and it’s nice to hear that you are happy with the template.

Cheers.

I’m getting below message when I use “Gogo-React-Start-With-Auth” project and start with npm start. TypeError [ERR_INVALID_ARG_TYPE]: The “path” argument must be of type string. Received undefined.

Hi,

Please remove package-lock.json, yarn.lock and node_modules and try installing again.

Thanks its working

You’re welcome.

As a side note, please use a purchased account for support if you can.

Cheers.

Hello what is the main style file should I add to access all your design in my existing project ?? My project almost done but I need your UI style only , what can I do now ?

Hi,

Style related files are located at src/assets/css folder. Also, there are some external plugin styles that are included in the project at src/index.js.

As a side note, I don’t think getting only the ui style from the template is an easy task. It was not built for it. It’s an implementation which contains lots of other codes such as menu and it’s redux code, external plugins, custom layout structure and so on. It is like all the other templates on Theme Forest, it provides a base to build a project on top of it and not the other way around.

All the best.

How to add DatePicker in Form Wizard and validate ?

Hi,

You may find an example in validations page under the title “Custom Components and Layouts with Yup”

There is a problem in app. After uploaded on server. Everything is working fine except from URL’s. It looks when I tried to refresh or try to access of URL directly. The link redirected to index.html than goes to an error page.

Hi,

The problem is about the server rather than the app. You need url rewriting to direct all the urls to index.html page.

Congratulations for the great design and versatility they offer in your product. Do you have a landing page that matches the template?

Hi,

Thank you for the kind words, we appreciate it.

Unfortunately, there is not a landing page included in the template.

Hi, I am having issues getting Gogo-React-Start-With-Auth to run locally. Whenever I run npm install I am thrown various error messages. Can you please assist me with getting this up locally?

Hi,

If you share the error you got, we may provide a better answer for you. With your current input, I think it may be related with Node version. If you have current(14.x.x) please downgrade to lts(12.x.x)

Is there a way to change the favicon to our own one?

Hi,

You may override the favicon in the public folder.

Hi, there! Is there any way to trigger Notification within saga instead of componentDidUpdate?

Hi,

You may find an example for it at src/views/user/login.js.

Hi, There! I would like to call async api when i onChange FormikReactSelect.

For example: After select city from Select 1, i can get code of the city.

Then, i want to get result from Select 1 is code of the city to pass into the api to fetch data like district of the city and fill data into Select 2.

Currently I have no solution for calling api in onChange of FormikReactSelect and after receiving the result, how can I dump the new result into the 2nd Select? So what is there any solution for me? many thank!

<FormGroup className=”tooltip-right-top”> <Label>city</Label> <FormikReactSelect name=”province” value={values.province} isDisabled={isProvinceLoading} isMulti={false} isSearchable={true} options={provinceData} onChange={setFieldValue} onBlur={setFieldTouched} /> {errors.province && touched.province ? ( {errors.province} ) : null} </FormGroup>

<FormGroup className=”tooltip-right-top”> <Label>district</Label> <FormikReactSelect name=”district” value={values.district} isDisabled={false} isMulti={false} isSearchable={false} options={districtData} onChange={setFieldValue} onBlur={setFieldTouched} /> {errors.district && touched.district ? ( {errors.district} ) : null} </FormGroup>

Hi,

You may get and keep your data at the state, update it based on your form needs. You will also need to pass enableReinitialize as true to Formik.

Below is a basic example of the concept.

constructor(props) { this.state = {selectFirst: [], selectSecond: []}; setTimeout(() => { // Async this.setState({ selectFirst: ['a', 'b'] }) }, 2000); } render() { ... <Formik enableReinitialize={true} initialValues={ this.state } ... }

Opp! I mean, How do I call the api inside the onChange event of FormikReactSelect. For example:

<FormikReactSelect name=”province” value={values.province} isDisabled={isProvinceLoading} isMulti={false} isSearchable={true} options={provinceData} onChange={setFieldValue} onBlur={setFieldTouched} />

The answer in the below link is for onBlur but should also work with onChange. https://stackoverflow.com/questions/48466920/react-formik-how-to-use-custom-onchange-and-onblur

Hello,

Do any of the layouts such as the grid image layout have an Infinity Scroll feature?

I am thinking about how it will operate on a tablet device. It would be nicer to infinity scroll, instead of using the page features.

Can you please let me know if you have this feature already?

Hi,

Unfortunately there is not any implementation for it currently.

All the best.

HI, there! I want to using formik within reactstrap modal but it seem not working for me! This is my code:

import React, { Component } from “react”; import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Label, FormGroup, } from “reactstrap”; import ReactQuill from “react-quill”; import “react-quill/dist/quill.snow.css”; import DropzoneExample from ”../../containers/forms/DropzoneExample”; import { Formik, Form } from “formik”; import { FormikReactSelect } from ”../../containers/form-validations/FormikFields”;

const ordersData = [ { value: “111”, label: “111” }, { value: “222”, label: “222” }, { value: “333”, label: “333” }, ];

const complaintData = [ { value: “Đặt hàng chậm”, label: “Đặt hàng chậm” }, { value: “Tính sai cước cân nặng”, label: “Tính sai cước cân nặng” }, { value: “Hàng vỡ hỏng”, label: “Hàng vỡ hỏng” }, ];

const quillModules = { toolbar: [ };

[
    { list: "ordered" },
    { list: "bullet" },
    { indent: "-1" },
    { indent: "+1" },
  ],
],

const quillFormats = [ “header”, “bold”, “italic”, “underline”, “strike”, “blockquote”, “list”, “bullet”, “indent”, ];

export default class AddNewComplaintModal extends Component { constructor(props) { super(props); this.state = { content: ””, }; this.handleSubmit = this.handleSubmit.bind(this); } }

handleSubmit(values) {
  console.log(values);
}
render() {
  const { modalOpen, toggleModal } = this.props;
}
return (
  <Formik
    onSubmit={this.handleSubmit}
    initialValues={{
      orders: { value: "111", label: "111" },
      complaint: { value: "Đặt hàng chậm", label: "Đặt hàng chậm" },
      content: "",
    }}>
    {({ setFieldValue, setFieldTouched, values }) => (
      <Form autoComplete="off">
        <Modal
          isOpen={modalOpen}
          toggle={toggleModal}
          wrapClassName="modal-right" 
          backdrop="static">
          <ModalHeader toggle={toggleModal}>Tạo khiếu nại</ModalHeader>
          <ModalBody>
            <FormGroup>
              <Label>Chọn đơn</Label>
              <FormikReactSelect
                name="orders" 
                value={values.orders}
                isMulti={false}
                isSearchable={true}
                options={ordersData}
                onChange={setFieldValue}
                onBlur={setFieldTouched}
              />
            </FormGroup>
            <FormGroup>
              <Label>Loại khiếu nại</Label>
              <FormikReactSelect
                name="complaint" 
                value={values.complaint}
                isMulti={false}
                isSearchable={true}
                options={complaintData}
                onChange={setFieldValue}
                onBlur={setFieldTouched}
              />
            </FormGroup>
            <FormGroup>
              <Label>Hình ảnh</Label>
              <DropzoneExample ref={(node) => (this.dropzone = node)} />
            </FormGroup>
            <FormGroup>
              <Label>Nội dung khiếu nại</Label>
              <ReactQuill
                theme="snow" 
                value={values.content}
                onChange={(val) => setFieldValue("content", val)}
                modules={quillModules}
                formats={quillFormats}
              />
            </FormGroup>
          </ModalBody>
          <ModalFooter>
            <Button color="secondary" outline onClick={toggleModal}>
              Làm lại
            </Button>
            <Button color="primary" type="submit">
              Gửi đi
            </Button>{" "}
          </ModalFooter>
        </Modal>
      </Form>
    )}
  </Formik>
);

When i click submit, formik not log values of the form while this form working fine if i put it without reactstrap modal. So what can i do to fix it? thank you!

Hi,

I have not tried your code but there is a clear problem with Modal usage. Please use it like below. Let us know if it does not help.

<Modal> ... <ModalBody> <Formik></Formik> // HERE </ModalBody> ... </Modal>
Hello, how can I create a new route that does NOT require authentication? I have created a new route in App.js called ‘Public’:
                  
<Route
path="/public" 
render={props => <Public {...props} />}
/>
I have the corresponding structure and component all set up just fine. However, whenever I navigate to ‘http://localhost.com/public' it immediately loads the login component. What am i doing wrong!?

Hi,

It looks all working out for us adding the route at app.js file ... line:80 <AuthRoute path="/app" authUser={loginUser} component={ViewApp} /> <Route path="/public" render={props => <Public {...props} />} /> …. ... <Route path="/user" ... ... <Route path="/error"

May the problem be related to something else?

Hey. I think it’s great, works smooth and design is really beautiful.

But as a react developer I can see lack of basic tools and really(!) outdated patterns in react components. If you want go can give me access to git repo so I can make some PR for you (for free) when I finish refactoring of those components.

Have a nice day

Hi,

It’s nice to hear that you like the template, we really appreciate it.

We have been working on the updates for the project for mainly on hooks about a month. It is a delayed update but we need to wait for the external libraries to support new React features before implementing for the template. It will be available soon so thanks for the really generous offer. We are open for suggestions about lacking tools though.

All the best.

Hello, I’m trying to link the template to a Spring Boot application. In Spring > webapp folder I have a index.html with a single .

In the index.html I have added links to all webpack produced files: <script src=static/dest/0.bundle.js></script> <script src=static/dest/1.bundle.js></script> <script src=static/dest/2.bundle.js></script> <script src=static/dest/3.bundle.js></script> <script src=static/dest/4.bundle.js></script> <script src=static/dest/5.bundle.js></script> <script src=static/dest/6.bundle.js></script> <script src=static/dest/7.bundle.js></script> <script src=static/dest/8.bundle.js></script> <script src=static/dest/9.bundle.js></script> <script src=static/dest/App.bundle.js></script> ....etc.

I see that in Gogo template in AppRenderer.js there is a ReactDOM.render(..., document.getElementById(‘root’) but I’m met with a blank page everytime I start the webpack dev server.

Here’s the command I run to start the webpack dev server: webpack-dev-server—hot—mode development—config webpack.dev.js

Here’s the webpack.common.js: module.exports = { entry: ”./src/index.js”, output: { path: path.join(__dirname, ”../webapp/static/dest/”), filename: “bundle.js”, }, optimization: { splitChunks: { chunks: “all”, }, }, module: { rules: [ here are the babel-loader, style-loader, css-loader, sass-loader, html-loader, etc…. ] }, };

Here’s the webpack.dev.js: const merge = require(“webpack-merge”); const common = require(”./webpack.common.js”);

module.exports = merge(common, { devServer: { port: 8090, compress: true, proxy: { ”**”: “http://localhost:8082” }, open: true, openPage: “gui”, publicPath: ”/gui/static/dest/”, overlay: true } });

I’m starting the Spring Boot application on localhost:8082 and then the webpack dev server. There is nothing on the screen. Am I linking the webpack output bundles wrong?

Thank you in advance!

Hi,

Unfortunately we have zero experience with Spring and literally first time we see it in use.

I may suggest that you should check online answers for CRA. Here is something that might be helpful: https://stackoverflow.com/questions/44892384/how-can-i-use-create-react-app-with-spring-boot

All the best.

Hi, There. I created new a FormikField with name “FormikInputCounter”, so and this code:

export class FormikInputCounter extends React.Component { handleChange = (value) => { this.props.onChange(this.props.name, value); }; }

handleBlur = () => {
  this.props.onBlur(this.props.name, true);
};
handleIncrement(value) {
  this.props.onChange(this.props.name, ++value);
}
handleDecrement(value) {
  this.props.onChange(this.props.name, --value);
}
render() {
  const { name, value } = this.props;
}
return (
  <InputGroup className="mb-3">
    <InputGroupAddon addonType="prepend">
      <Button
        color="light" 
        className="default" 
        onClick={() => this.handleDecrement(value)}>
        -
      </Button>
    </InputGroupAddon>
    <Input
      name={name}
      value={value}
      onChange={this.handleChange}
      onBlur={this.handleBlur}
    />
    <InputGroupAddon addonType="append">
      <Button
        color="light" 
        className="default" 
        onClick={() => this.handleIncrement(value)}>
        +
      </Button>
    </InputGroupAddon>
  </InputGroup>
);

- This is my render on view within Formik:

<FormGroup className=”tooltip-right-bottom”> <FormikInputCounter name={`orders[${index}].quantity`} value={values.orders[index].quantity} onChange={setFieldValue} onBlur={setFieldTouched} /> <ErrorMessage name={`orders[${index}].quantity`} /> </FormGroup>

- This is my InitialValue to pass into the Formik:

const initialValue = { orders: [ { image: ”/assets/img/default-thumbnail.jpg”, properties: { productName: ””, productLink: ””, other: ””, }, price: ””, quantity: 1, note: ””, amount: ””, }, { image: ”/assets/img/default-thumbnail.jpg”, properties: { productName: ””, productLink: ””, other: ””, }, price: ””, quantity: 1, note: ””, amount: ””, }, { image: ”/assets/img/default-thumbnail.jpg”, properties: { productName: ””, productLink: ””, other: ””, }, price: ””, quantity: 1, note: ””, amount: ””, }, ], deliver: “Nhanh”, storage: { value: “Hà Nội”, label: “Hà Nội” }, };

Component will be render with figure out:

| – | 1 | + |

When i click on the [+] button, value will be increment and similar with [-] button will be decrment.

Everything working fine except when i focus to input and change value of the input.

An error occur with me. The Input can not change value and appear value: [object object] within Input. For example: this is Input:

------ | – | [object Object] | + |

So, Is there any advice for me to fix this my problem? Thank so much!

Hi,

Altering onChange function of FormikInputCounter should solve the issue. You are trying to set value of the event to the input. handleChange = (event) => { this.props.onChange(this.props.name, event.currentTarget.value); };

Thank you so much!

by
by
by
by
by
by

Tell us what you think!

We'd like to ask you a few questions to help improve ThemeForest.

Sure, take me to the survey