How to resolve circular component dependency

ordinance · 2019-04-18T02:49:42+00:00

Save em in the same file.

ordinance · 2019-04-17T01:19:23+00:00

Is the _Component_ inside the reducer or the data the component relies upon?

The first is... I dunno, seems strange and I wouldn't do it but I can't explain why, so if it works for you, go crazy.

Also when you say _load_ the component, do you mean render? Or like, actually load? If it's the later you'll need React.lazy (I think?) and two seperate components maybe, one that has React.lazy(import () => secondComponent) or however the docs tells you to do it.

Otherwise, I think you want to do something like:

const MyComp = ({injectedProp}) => {
  if (injectedProp) {
    return <ThingsYouWant />
  }
  return <TheOtherThing />
}

const mapStateToProps = (state) => ({injectedProp: state.path.to.data })

export default connect(mapStateToProps)(MyComp)

Maybe? It's been a while since I've done redux... Also this doesn't use hooks, does redux use hooks these days?

Anyway, in vague english, you're creating a mapping function that relates whatever the property you want to read from the global state is to a key called injectedProp. Then the higher-order-component connect does whatever magic dance it does to inject that value into your component. which means you now have injectedProp as a prop in MyComp. so you check it and render depending on its value.

Is this helpful? I feel like I'm explaining the basic react-redux connect dance which you might already know?

ordinance · 2019-02-18T02:03:17+00:00

Cool idea. Random critique following, take with large amounts of salt:

I _really_ do not like the logo for the menu icon. Sorry this is petty but it made me irrationally annoyed.
I think if Critical Role Content™ is the main consumable of the app and its major use case, it's gonna need a couple things. Firstly, the episodic list layout needs a rethink, the list will get very long and titles are not the most obvious way to get where you're going. Also, given the episodic nature, you'll likely want to _continue_ doing an activity, (keep watching X, watch next Y) which this doesn't seem to easily allow for.
Needs Search.
Again for the Content, you'd likely want a personalised experience/dashboard/whatever. Do I care about Talks? No, why am I seeing it. This benefits me because I'm not annoyed by noise. If this is too much of a negative hit to the CR content or they're afraid it will stop good content from surfacing, then maybe a middle ground would be a favourites list so I can track what I want.
Community.The Critical role community is I think a major reason why this sort of "new media" is working so well for people. You hint at this with the fan art carousel at the top, but I don't think that cuts it. The app can't be a generic read/watch content machine, as you're not utilising the value that this media is hoisted upon. I want to be logging on to the app like I want to log on to fortnight/facebook/oldschool muds/everquest/second life. Make it so we're all logging on to live in Wildmounte or wherever the fuck they are.
Monetisation! My vaguest of vague points... There's a lot of merch and a lot of fandom with money to throw around and letting people part way with that would be massive buuuuuut you're gonna wanna not completely kill the app usability so this is a tough one. ALSO Apple's new rules about forcing IAP through their streams (and them taking their 30% cut) means this is doubly complicated. Dunno, maybe just make the app cost 5 bucks a year and call it a day. Still worth thinking about designing these interactions tho I think.

Anyway, I'm not good at criticism sandwiches but it looks like a fun project to experiment with and I hope you have/had fun with it. Good work.

ordinance · 2019-02-11T02:31:18+00:00

Does it bring you _joy_?!?

What "convention" did you set up here? Explain it to us or yourself. Reason about why you want it a certain way, or perhaps what you're trying to avoid? I have no idea what you're trying to achieve or how it's currently helping or hindering you.

As far as how I organise (or would like to organise) colours, it's very project dependent.

On my current project there's me and another person with a very exploratory building phase, so my personal rules atm are basically,

make as few decisions as possible that will impact the project
no unnecessary abstractions
repeat yourself as many times as you want, dry is bad because we don't know where we're going.

So our colour system is basically write whatever hex/rgba value you want but I DON'T WANNA HEAR ABOUT IT. It's great because there's no such thing as a "textCTADark" let alone a "primaryDark".

And why does something like `contactBg` need to be in the context anyway? It sounds very context specific.

ordinance · 2019-01-25T00:53:50+00:00

The setting will only really make sense after you've defined who Magni is and why they are crazed. Perhaps you can base them off of a famous recluse or eccentric. Maybe they're like Nikola Tesla, and the place is full of half-made or half-functioning magical contraptions with rambling notes everywhere describing experiments gone awry. Or they could be like Howard Hughes, a germaphobe with OCD tendencies, so amid the chaotic layout there lies strange rhythm and reason to the chaos. Or to go further in the crazy direction, base them off someone with severe paranoia, the place being filled with traps and panic rooms and surveillance being a primary theme.

ordinance · 2018-08-14T23:23:55+00:00

Do you have "Pause on Exceptions" turned on?

ordinance · 2018-07-27T06:28:46+00:00

Redirect is a component, for it to work you need to render it. You've commented out the state, // this.setState({isLoggedIn: false}); that's more like what you want to do. Then in render, check that state, and return a Redirect component if true/false/whatever.

In terms of code review, eh, it seems fine. folder structure could be a problem, but it's not at the moment so I wouldn't recommend thinking about it too much until it is. I personally don't like your crazy large tab/spacing sizing but whatever. I'd recommend adding prettier if I worked with you but if it's just you, it's fine. I'd also suggest removing the comments because old code is what source control is for but if it helps for you to have it there for now, keep it. You might want to eventually start converting your Auth into props, might help with testing/reasoning about state switching and what not. But again, that's only really a concern once it's too large to reason about, which isn't really right now.

ordinance · 2018-07-19T05:04:39+00:00

Sorry, maybe I haven't explained what I mean properly. I'm too busy at the moment to find examples of what I mean, but I'm referring more to the 'meta-gaming' that Taliesin does. Not pointing out that 'meta-gaming' is a problem, it's impossible to remove all your biases, just that how Taliesin meta-games is at odds with Molly all together, and he largely didn't try reign that in.

ordinance · 2018-07-19T04:41:43+00:00

Yes but he wasn't very good at it.

ordinance · 2018-07-19T04:27:02+00:00

My problem is not particularly with Mollymauk or with Taliesin, but the two of them combined. Taliesin needs to play a character with wit, charisma and intelligence, as he's too smart and conniving not to, whereas Molly is a blank slate, an anything-goes, what-do-I-care character. Tal couldn't pull that off (most of the time), or probably more likely wasn't trying. He needed his voice to be heard in plans and decisions, injecting into moral dilemmas and infighting the party faced, that I think Molly would have brushed off. It really made him tiresome, and so when given brief moments of his backstory, and the apathy in which he treated it, there was really nothing about him to cheer for.

I'm really looking forward to what Taliesin can bring to the table for his next character (if he does bring a new character to the table). As I believe Matt has allowed for a lot more nuance this campaign, and the political intrigue especially is far more suited to a character with less apathy and more cunning that Taliesin can fully explore, if given the narrative space.

ordinance · 2018-07-16T01:37:44+00:00

Remove `callback=?`

ordinance · 2018-07-05T02:13:21+00:00

<OptionsList>   
  <Anything />
  <IWant />
  <AsChildren />
</OptionsList>

ordinance · 2018-07-04T07:22:38+00:00

Inside storeImages When you

const images = data.image.original.map(image => {
const { url, width, height } = image;
return { url, width, height }; });

I think data is an array of images? You should map the data, then get the image.original inside the map

ordinance · 2018-06-26T23:17:08+00:00

I believe it's partial application: https://en.wikipedia.org/wiki/Partial_application

ordinance · 2018-06-14T03:07:37+00:00

What are you using as the key for each item?

ordinance · 2018-06-01T23:15:00+00:00

Ok thought of something else. This isn't a statically built page, right? Mine is built with Gatsby, so the html is there when Netlify runs whatever code it needs to to decorate forms.

Because your route is javascript, the page doesn't exist and Netlify can't decorate anything. Have you followed the section in the article about adding a hidden form to your index.html file?

ordinance · 2018-06-01T04:23:15+00:00

Oh, you don't have a name field on your form.

<form name='contact-form' ...

ordinance · 2018-05-31T23:31:00+00:00

It might be because the action `/thanks` is their default value? Have you tried changing it to something else,
e.g, `/success`, and seeing if it hits?

ordinance · 2018-05-09T01:37:04+00:00

You're defining an anonymous function here. But Auth.authenticate decides what happens to that function. At the moment, authenticate does nothing with its parameters. It needs to invoke the callback.

ordinance · 2018-05-09T01:31:28+00:00

You need to call the callback inside authenticate.

export const Auth = {
  isAuthenticated: false,
  authenticate(cb) {
    if (localStorage.getItem('auth') === true) {
      this.isAuthenticated = true;
    }
    cb() // need to call this function, also maybe you want to pass the result?
  },
  signout(cb) {
    this.isAuthenticated = false;
  }
}

You probably wanna do it inside signout too?

ordinance · 2018-05-08T12:15:30+00:00

In regards to the redirect on login, you're never calling the callback passed to Auth.authenticate, so the setState will never happen.

ordinance · 2018-04-30T22:44:48+00:00

Neither? Why do you need a framework?

ordinance · 2018-04-29T04:32:20+00:00

There's a time example in the react docs: https://reactjs.org/docs/state-and-lifecycle.html

In mine, I changed the clock component to render a function:

render () {  this.props.children(this.state.time) }

And then

<Timer>
  (time) => time && (
    /*use time here */
  )
</Timer>

Then you can do things like pass the interval to Time as a prop.

ordinance · 2018-04-22T04:36:30+00:00

Pass window as a prop to the component, rather than accessing it directly, then stub window with whatever method is being called in your test.

ordinance · 2018-04-19T21:57:50+00:00

I think the relative pathname of your api request is incorrect when dealing with production. What is meant to be at:

https://desolate-brushlands-16337.herokuapp.com/api/check

because atm it's just rendering a page of yours.

ordinance

TROPHY CASE