Dear Tim,
It’s looking better:
I’m no artist but you can see I’ve created some additional icons – a foray into icon design. I don’t want to rely on any external art resources for this project so I’ve made an effect to design the icons and images myself. The particular designs that are “new” in the sense I made them last night are visible to the left in the feed (I’ll probably need a heading there). These darlings were made using Inkscape solely so I could turn them into SVG. They also can adhere to my very specific design principles:
- Simplicity – nothing complicated, else they won’t be recognisable.
- Colours are sparse – too many colours add to the complexity so this is basically part of the Simplicity principle
- Straight lines and neat curves – nothing messy. I mean, for the constituency symbols, this gets lost, but for my feed, I want it to be fairly obvious from the look what has occurred.
- Recognisable – this may get overlooked, but if it’s a good thing, an arrow up and a thumbs up are known and recognised as good things. The left-arrow is a bit of a stretch but give thanks to Imgur’s Meh button for that.
You can have them if you like them. They’re good for my use, maybe not others, but eh. These are just the PNGs, you can access the SVGs when my site’s live.
So let’s look at coding: today I’ll be sharing some real code as opposed to some pseudo-code. You’re gonna love it:
class AssemblyFeedComment extends React.Component {
render() {
var content
if(!this.props.data.candidate_id || this.props.style_calc == 'low')
{
if(this.props.data.style == 'positive' || this.props.data.style == 'pos_success' || this.props.data.style == 'neg_failure' )
{
content = <div><i className="has-text-success">{this.props.data.message}</i></div>
}
else if(this.props.data.style == 'negative' || this.props.data.style == 'pos_failure' || this.props.data.style == 'neg_success')
{
content = <div><i className="has-text-danger">{this.props.data.message}</i></div>
}
else
{
content = <div><strong className="has-text-black">{this.props.data.message}</strong></div>
}
}
else
{
content =
<div>
<strong>{this.props.data.first_name} {this.props.data.last_name}</strong>
<br/>
<i>{this.props.data.message}</i>
</div>
}
if(this.props.data.style=="assembly_start")
{
var image_id = 'ass-pol-new.svg'
}
else if(this.props.data.style=="vote_begin")
{
var image_id = 'ass-pol-vote.svg'
}
else if(this.props.data.style=="assembly_finish")
{
var image_id = 'ass-pol-fin.svg'
}
else
{
var image_id = ("con-" + this.props.data.constituency_id + ".svg")
}
var image = (
<figure>
<p className={`image is-64x64`}>
<img src={`/images/${image_id}`} />
</p>
</figure>
)
var commentClass = styles.feedCommentTop
if(this.props.style_calc == 'mid')
{
if(!this.props.data.candidate_id){
if(this.props.data.style == 'vote_for')
{
var image_id = 'ass-vote-for.svg'
}
else if(this.props.data.style == 'vote_against')
{
var image_id = 'ass-vote-against.svg'
}
else if(this.props.data.style == 'vote_success')
{
var image_id = 'ass-vote-success.svg'
}
else if(this.props.data.style == 'vote_failure')
{
var image_id = 'ass-vote-failure.svg'
}
}
else if(this.props.data.style == 'positive')
{
var image_id = 'ass-for.svg'
}
else if(this.props.data.style == 'negative')
{
var image_id = 'ass-against.svg'
}
else
{
var image_id = 'ass-meh.svg'
}
image = (
<figure>
<p className={`image is-32x32`}>
<img src={`/images/${image_id}`} />
</p>
</figure>
)
commentClass = styles.feedCommentMid
}
else if (this.props.style_calc == 'low')
{
image = null
commentClass = styles.feedCommentLow
}
return (
<div className={commentClass}>
{image}
<div className="ml-3">
{content}
<hr className={styles.commentRule}/>
</div>
{this.props.children}
</div>
)
}
}Oh isn’t it beautiful. The names beginning with ‘ass’ just scream amateur right? Yeah, this is a bit of first draft code to get it out there and get it to work. Am I happy with it? No way. Am I going to fix it?
ABSOLUTELY
Because I’ve said in my previous posts how much I have to say ‘it works’ and leave it, but this monolith of ridiculously long code will bite me in my ass ironically and if I need to change it a month down the line I will not understand a lick of it.
The foremost problem is a lot of my logic is reliant on a simple property – style_calc. This was a placeholder name and would’ve referred to the fact it contained my style choice pre-calculated. Obviously I did not pre-calculate it. So let’s do that now huh?
The basic format of my component is pretty much the same for each object in the feed, or that’s what I thought. There are three distinct levels: top, mid, and low. The top level is some higher process in the assembly eg. The assembly has started, someone has brought an assembly to the policy, or a vote has begun. The mid level is all the actions taken by the MPs. Then the low level is just to show if someone is arguing against or showing the success/failure of an action. It may be I decided to just do away with having arguments in this lower level. So let’s rename these to something like top, action and comment, and it’ll be more obvious how they relate.
Each level contains an image, except for comment; top has a 64×64 image, action has a 32×32 image. Each level contains two levels of writing, apart from top levels that don’t have a candidate associated, and for comments that are just the one. The comments are the only coloured text. Every level has a horizontal rule at the bottom. So far, what we’re gearing from this is that comments are COMPLETELY different to the rest. So maybe what needs doing from the get go is to create two separate components to deal with this.
(Side note: idea time. Just thought that the arrows should correspond to if the action succeeds or fails. Maybe a success should show a grayed out up arrow, and a failure a grayed out down arrow. Would imply more if there’s more successes than failures.)
So let’s create three components, one being AssemblyFeedTop, one being AssemblyFeedAction, and one being AssemblyFeedComment. Then my logic will become more obvious and I immediately can remove the if statement on the style_calc property.
Now within each component, they have access to a data property that comes from my database and holds what kind of style it should take. That’s why we have some big old if logic in the middle. Now this break up of the components will split it around and remove some odd logic in the ‘if’s. Let’s do a little code update:
class AssemblyFeedTop extends React.Component {
render() {
<div className={styles.feedTop}>
{image}
<div className="ml-3">
<strong>{this.props.data.first_name} {this.props.data.last_name}</strong>
<br/>
<i>{this.props.data.message}</i>
<hr className={styles.commentRule}/>
</div>
</div>
}
}
class AssemblyFeedAction extends React.Component {
render() {
<div className={styles.feedAction}>
{image}
<div className="ml-3">
<strong>{this.props.data.first_name} {this.props.data.last_name}</strong>
<br/>
<i>{this.props.data.message}</i>
<hr className={styles.commentRule}/>
</div>
</div>
}
}
class AssemblyFeedComment extends React.Component {
render() {
var content
if(!this.props.data.candidate_id || this.props.style_calc == 'low')
{
if(this.props.data.style == 'positive' || this.props.data.style == 'pos_success' || this.props.data.style == 'neg_failure' )
{
content = <div><i className="has-text-success">{this.props.data.message}</i></div>
}
else if(this.props.data.style == 'negative' || this.props.data.style == 'pos_failure' || this.props.data.style == 'neg_success')
{
content = <div><i className="has-text-danger">{this.props.data.message}</i></div>
}
else
{
}
}
if(this.props.data.style=="assembly_start")
{
var image_id = 'ass-pol-new.svg'
}
else if(this.props.data.style=="vote_begin")
{
var image_id = 'ass-pol-vote.svg'
}
else if(this.props.data.style=="assembly_finish")
{
var image_id = 'ass-pol-fin.svg'
}
else
{
var image_id = ("con-" + this.props.data.constituency_id + ".svg")
}
var image = (
<figure>
<p className={`image is-64x64`}>
<img src={`/images/${image_id}`} />
</p>
</figure>
)
if(this.props.style_calc == 'mid')
{
if(!this.props.data.candidate_id){
if(this.props.data.style == 'vote_for')
{
var image_id = 'ass-vote-for.svg'
}
else if(this.props.data.style == 'vote_against')
{
var image_id = 'ass-vote-against.svg'
}
else if(this.props.data.style == 'vote_success')
{
var image_id = 'ass-vote-success.svg'
}
else if(this.props.data.style == 'vote_failure')
{
var image_id = 'ass-vote-failure.svg'
}
}
else if(this.props.data.style == 'positive')
{
var image_id = 'ass-for.svg'
}
else if(this.props.data.style == 'negative')
{
var image_id = 'ass-against.svg'
}
else
{
var image_id = 'ass-meh.svg'
}
image = (
<figure>
<p className={`image is-32x32`}>
<img src={`/images/${image_id}`} />
</p>
</figure>
)
}
else if (this.props.style_calc == 'low')
{
image = null
}
return (
<div className={styles.feedComment}>
<div className="ml-3">
<strong className={textClass}>{this.props.data.message}</strong>
<hr className={styles.commentRule}/>
</div>
</div>
)
}
}It’s still messy but bear with. We’ll get there. You may notice I’ve created them as classes. It’s always purported as being a design choice, and as I don’t need any of React’s hooks for these I’m creating them as classes so I have a little more fine control over how they act. I could add some functions into them later. If I wanted. I’m likely not to but there’s no harm in doing it like this.
I notice I had some odd paragraph objects in the JSX for the images. Gonna remove that and hope it doesn’t break it. Must be a remnant off a copy. I’m going to add a textClass variable in AssemblyFeedComment to register the colour of the text in the if statement. Shortens it from holding the whole JSX. That component is now a lot smaller. I’ll also just write some comments so I know what’s going on in future.
The logic for the image in the AssemblyFeedTop can come out now as well, and we may as well make it shorter by using ‘switch’ as we are just comparing the variable style to every option. This will also be done in AssemblyFeedAction too – which mess it all up with various ‘if’s that don’t differ?
class AssemblyFeedTop extends React.Component {
render() {
var image_path
// Determine image off style
switch(this.props.data.style)
{
case "assembly_start":
image_path = '/images/assembly-start.svg';
break;
case "vote_begin":
image_path = '/images/assembly-voteBegin.svg';
break;
case "assembly_finish":
image_path = '/images/assembly-finish.svg';
break;
default:
image_path = ("/images/con-" + this.props.data.constituency_id + ".svg");
break;
}
return (
<div className={styles.feedTop}>
<figure className="image is-64x64">
<img src={image_path} />
</figure>
<div className="ml-3">
<strong>{this.props.data.first_name} {this.props.data.last_name}</strong>
<br/>
<i>{this.props.data.message}</i>
<hr className={styles.commentRule}/>
</div>
</div>
)
}
}
class AssemblyFeedAction extends React.Component {
render() {
// Determine image off style and whether there's a candidate involved
var image_path
if(!this.props.data.candidate_id){
// No candidate means it's the final tallies of a motion being passed
switch(this.props.data.style)
{
case "vote_for":
image_path = '/images/assembly-votesFor.svg';
break;
case "vote_against":
image_path = '/images/assembly-votesAgainst.svg';
break;
case "vote_success":
image_path = '/images/assembly-votePassed.svg';
break;
case "vote_failure":
image_path = '/images/assembly-voteFailed.svg';
break;
}
}
else
{
// A candidate means it's an action by a candidate
switch(this.props.data.style)
{
case "positive":
image_path = '/images/assembly-actionFor.svg';
break;
case "negative":
image_path = '/images/assembly-actionAgainst.svg';
break;
default:
image_path = '/images/assembly-actionMeh.svg';
break;
}
}
return (
<div className={styles.feedAction}>
<figure className="image is-32x32">
<img src={image_path} />
</figure>
<div className="ml-3">
<strong>{this.props.data.first_name} {this.props.data.last_name}</strong>
<br/>
<i>{this.props.data.message}</i>
<hr className={styles.commentRule}/>
</div>
</div>
)
}
}
class AssemblyFeedComment extends React.Component {
render() {
var textClass
// If the comment is a positive action, a success on a positive action, or a failure on a negative action, we display in green
if(this.props.data.style == 'positive' || this.props.data.style == 'pos_success' || this.props.data.style == 'neg_failure' )
{
textClass = "has-text-success"
}
// If the comment is a negative action, a success on a negative action, or a failure on a positive action, we display in red
else if(this.props.data.style == 'negative' || this.props.data.style == 'pos_failure' || this.props.data.style == 'neg_success')
{
textClass = "has-text-danger"
}
// Otherwise, it's black and informational
else
{
textClass = "has-text-black"
}
return (
<div className={styles.feedComment}>
<div className="ml-3">
<strong className={textClass}>{this.props.data.message}</strong>
<hr className={styles.commentRule}/>
</div>
</div>
)
}
}And now we’re clean and finalised. If you don’t know why these don’t nest, it’s because it’s not a true comment thread – I want the feed chronological, so actions NEVER reference anything but something that just happened. Therefore I can have the feed run nice and long. So let’s save and update my filenames and see how it all looks.
Oh my god it still works – I was half expecting that not to be the case. Well, now the logic can be followed much better, and I can think a little more on how I want the styles to organise things. Everything’s tight! The javascript is no longer a nightmare. And the feed is shaping up to be a formidable page as I wanted.
I hope this insight into how my mind works helps follow my work. I’m sorry for the big long lines of text. As you can see, my method is simple for doing code – get it working, clean it up afterwards. Just like how you dealt with the government of Serbia! I swear, I still get calls about that. Just make sure you nip over there after your work in Switzerland. They miss you.
Yours,
Stan
WoodenSocks 