Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
Michelle Tilley
@BinaryMuse
@aphelionz I don’t think there’s a good solution for mixins in ES6 classes myself. If you really want to use classes instead of React.createClass, I would go with a higher-order component solution
Mark Robert Henderson
@aphelionz
I guess if I really want to use ES6 classes I need to switch to a different flux implementation
Mark Robert Henderson
@aphelionz
btw ReactMixin.onClass(NewCarePlan, Fluxxor.FluxMixin(React)); seems to be working
js
@js08

am new to react...i am finding very difficult in writing a simple animation

  • I have anchor tag which is my search icon
  • when I click the search icon the text box should open and when i click the icon the textbox should close back with slide functionality
  • everything they have created inside the sportsHeader class
  • and in render function you can see my html
  • when the page loads I am make the text box as display none
  • when I click the icon the box should open up.
    -providing my code in fiddle too

https://jsfiddle.net/n5Luz6ym/72/

react code

class sportsHeader extends React.Component {
    constructor(props) {
        super(props);
        this.sportsSearchPanel = this.sportsSearchPanel.bind(this);

    }

    sportsSearchPanel() {
        console.log("sportsSearchPanel" +this);        
    }

    render() {

        return (
            <div className={'sportsHeader sportsHeader--' + this.props.layout} role="banner">

                <div className="sportsHeader-NBA">
                    <a onClick={this.sportsSearchPanel} href="javascript:;" className="sportsHeader-NBA-search">
                        <span className="hidden">Search <abbr>NBA</abbr>.com</span>
                    </a>
                    <input className="sportsHeader-NBA-search-input" type="text" />

                </div>

            </div>
        );
    }
}


css

.sportsHeader-NBA-search-input {
    border: 1px solid red;
    display: none;
}
Michelle Tilley
@BinaryMuse
@js08 I’ll try to take a look at this when I’m home, but just so you know this room is specifically for the Fluxxor library. You may have more luck posting in a more generic React channel, or on Stack Overflow ^^
js
@js08
@BinaryMuse I tried other places too but no luck :(
Can you please help me
js
@js08

I have a prototype when we click that icon the text box opens..
in the same way in my codebase I am trying to make my test box to close and open...
here instead of icon in css I am using image
i am using the same prototype code in my code base..
but its not working...
I think some problem with the below line div className={icon-search-container ${this.state.active ? 'active' : ''}}>

in my protype code they are rendering at

in my codebase I am not sure where to render -providing both the prototype and my codebase in fiddle
i have even reduced the css but still not able to find out :(
prototype code - working http://codepen.io/tasssik/pen/yeGozR

Not working code http://codepen.io/anon/pen/zrymwq

main code to be fixed

<div className={`icon-search-container ${this.state.active ? 'active' : ''}`}>

<a onClick={this.handleClick} href="javascript:;" className="fa fa-search sportsTopSection-navUtilities-search">
<span className="hidden">Search <abbr>NBA</abbr>.com</span>
</a>

<input type="text" ref='search'className="search-input" placeholder="Search" onBlur={() => this.setState({active: false})}/>

<span className="fa fa-times-circle" onClick={() => this.setState({active: false})}>
</span>

</div>

js
@js08
I am new to react..
i am trying to write a simple menu functionality...
when i click choice A the heading content should be replaced my choice a and show its lists..
similarly when i click choice b the choice a should be replaced by choice b and lsit down its nested list value..
providing my code below...
right now I am able to render the html values but not sure how to proceed.. need help :(
http://codepen.io/anon/pen/wMRVJd
Steve Barbera
@whobutsb
Hello all! I have a quick question about how getStateFromFlux() interacts with getInitialState()
Does getStateFromFlux() overwrite the getInitialState()?
What if I have both methods, in my class? For some reason if i use getStateFromFlux my getInitialState values seem to disappear, even though i'm not setting them in getStateFromFlux
Thanks for the help!
Claire Martinez
@tirams
hey @whobutsb I was just debugging something similar yesterday where I was refactoring some code moving from the component into flux action/store. And I had bothe getStateFromFlux() and getInitialState() in my component. The init was getting the results from both calls and merging them, I think it logged an error if there were any properties that were in both return values.
Andrew Blakey
@ablakey
Is there a clean way to use ES6 classes for actions in Fluxxor? Ie. Binding a class rather than an object? I would love to describe my actions in classes to become more consistent with the rest of the codebase I'm working on.
Andrew Blakey
@ablakey
@js08 I'm not familliar with placing curly braces around a parameter in a component tag. Is that what you mean to do?
js
@js08
@all made progress...but stuck with error need help https://gist.github.com/js08/dfeab2df8b68240297eb
Arthur Schwaiger
@Colmea
Hi ! I'm new to React/Flux/Fluxxor/[insert Flu-Library] and looking for advices. I have complex models class (not especially complex data, but complex methods, nested objects inside them, ...). In my current app, I directly play with these class like this: "var hasIntersections = MyGlobalStore.project.getObjectById('myObject').checkIfIntersects(); if (hasIntersections) MyGlobalStore.project.getObjectById('anotherObject').setIntersection(true);" . That's super easy because all the logic is behind my model objects and I easily fetch child objects in my project. I find the Flux/Fluxxor unidirectional flow really interseting, but I don't see how to handle such complex class (Project, Project.Objects, Project.Object.Transformations, ...) in the store. Do you have some advices ? Everyone told me to forget about "models" and think the Flux way (ie functions in store), but I'm afraid to lost my well-organized-and-full-of-usefull-methods class, and furthermore all the relations between my class models ("Project.getObject('myObject').getTransformation('transformationId')")
texirv0203
@texirv0203
@all need help...I tried but not able to proceed https://gist.github.com/js08/0ec3d70dfda76d7e9fb4
Albert
@holoiii
I'm following the guide for handling async actions here: http://fluxxor.com/guides/async-data.html - what's the best way to make an instance of an api client available to the action? Should I pass it in to the component and then pass it to the action as an argument upon dispatch?
The example in the guide used a global variable to store the client api which was then available to the action creator
But I want to use an instance of an api client which isn't available in the global scope
Albert
@holoiii
Another question - what's a good way to dispatch multiple actions that need to happen one after the other?
ushlepok
@ushlepok

i have fluxxor app with react 0.13 and react router 0.13. i want to update dependencies and use latest react with react-router 2. previously react router had an instance that i could pass to stores like this:

var router = Router.create({
  routes: routes,
  location: Router.HistoryLocation
});

var flux = new Fluxxor.Flux(getStores({router: router}), actions);

but now there is no such instance
i haven't yet understand how to make transitions from stores

ushlepok
@ushlepok
solved this problem %)
friendOfOurs
@friendOfOurs
Is it a good practice / good design principle to have components "communicate" with stores only on the very bottom level? I propagate the flux instance from the root app down through all levels of component hierarchy and have very atomic components speak with e.g. Input. I am asking because I read that the best practice is to have state in the top level and to propagate it down the hierarchy to child components
Arthur Schwaiger
@Colmea
It's not a good practice
Actually, you should keep in mind that the less you "fluxify" a component (listen to store, trigger actions), the more it's reusable in another part of your app
You shouldn't use flux instance in your Input, never
Arthur Schwaiger
@Colmea
The solution is to create smart and dumb components. Dump components are "real" React components, which receive props and display content based on these props. On the opposite, smart components are kind of parent containers that are connected to flux and are responsible to fetch data from store, call actions, and so on.
vivek poddar
@vivekimsit
@/all guys I need to learn maintainable and flexible front end architecture, I have experience with Angularjs but I am not specific to any framwork, I need to learn best practices, is this the right place?
Arthur Schwaiger
@Colmea
Maybe you should start with Flux concept. Then start with à Flux implementation like fluxxor (you also have Redux or Alt.js)
Note that Flux concept is better with React.js or à similar view layer
r0ber70
@r0ber70
btw ReactMixin.onClass(NewCarePlan, Fluxxor.FluxMixin(React)); seems to be working Thank you, saved me a lot of trouble! :D Please put this in the docs!
Jay Nanavati
@jaysnanavati
Hey - Im trying to understand the "global state" issues with flux architectures
Nitish Dhar
@nitishdhar
Hello people
Anyone around?
I need some help with dependent stores e.g. Data is fetched for one store and now in the UI I need to fetch data for its association.. How can I do this after the first store is done & has completed its actions
Basically how can I call an action after a previous action is done
Punita Ojha
@punitaojha
This message was deleted
texirv0203
@texirv0203

hi,

  • I am trying to learn rxjs.
  • I have a simple application retrieving values from api through rxjs.
  • I am trying to achieve Set token expiration to 2 minutes and if backend service responds with a 'Unauthorized' error, get the token again and use it.
  • can you guys tell me how to add it to my code.
  • providing my code below.

http://jsfiddle.net/5n7qdcx7/

Rx.Observable.fromPromise($.getJSON('https://api.github.com/users'))
                .subscribe(users => {
                    console.log('users ready', users);

                    $('.pai-del-menu').hide();
                    var grid = $("#grid").kendoGrid({
                        dataSource: {
                            data:
texirv0203
@texirv0203

hi,

  • initialy when I go sports.com and from there if I go to players it works fine.
  • after that in the same players url if I enter I am getting the below error message.
  • any idea how to fix in js

http://sports.com/players/playersJumping


Error

HTTP Status 404Not Found

Type Status Report

Message /players/playersJumping

Description The origin server did not find a current representation for the target resource or is not willing to disclose that one exists.

Apache Tomcat/8.5.23
Mudit Khurana
@avacode
Hi I have some questions about making ajax calls in fluxxor/react architecture. Is this room still active?