open-search | Source code for Open Cross | Computer Vision library

Ok,

this one was to be simple, but I am a couple of hours here trying to figure out how could I solve this issue.

First of all, I'm doing a React course, and I'd submitted the project the second time for the reviewer avaliation. Certainly is not the same reviewer and he/she has asked me to take other modifications different to the previous one.

The fact is that, the component was working properly, but the reviewer has suggested me to transform the component which was a Class Component into a Function Component and there was where my problem has started.

Please, I appologize but I'll have to put the entire stateless component code (which is a little big, I think), to explain next what is happen:

Hello dear colleagues,

I have a question based on a project I'm doing in a course I'm rolled.

All of my code is practicaly build, the only thing that I'm with difficulties to implement is a button which I have to display and by clicking this button it'll take me to a search page. I've implemented the link, which appears as a hyperlink in the main page, but it'd be in place of this hyperlink the button.

• My main page is displaying the hyperlink like this (note the hyperlink in the bottom of the page at the right side):

Main Page With Hyperlink

• But, according to the project requirements, the main page would display the button like this (with functionallity to take me to the search page, as the hyperlink does):

Main Page With Button Displayed

Below I show to you part of the codes I've done for the components:

1. Part of App.js code:
   • The beggining of the code:

I'm trying to search for a company, arrow down and click enter on inhersight.com

I have the following code but it doesn't seem to work:

I using Jquery-3.2.1, Jquery-Ui 1.12.1.In my JavaScript file:

It seems like react router does not work with redux, clicking the link in App component successfuly add '/search' to the URL but it does not navigate to the search page, the navigation only happens after i refresh the page not after clicking the link, so what is the problem here??

Here are my two components

index.js

Full code here

I am getting errors for udpateShelf is not defined, but Changeshelf is imported and it has properties assigned in the function, I'm so confused, why am I still getting undefined errors? I feel like I'm not understanding fully how react passes props through the components, if someone cane explain that better I feel that will help me with creating different components or functions for this app.

Bookshelf.js

I have two views/components in my React app that render books for a user. In ListBooks it takes a set of 'books' on the users list and renders them left to right on the relevant shelves. This works ok.

The issue is on the SearchBook component. When a user enters a search string I want to display results left to right without going off the screen.

The book objects themselves are rendered by the Book.js component.

Like so: xxxx xxxx xxxx

What I have currently is they are displaying one after the other on top of each other:

x x x

How do I display this correctly?

There's a fair amount of code so I've put the app itself in CodeSandBox as well as extracts in this post.

It will give you an error when you navigate to it but just click on the yellow tab in the sandbox's browser view and the app will work normally. The SVGs on the green buttons don't seem to render either but they are just for navigation.

ListBooks.js

I have an app that has two similar buttons on two pages. One for going into my search page and the other for going back to the home page, simples.

The issue I have is that I need the background-image value to be different but I don't want to duplicate the rest of the styling. How can I inherit or override the background-image property.

I have tried the below but it doesn't seem to work and no button is rendered for .return-home

Link:

I have a basic React app with a function in the App.js component to pass down as a prop for subsequent components to handle moving a book between shelves.

When I pass the function down one level, from App.js to ListBooks.js to be passed on the Books.js component which is where the user will select the new shelf and trigger the API call and state update, this works fine.

However when I then try to do the same from App.js > SearchBooks.js > Book.js it does not seem to work.

What I expect is for the updateShelf function to be called to update the book and the state.

Apologies for 'wall of code' if there's too much there, just not sure exactly where the issue is.

EDIT:

As suggested in comments, here is a CodeSandbox version: https://codesandbox.io/s/github/richardcurteis/myreads-udacity

App.js