Hi,

Thanks for letting us know about this problem and sorry about delayed reply. We tried to solve this with minimum code change so it took some time.

As you have seen, we just connected two async functions together assuming they will complete simultaneously. While we are getting conversations, we have made the mistake that contats are ready.

We have solved this by changing two files.

1. src/redux/chat/reducer.js
-Added “selectedUserId” to “INIT_STATE”.. const INIT_STATE = { allContacts: null, contacts: null, conversations: null, error: '', searchKeyword: '', loadingContacts: false, loadingConversations: false, currentUser: null, selectedUser: null, selectedUserId: null };
-Changed “CHAT_GET_CONVERSATIONS_SUCCESS” return value. case CHAT_GET_CONVERSATIONS_SUCCESS: return { ...state, loadingConversations: true, conversations: action.payload.conversations, selectedUserId: action.payload.selectedUser };

2. src/routes/applications/chat.js
-A function call to set “selectedUser” at “componentDidUpdate” added. if(this.props.chatApp.loadingConversations && this.props.chatApp.loadingContacts && this.props.chatApp.selectedUser==null) { this.props.changeConversation(this.props.chatApp.selectedUserId); } if (this._scrollBarRef) { this._scrollBarRef._ps.element.scrollTop = this._scrollBarRef._ps.contentHeight; } }

This is it. Please let us know if you have problems with implementation.

Regards.

Hi,

Thank you for your kind words, we hope that you keep enjoying our theme.

As for the question, we really do not have experience about this particular issue but doing a search about it directed us to a possible solution. Maybe you should take a look.

Regards.

Thanks for the response. Highly appreciate you sending over the useful resources. I was mentioning about css-modules only. I was trying to see if it was possible to use them with your theme. Have tried a few things. No luck yet.

Do you have any suggestions as to how to keep the class names local to a file and not make them global? This is only in case I’m not able to get css-modules working with your theme.

Hi,

Thank you for your understanding. As i stated earlier we have not actually used it as you may see in our theme and can not point you to a certain answer.

I think best option is to make css-modules work since if i understand correctly create-react-app also started to support it: https://twitter.com/dan_abramov/status/953651118147604480

I only mentioned webpack since you need to make a configuration to make css modules work in case you might have missed it.

Please let us know if you can not make it work so we may take a look at it on monday.

Regards.

Yes, I got it working using the following code in webpack.config.js:

{ test:/\.css$/, use:[ MiniCssExtractPlugin.loader, { loader:”css-loader”, options:{ importLoaders:1, localIdentName:”[name][local][hash:base64:5]”, sourceMap:true, modules:false } } ] }

instead of:

{ test:/\.css$/, use:[ MiniCssExtractPlugin.loader, “css-loader” ] }

This works and I’m able to use css-modules but it leads to a new issue: “src/assets/css/vendor/bootstrap.min.css” stops loading and the entire UI goes for a toss.

I don’t know how to fix this.

P.S.: Pardon the code formatting. Don’t know how to format code in themeforest. Markdown doesn’t seem to be working.

The config used is actually:

{ test:/\.css$/, use:[ MiniCssExtractPlugin.loader, { loader:”css-loader”, options:{ importLoaders:1, localIdentName:”[name]_[local]_[hash:base64:5]”, sourceMap:true, modules:true, }, } ] }

Hi,

You can specify a tag property with AvInput.

Regards.

Is there a demo in the gogo-react demo template? On which page

Hi,

You can check validation part on http://gogo-react.crealeaf.com/app/ui/forms page.

I assume you meant textarea validation.

Regards.

Hi, sorry to bother you. In the process of using templates, I found that `availity-reactstrap-validation` is not as good as `Formik`, and `react` is also recommended to use `Formik`.

Hi,

We choosed Availity not because of React but Reactstrap. It is like a default Bootstrap validation to get started.

If I understand you correctly, you may find what you require at Availity docs. https://availity.github.io/availity-reactstrap-validation/components/validators/ under Custom / Async title. It is at the end of the page which simulates a network call.

Regards.

Hi, I have read the documentation many times, this feature has not been mentioned, it is a headache and I can’t implement my function. Can you help me? My problem is: execute an AJAX request in ‘onSubmit’. The data error message returned by AJAX, for example: the username is not in the correct format. Trigger an error in AvInput and display the error message on the page. (This way of handling error messages will be used extensively in my entire project. Secondly, is there a Discord chat room? This will be a lot easier to communicate)

Hi,

We currently do not have a chat room or ticket system, we only provide support with this comment section or email.

If I understand it correctly you need to make the ajax call “only” when submit button clicked. It is not something that availity reactstrap validation provides but we have a workaround. It is not very pleasant but it gets the work done.

Errors: {JSON.stringify(errors, null, 2)}

Values: {JSON.stringify(values, null, 2)}

thank you for your help.

Hello, I have a question. After I log in, on a url page, I refresh the current page. The menu bar on the left is how to set the selected state of the current page.

Hi,

We could not fully understand what you asked, active state of the menu items should be set by itself.

You should check src/containers/Sidebar/index.js file setSelectedLiActive function.

You may check this on demo pages. http://gogo-react.crealeaf.com

Regards.

The secondary menu is when the page is refreshed. Not selected. How to set the active value when the secondary menu is refreshed.

In other words. const selectedlink = document.querySelector(".sub-menu a.active");, the value of this selectedlink is always null. I don’t see any difference from the example.

My sidebar data is requested from the api. In other words, in the constructor of Sidebar.js, go to the ajax request.

Hi,

Thank you for stating that you are doing an async request. I think the problem is, all the necessary functions are called before your menu rendered since rendering waits for the ajax call.

I assume you are getting the data from an api and putting it in state and rendering from state. After your ajax request complete and data is in the state please call following functions to set active items.
this.handleWindowResize(); this.handleProps(); this.setSelectedLiActive();
Regards.

感谢你的帮助。

别客气

Hello there. Still the problem before. What I am thinking about now is to execute the asynchronous request in componentDidMount to modify the leftMenu in props, and then in componentDidUpdate, use this.handleWindowResize();      this.handleProps();      this.setSelectedLiActive(); Renders the selected menu option. However, I don’t know why this is an infinite loop.

Hi,

I have tested our earlier suggestion with a timeout and it seemed working. Please provide us your code so we can look into it.

Regards.