bobbingwide/react-sb

React UI for Genesis-SB theme

react-SB

React UI for Genesis-SB theme

A prototype of the code to satisfy requirements of Create single page view for selecting and displaying SB bigrams

To run the server:

cd \apache\htdocs\react-SB npm start

To visit the site:

http://localhost:8080

To generate the application for inclusion in bigram

npm run windows

To run the generated bundle

http://qw/react-SB/public

To merge into the genesis-SB theme

Copy public/bundle.js to genesis-SB/js/react-SB.js

Other notes

• Depends on WordPress 4.7
• Does not need WP REST API
• Originally developed with WordPress 4.6 and WP REST API
• But no longer supported; not even tested
• The react-SB code now depends on [github bobbingwide bigram] for the bigram custom post type and taxonomies.
• The genesis-SB theme expects the latest version of the React JS code to have been built as above.

react-sb's Issues

Cater for inclusion of the REST API to WordPress 4.7

WordPress 4.7 includes some of the logic that was implemented by the WP REST API plugin.
But the API has changed. So the code written for WordPress 4.6 and WP REST API may not work.
This is true for the react-SB requests that used the filter parameter.

The simplest solution is to change the code client code to use requests that do work.
In our case this means changing
/wp-json/wp/v2/bigram?filter[s-letter]=sletter-name
to
/wp-json/wp/v2/bigram?s-letter=sletter-id

The value passed needs to be the term_id rather than the term value.
This is already returned to the client so it's not a major problem.
The WP REST API plugin can be deactivated.

Same change for b-letter

How do we deliver the public bundle file?

Should this repository deliver the bundle.js file that's created by running
npm run windows or not.
The file is needed in the genesis-SB theme; so maybe the theme should be responsible for building it

Improve display of details and the items list

Move the details above the items list and improve the styling of the image and content.

When an SB has been selected the detail is currently displayed at the bottom of the page, below the list.
It would be nicer to display it at the top of the display.
The image ( if any ) should come after the title and before the details.
Allow a maximum width of 800px.

Cater for b-letter value of & which is displayed as &

Three problems.

1. The taxonomy term & is displayed as &
2. There are more than 31 taxonomy terms in the b-letter taxonomy. Currently 33.
3. But some of terms do not have an values. e.g. _ and ?. So maybe they shouldn't be listed.

Add whatwg-fetch polyfill to enable REST requests running on iPad or iPhone

When the react-SB page is viewed from my iPad or iPhone I don't get any data other than S B and Select something.
Why not?

Add logic to load data in chunks

The REST API works better when data is requested in chunks.
But you can't set posts_per_page to -1 and you can't set it to an arbitrarily large number in the hope that it will be big enough.

The original logic to load 31 posts_per_page for the s-letter and b-letter taxonomies doesn't work for b-letter ( see #4 ) and the logic to load s-words or b-words when an s-letter or b-letter has been selected also fails since it only loads 10 posts and that's not enough.

We need to implement the ability to load mutiple pages of results.

const BIGRAM_URL - should be determined dynamically at runtime

The demoApi class ( in rest-api.js file ) needs to know the url to which the REST API requests should be directed. This is currently hardcoded in the const BIGRAM_URL as http://localhost/bigram, equivalent to http://qw/bigram.

Requirement

We need a solution that will work when the real target site is http://bigram.co.uk

Invocation method	Server	Type	BIGRAM_URL
http://localhost:8080	webpack-dev-server	Dev	http://qw/bigram/
http://qw/react-SB/public	index.html	Dev / UT	http://qw/bigram/
http://qw/bigram/react-sb-page	page-react-sb-page.php	Test	http://qw/bigram/
http://bigram.co.uk/react-sb-page	page-react-sb-page.php	Prod	http://bigram.co.uk/

Proposed solution

Use window.location.hostname and window.location.protocol
If hostname is localhost or qw then set BIGRAM_URL to qw/bigram else set it to the hostname

Document the problems, questions and answers faced during the project

I think it would be nice to write up the Problems that I encountered while attempting to develop my first ReactJS and REST application including the Questions and, where available, Answers that I found myself asking. Some of the problems have been dropped into the problems folder, but are neither nicely formatted nor nicely explained.

Console logging - Implement a solution that can be turned on and off

The code currently uses console.log() to assist in problem determination.

• This shouldn't really be active in a production build
• but it would be nice if it could be enabled.

Proposed solution

Have a butchers at the possible solutions and choose something that will work well with React JS.