Add no result found message issue#53 by Chaitya62 · Pull Request #56 · WebMemex/webmemex-extension

Chaitya62 · 2017-03-06T17:02:10Z

I added a simple if statement and a message style in ./ResultList.jsx and ./ResultList.css

obsidianart · 2017-03-06T17:04:43Z

src/overview/components/ResultList.jsx

+
+    //if no result found display relavant message
+    if(searchResult.rows.length === 0){
+        return <p className={styles.message}>


unless it is a project decision what do you think of the style (I've seen it most often because it keeps opening close lines)

return ( No result found )

Sorry didn't get you? is it about the way I wrote the code or the css styling

only about indentation, and only if you think my way is better, and only if my way doesn't violate the rest of the project. To show another big project on this style https://github.com/acdlite/redux-router/blob/master/examples/basic/index.js#L49 (line 49)
I normally don't put weight on style but I started like that with the return and it made my life much harder when the project grew

@obsidianart okay got it! but the ul just below that had

return <ul className={styles.root }> . . </ul>

So I also did the same thing but yes we can surely choose one of the way to write it and include it somewhere in the project description Readme.md or coding guidlines page in the future.

I ll wait for @Treora 's input in this will change it if necessary ! though I completely agree with you @obsidianart and yes I am also picky about coding styles at times it's doesn't matter at the early stage but helps a lot later on.

This is one of those stylistic choices where I sway back and forth myself. I'd say keep it either way you like now, and we will restyle the whole codebase at some moment if we think it's better. Perhaps combined with a switch to indenting with only two spaces, I just use four because of old Python habits, but it may be less appreciated in the general javascript etiquette.

I'm very free about style. I don't care about semicolon, spaces, and many other things. This is one of the few things I had a real issue with but the final choice for me is your.

Treora · 2017-03-06T20:07:23Z

src/overview/components/ResultList.jsx

+    if(searchResult.rows.length === 0){
+        return (
+            <p className={styles.message}>
+            no result found


Talking about style, please do indent this line too. Also "no results found" sounds slightly wrong, I would either say "No results", or "No pages found" or something like that.

I now realise it would be good to make a special case for when the database is empty. "No results" is not a nice welcome message on a fresh install. Perhaps move the current code to the Overview instead of the ResultList, then test for both the length of searchResult and the existence of a query, and if both are empty show something nice, e.g. "This is your digital memory, watch it grow as you browse the web!"

Cool I ll make the necessary changes

Chaitya62 · 2017-03-06T21:52:23Z

In the 4th commit I added a new method in Overview class though I am not proud of what I named it are there anyother suggestions? I could not come up with a better option.

obsidianart · 2017-03-06T22:19:08Z

src/overview/components/Overview.jsx

            >
            </input>
-            <ResultList searchResult={this.props.searchResult} />
+            {this.createResultList()}


this should probably be a component not a function.
I had the same approach at the beginning but the idea of JSX is towards composition.
I don't know if the current code structure allows 2 elements in the same page.
otherwise, the quickest

{isFirstVisit && This is your digital memory, watch it grow as you browse the web! } {!isFirstVisit && <ResultList searchResult={this.props.searchResult} />}

Again, that's my opinion, and React has many opinions, so the choice is yours

Chaitya62 · 2017-03-07T03:15:29Z

I didn't want to make a new component just for a special case maybe If not function the second approach you pointed out is a feasible solution

Treora · 2017-03-07T16:22:40Z

|{isFirstVisit && This is your digital memory, watch it grow as you browse the web! } {!isFirstVisit && <ResultList searchResult={this.props.searchResult} />} |

Two tests? Probably it is not the cleanest solution either, but this became my usual style in this project: ``` { isFirstVisit ? ... : <ResultList .../> } ``` But if the lines get too long, perhaps define the message as a string constant up in the file. Interesting how many styles there are indeed.. and how it seems one of those things where humans are more fussy about than computers. :)

Chaitya62 · 2017-03-07T16:35:38Z

Made the changes !

Treora · 2017-03-07T17:29:47Z

Just curious where the original message went now, the one telling there are no results.. ;)

Treora

Looks good; just some small style stuff:

keep and add newlines at end of files
give more meaningful names to the constants
some indentation

Treora · 2017-03-08T13:33:41Z

src/overview/components/Overview.jsx

+                              this.props.searchResult.rows.length === 0);
+
+        //message for first visit 
+        const message = 'This is your digital memory, watch it grow as you browse the web!';


Too generic name. firstVisitMessage perhaps?

Treora · 2017-03-08T13:43:21Z

src/overview/components/Overview.jsx

+
+                : <ResultList searchResult={this.props.searchResult} />
+            }
+


I don't know an actually nice style for these things, but for consistency you could keep the indentation that the rest of the code used:

isFirstVisit ? .. : <ResultList ...>

And if the  component should take multiple lines:

isFirstVisit ? ( {...} ) : <ResultList ...>

Treora · 2017-03-08T13:55:00Z

src/overview/components/VisitAsListItem.css

    color: inherit;
    text-decoration: none;
-}
+}


You can leave that newline in its place, I think it was living quite happily there.

Treora · 2017-03-08T20:26:31Z

src/overview/components/ResultList.jsx

 const ResultList = ({searchResult}) => {
+
+    //if no results are found
+    const message = 'no result found';


Too generic name

Treora · 2017-03-09T12:37:07Z

Ok, looks ready to merge? I'll nitpick on some last whitespace myself.

One question still: are you okay with waiving all your copyright on this code, so that the whole code base can be published in public domain? (see unlicense.org)

Chaitya62 · 2017-03-09T12:43:14Z

Yes no problem at all.

Treora · 2017-03-09T17:23:46Z

Hmm I just tried it out, and it shows the firstVisitMessage also when there are results but they are just loading still. Did you not notice? This would need a smarter way to test if there are really no items in the database. May be easier to finish this when the result loading indicator (#54) is done.

Chaitya62 · 2017-03-09T18:31:32Z

Hmm I think I ll figure out some other way to eliminate that !

Chaitya62 · 2017-03-09T21:52:32Z

Okay made some changes added a isFetching flag have added comments to why I set it to false and true everywhere. Initially it is true as we fetch the db whlle we load overview for the first time.I have added a loading placeholder which can be replaced by a loader later on.

obsidianart · 2017-03-10T13:57:58Z

src/overview/actions.js

        filterVisitsByQuery({query}).then(searchResult => {
+
+            //set fetching results to true
+            ourState(getState()).isFetching = true;


this seems like direct state manipulation. is it the case?

Chaitya62 · 2017-03-10T13:59:20Z

Yes is it a bad practice?

obsidianart · 2017-03-10T14:01:03Z

src/overview/reducer.js

 const defaultState = {
    searchResult: {rows: []},
    query: '',
+    isFetching: true,


why is default true?

obsidianart · 2017-03-10T14:01:27Z

src/overview/reducer.js

 }

 function setQuery(state, {query}) {
+	state.isFetching = true; //will start fetching


I think the comment is incorrect, this doesn't trigger anything per se

Actaully I think instead of will start fetching. I should elaborate a little while intializing default

obsidianart · 2017-03-10T14:01:32Z

src/overview/reducer.js

 }

 function setSearchResult(state, {searchResult}) {
+	state.isFetching = false; //will stop fetching


I think the comment is incorrect, this doesn't trigger anything per se

What i mean was when we call setSearchResult means the database has returned a value now if the query is changed and we again make it true

I understand, I think the problem is around the comment. this is the state of the fetching, not something which trigger a behaviour.

Chaitya62 · 2017-03-10T14:02:20Z

A the default is true because we are fetching from the database as soon as we start our app

obsidianart · 2017-03-10T15:09:17Z

When you start fetching the flag is changed, the initial state is false regardless. The initial state is about what it is, and the fetching is trigger later on in the code. if it's not clear we can talk about it

Chaitya62 · 2017-03-10T15:18:52Z

Yes intuitively it should be false initially but then the message that only firstVisitors should see appears I guess isLoading is a better name then isFetching but as we discussed I should wait for the loader issue to be resolved

obsidianart · 2017-03-10T15:22:46Z

wouldn't it be changed to true immediately (stating the search starts straight away)?

Chaitya62 · 2017-03-10T15:28:47Z

Yes but the component when default was false loads and goes away it look buggy where as when it's true initially the component loads with loading message

obsidianart · 2017-03-10T15:32:18Z

ok good :)

Chaitya62 · 2017-03-14T14:53:16Z

How about I add

export  isDatabaseEmpty = ()=>{
	let isEmpty = false;
	db.info().then((result)=>{
		if(result.doc_count === 0){
			isEmpty = true;
		}

	});
	return isEmpty;
}

in pouchdb.js ,to check database is empty or not?
The above code won't work due to the async call but can we make a similar method in pouchdb to check the db is empty or not

Treora · 2017-03-15T13:16:39Z

@Chaitya62: checking the database requires calling an asynchronous function, so it cannot be done while rendering and requires adding extra state. Seems too complicated to me. (your code always returns false by the way, promises don't work this way)

For simplicity, should we perhaps forget about the first-time message again (sorry, I know it was my own suggestion), and just check in the ResultList if there is a query but no results? Then we can think about the first-use message later again, maybe also as part of a more elaborate introduction.

Chaitya62 · 2017-03-15T13:19:42Z

@Treora just edited my previous message I realised that code won't work ! I ll just add the no result message and update the PR !

Chaitya62 · 2017-03-15T15:09:53Z

@Treora I think now the PR is ready ! please review it!

Treora · 2017-03-17T00:21:33Z

Nice and simple, thanks! I made the message a bit more subtle in appearance, as it need not draw much attention. I like the fade-in, good idea!

obsidianart reviewed Mar 6, 2017

View reviewed changes

Treora reviewed Mar 6, 2017

View reviewed changes

obsidianart reviewed Mar 6, 2017

View reviewed changes

Treora reviewed Mar 8, 2017

View reviewed changes

obsidianart reviewed Mar 10, 2017

View reviewed changes

Treora mentioned this pull request Mar 10, 2017

fixed Show a message for no results found #53 #61

Closed

blackforestboi mentioned this pull request Mar 12, 2017

Show a message for "no results found" #53

Closed

Chaitya62 mentioned this pull request Mar 14, 2017

Issue #54 -- Create a 'loading results' indicator. #57

Merged

Chaitya62 mentioned this pull request Mar 15, 2017

Represent search query in the url of overview #64

Closed

Chaitya62 closed this Mar 15, 2017

Add no result message only

5fbd143

Chaitya62 reopened this Mar 15, 2017

Chaitya62 closed this Mar 15, 2017

Chaitya62 reopened this Mar 15, 2017

Treora merged commit 5fbd143 into WebMemex:master Mar 17, 2017

Treora added a commit that referenced this pull request Mar 17, 2017

Merge PR #56, fix #53: "No results found" message

b78dbd0

Conversation

Chaitya62 commented Mar 6, 2017

Uh oh!

obsidianart Mar 6, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Chaitya62 Mar 6, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Chaitya62 commented Mar 6, 2017

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Chaitya62 commented Mar 7, 2017

Uh oh!

Treora commented Mar 7, 2017 via email

Uh oh!

Chaitya62 commented Mar 7, 2017

Uh oh!

Treora commented Mar 7, 2017

Uh oh!

Treora left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Treora commented Mar 9, 2017

Uh oh!

Chaitya62 commented Mar 9, 2017

Uh oh!

Treora commented Mar 9, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Chaitya62 commented Mar 9, 2017

Uh oh!

Chaitya62 commented Mar 9, 2017

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Chaitya62 commented Mar 10, 2017

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Chaitya62 commented Mar 10, 2017

Uh oh!

obsidianart commented Mar 10, 2017

Uh oh!

Chaitya62 commented Mar 10, 2017

obsidianart Mar 6, 2017 •

edited

Loading

Chaitya62 Mar 6, 2017 •

edited

Loading

Treora commented Mar 9, 2017 •

edited

Loading

Chaitya62 commented Mar 14, 2017 •

edited

Loading