#ohheck.help

[myopicmage]

Error: Unable to Navigate

So Entity Framework Core doesn't support lazy loading of navigational properties. This isn't the worst thing in the world, but it does become a bit of a problem when given this fact:

If you change the query so that it no longer returns instances of the entity type that the query began with, then the include operators are ignored.

From the MS docs:

In the following example, the include operators are based on the Blog, but then the Select operator is used to change the query to return an anonymous type. In this case, the include operators have no effect.

using (var context = new BloggingContext()) { var blogs = context.Blogs .Include(blog => blog.Posts) .Select(blog => new { Id = blog.BlogId, Url = blog.Url }) .ToList(); }

So now, because of this, I have this monstrosity of a query:

var submissions = await _db.Submissions .Include(x => x.answers) .ThenInclude(x => x.question) .Include(x => x.answers) .ThenInclude(x => x.answer) .Include(x => x.answers) .ThenInclude(x => x.cardchoices) .ThenInclude(x => x.card) .Include(x => x.answers) .ThenInclude(x => x.choiceanswers) .ThenInclude(x => x.answer) .Where(x => x.surveyid == id) .Where(x => x.answers.Any()) .Select(x => x.answers .OrderBy(y => y.question.sortorder) .Select(y => new { question = y.question.sortorder, answer = y.answer.text, text = y.text, cards = string.Join(", ", y.cardchoices.Select(z => z.card.gameid)), selections = y.choiceanswers.Select(z => z.answer) }) ) .ToListAsync();

This is what I get for writing a form builder. I'm still not even sure how to transform the data so it shows up nicely in a table. I think I'm going to have to write some manual joins, which means messing with my model to add in explicit ids/foreign keys. Not gonna lie, I miss EF6 a bit.

[myopicmage]

On the topic of state

State management is hard. That's just a fact of life. It's why god-awful solutions like redux exist. It's why people write blog post after blog post about state management. It's arguably the reason that functional programming has made the resurgence it has. State management remains an unsolved problem.

Unless you ask the React community.

Just use redux!

I did use redux, on two other projects. And if I have to write another

function setThing(thing) { return { type: SET_THING, thing } } function thingReducer(action, state = initialState) { switch (action.type) { case SET_THING: return { ...state, action.thing }; default: return state; } }

I will scream.

So I decided to do my own state management on ohheck.help. this.setState() is very tempting in the early days, when your project is small, or when you're not dealing with much data. This isn't my first react project, so I'm familiar with how to structure things to minimize usage of this.state, and to do my best to rely on props. But when you bring react-router into the picture, things get a little more complicated. What happens in a standard master/detail situation?

For instance, I have a list of goups, and I want to pull up a subunit detail page. I've already downloaded the groups and subunit data. When I link to the subunit page, what do I do?

In react-router 3, you'd either rely on redux, or fetch the data from the server again on component load. Or maybe shove the data into localStorage.

However, in 4, there's a handy addition to <link>:

item.subunits.map((innerItem: Subunit, innerIndex: number) => <div key={innerIndex}> <Link to={{ pathname: `/dashboard/subunits/${innerItem.id}`, state: innerItem }}> {innerItem.name} </Link> </div> )

pathname remains the same as 3, but the new addition is state, which you can use to pass arbitrary data from one route to another. So in my Subunit component:

componentDidMount = () => { if (!this.props.location.state) { this.getData(this.props.match.params.id); } else if (this.props.location.state.id != this.props.match.params.id) { this.getData(this.props.match.params.id); } else { this.setState({ subunit: new Subunit(this.props.location.state), loading: false }); } }

There are three conditions to check:

there's no state data from being <link>ed to

we've received state by being <link>ed to, but for some reason the url doesn't match.

we've received data from a <link>

In the first two cases, the solution is to fetch() the data from the server, but we can skip that in the case that someone has clicked on a link to get to this page. It makes your logic a little more complicated, but it saves a request or two.

I'm actually reaching the point in this project where I'm thinking that redux might be necessary for state management, but I'm not ready to do the work of ripping out my manual state management just yet. It's only because there are a lot of cards, and pulling them repeatedly seems like a bad performance move.

[myopicmage]

React router 4 is kind of dumb

I'm not sure how to have a fallback route?

<Route exact path="/dashboard" component={a.AdminHome} /> <Route path="/dashboard/responses/:id" component={a.Responses} /> <Route exact path="/dashboard/responses" render={() => <h3>Please go back and select a survey.</h3>} /> <Route path="/dashboard/bycard/:id" component={a.SurveysByCard} /> <Route exact path="/dashboard/bycard" render={() => <h3>Please go back and select a survey.</h3>} /> <Route path="/dashboard/groups/:id" component={a.SingleGroup} /> <Route exact path="/dashboard/groups" component={a.Groups} /> <Route path="/dashboard/subunits/:id" component={a.SingleSubunit} /> <Route exact path="/dashboard/subunits" component={a.Subunits} /> <Route path="/dashboard/idols/:id" component={a.SingleIdol} /> <Route exact path="/dashboard/idols" component={a.Idols} /> <Route path="/dashboard/cards/:id" component={a.SingleCard} /> <Route exact path="/dashboard/cards" component={a.AllCards} /> <Route path="/dashboard/survey/:id" component={a.SurveyView} /> <Route exact path="/dashboard/survey" component={a.NewSurvey} />

I don't know. It's weird.

[myopicmage]

Typescript's implicit returns combined with jsx/tsx confound me.

renderCards = () => this.state.cards.map( (item: Card, index: number) => <div className="pure-u-1-4" key={index}> <img src={item.imageurl} style={{ width: '250px', height: '350px' }} /> </div> )

I feel like I need a return statement or two in there, but it works just fine. I really should look into how JSX is compiled.

[myopicmage]

Want to configure your Json formatter?

In ConfigureServices() inside of Startup.cs:

services.AddMvc().AddJsonOptions(options => { options.SerializerSettings.ReferenceLoopHandling = ReferenceLoopHandling.Ignore; options.SerializerSettings.NullValueHandling = NullValueHandling.Ignore; });

asp.net core uses json.net under the hood. No more annoying /Date(387298507349)/ when you return a DateTime.

[myopicmage]

A neat little thing

One of the neatest things I've learned is that controller type signatures in .net core have changed.

In all of the documentation, controller methods look like this:

public IActionResult Page() => View();

That's still necessary if you're going to return something like a View(), but if you're going to return an object, asp.net core supports WebApi-style method signatures, where you directly return an object.

public async Task<List<SomeDto>> AllThings() => await _ctx.Things.ToListAsync();

This is a bit cleaner than what you used to have to do:

public async Task<IActionResult> AllThings() => Json(await _ctx.Things.ToListAsync());

Also, now you get type safety!

[myopicmage]

ohheck.help

I've been working on a site named ohheck.help for some friends. It's a personal passion project, because I like to know things.

The site is written entirely in asp.net core 1.1, using entity framework core on postgresql. It was started in asp.net core 2.0, but entity framework 2.0 is not ready for prime time (even using sqlite), and the provider for postgres couldn't even implement FirstOrDefault(), which was a bit of a problem.

As a mostly windows/web developer, it's been really interesting to learn more about how to host stuff like this on linux. Nginx is kind of crazy, and actually running outside of IIS is different.

This isn't my first asp.net core application, but it's the first one I've put a huge amount of effort into.

At the time of this writing, the whole project is about 13k lines of code (admittedly not all of them mine), but that's actually not counting dependencies.

Anyway this blog is mostly to document stuff I've learned about .net core and typescript along the way.

Oh and check out the code on github