Giter VIP home page Giter VIP logo

Comments (11)

alexborisov avatar alexborisov commented on April 19, 2024 7

Ok so I've made some progress on this. Addressing my first issue - you must (annoyingly) have the resource defined in the app <Admin> block otherwise you get the Cannot read property 'data' of undefined error. This is a little icky as not all of my resources need to be exposed, but whatever. This is because adding the resource sets up the redux store for it and ReferenceInput assumes it's there and tries to get a property on it.

@ilaif Addressing your issue I am now faced with the same problem. Inspecting the network traffic looks like for some reason ReferenceInput is calling my API with a ?filter={} parameter and since this is being parsed as a query to my db it returns back no results - which causes the input field to not show up at all. I think this is the same problem that your having.

from react-admin.

ilaif avatar ilaif commented on April 19, 2024 1

Ok, but it didn't solve the main issue, right?
The problem still remains and the 'ReferenceInput' which is a very basic feature is missing.

from react-admin.

alexborisov avatar alexborisov commented on April 19, 2024 1

Resolved

So the bulk of my issues were actually with the way I implemented my REST client. Specifically I am using a mongodb backing store and so my id keys are prefixed with an underscore. What I was missing was a mapping for all the relevant response actions. Once I added those in stuff started to work.

@ilaif take a look at my issue #140 where I managed to solve my issues with allowEmpty. At this point in time everything is working for me (with the latest release). It looks like it was a PEBKAC error all along... 😊

from react-admin.

ilaif avatar ilaif commented on April 19, 2024

@alexborisov Did you solve this issue?

I'm seeing that when I remove allowEmpty attribute the problem seems to go away, I tried adding allowEmpty to the SelectInput but it looks like it doesn't affect anything.

When removing the allowEmpty attribute from ReferenceInput I cannot get the selector to actually load. It looks like this:
image

Would appreciate a lead on this,
Thanks,
Ilai.

from react-admin.

alexborisov avatar alexborisov commented on April 19, 2024

@ilaif Sadly removing allowEmpty doesn't change anything for me. I still get this issue. It looks like the ReferenceInput component is just broken atm.

from react-admin.

ilaif avatar ilaif commented on April 19, 2024

@alexborisov Yes I've also added it in the and created a model for it etc...
The ReferenceInput component just can't handle empty results for the "default chosen" option, so basically it will never in create, or edit when the current value is null.

@fzaninotto I tried to get into the logic but it's pretty cluttered there, anyway we can help progress this? It's a very basic requirement and I would like to help in fixing it.

from react-admin.

alexborisov avatar alexborisov commented on April 19, 2024

@ilaif yeah it's empty result sets it can't deal with. I've moved further along by dropping the ?filter parameter in my custom REST client for the GET_MATCHING action, but now I'm faced with another bug - it's now complaining about duplicated indexes and refusing to show more than the first item.

warning.js:36 Warning: flattenChildren(...): Encountered two children with the same key, `1:$.$Asia`. Child keys must be unique; when two children share a key, only the first child will be used.
    in div (created by List)
    in List (created by Menu)
    in div (created by Menu)
    in ClickAwayListener (created by Menu)
    in Menu (created by DropDownMenu)
    in div (created by Paper)
    in Paper (created by PopoverAnimationVertical)
    in PopoverAnimationVerticalprintWarning @ warning.js:36warning @ warning.js:60instantiateChild @ ReactChildReconciler.js:41(anonymous function) @ ReactChildReconciler.js:72traverseAllChildrenImpl @ traverseAllChildren.js:69traverseAllChildrenImpl @ traverseAllChildren.js:85traverseAllChildrenImpl @ traverseAllChildren.js:85traverseAllChildren @ traverseAllChildren.js:164instantiateChildren @ ReactChildReconciler.js:71_reconcilerInstantiateChildren @ ReactMultiChild.js:189mountChildren @ ReactMultiChild.js:228_createInitialChildren @ ReactDOMComponent.js:699mountComponent @ ReactDOMComponent.js:524mountComponent @ ReactReconciler.js:47performInitialMount @ ReactCompositeComponent.js:370mountComponent @ ReactCompositeComponent.js:257mountComponent @ ReactReconciler.js:47mountChildren @ ReactMultiChild.js:240_createInitialChildren @ ReactDOMComponent.js:699mountComponent @ ReactDOMComponent.js:524mountComponent @ ReactReconciler.js:47performInitialMount @ ReactCompositeComponent.js:370mountComponent @ ReactCompositeComponent.js:257mountComponent @ ReactReconciler.js:47performInitialMount @ ReactCompositeComponent.js:370mountComponent @ ReactCompositeComponent.js:257mountComponent @ ReactReconciler.js:47mountChildren @ ReactMultiChild.js:240_createInitialChildren @ ReactDOMComponent.js:699mountComponent @ ReactDOMComponent.js:524mountComponent @ ReactReconciler.js:47performInitialMount @ ReactCompositeComponent.js:370mountComponent @ ReactCompositeComponent.js:257mountComponent @ ReactReconciler.js:47performInitialMount @ ReactCompositeComponent.js:370mountComponent @ ReactCompositeComponent.js:257mountComponent @ ReactReconciler.js:47performInitialMount @ ReactCompositeComponent.js:370mountComponent @ ReactCompositeComponent.js:257mountComponent @ ReactReconciler.js:47mountComponentIntoNode @ ReactMount.js:105perform @ Transaction.js:138batchedMountComponentIntoNode @ ReactMount.js:127batchedUpdates @ ReactDefaultBatchingStrategy.js:61batchedUpdates @ ReactUpdates.js:98_renderNewRootComponent @ ReactMount.js:321_renderSubtreeIntoContainer @ ReactMount.js:402renderSubtreeIntoContainer @ ReactMount.js:344renderLayer @ RenderToLayer.js:141componentDidUpdate @ RenderToLayer.js:68measureLifeCyclePerf @ ReactCompositeComponent.js:74(anonymous function) @ ReactCompositeComponent.js:726notifyAll @ CallbackQueue.js:67close @ ReactReconcileTransaction.js:81closeAll @ Transaction.js:204perform @ Transaction.js:151perform @ Transaction.js:138perform @ ReactUpdates.js:90flushBatchedUpdates @ ReactUpdates.js:173closeAll @ Transaction.js:204perform @ Transaction.js:151batchedUpdates @ ReactDefaultBatchingStrategy.js:63batchedUpdates @ ReactUpdates.js:98dispatchEvent @ ReactEventListener.js:150

Again I'm not doing anything magical here and my code is pretty much example boilerplate. My data has unique ID's and unique name property - no other fields. The option optionValue doesnt seem to do much either. Basically I'm assuming this is the result of some large regression, because otherwise this component is not in any condition to be part of master at all :(

I've still quite new to react, but I'd say the best way to move forward with this (and help out) is to start by writing component tests. At least that will simultaneously fix the patchy documentation and also give a clear idea of what's working and what to expect. Plus it would make refactoring much easier - because right now i don't know wtf if I start poking things...

from react-admin.

alexborisov avatar alexborisov commented on April 19, 2024

UPDATE Ok so I've made more progress. The duplicate key error was because I forgot to transform my _id key to id in my REST client since this is hardcoded into the library.

from react-admin.

alexborisov avatar alexborisov commented on April 19, 2024

@ilaif Yes it's...special 😁 I still don't have it working properly - sometimes is doesn't load in the data, sometimes it crashes the app when trying to navigate into the edit view because it throws. And yet magically it will then work. There is definitely a smell of a racy condition or something screwy with the state.

from react-admin.

fzaninotto avatar fzaninotto commented on April 19, 2024

I'm glad you solved it and that I learned PEBKAC.

Still, how could the developer experience be improved to avoid that future devs like you meet the same problems?

from react-admin.

alexborisov avatar alexborisov commented on April 19, 2024

Well regarding the first part I just needed to RTFM. Still perhaps a document that focuses a bit on the architecture behind the redux/restClient workings. Perhaps some detail on how the existing components work with this data. Also better test coverage (good, clear, readable tests are sometimes more useful than documentation) and making sure stuff is as SOLID as possible - especially when it comes to extending components or making new ones (so it's easy to write higher order components etc...).

As this project matures there will be less issues that are bug related so after that it's just a matter of clean architecture and concise documentation. I find the bulk of my frustrations are either from stuff not immediately working based off the examples (in most of these cases it was because of my not fully understanding the flow of data between api and component - especially since im quite new to react/redux), or its due to stuff not being flexible enough (like i want to add some non standard stuff to the UI, or a random button in the list header with a hyperlink or something else without reimplementing a ton of layout code). The latter is of course due to the tradeoff made by creating a generic tool such as this (it's hard to make stuff generic and straight forward yet super flexible at the same time).

Also a doc on how to correctly build the project from source (with prerequisites etc...) and anything else relevant to developing and contributing would be very handy 👍

from react-admin.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.