Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add filler text to the sidebar tabs when empty. #272

Open
kerrtravers opened this issue Mar 2, 2018 · 12 comments
Open

Add filler text to the sidebar tabs when empty. #272

kerrtravers opened this issue Mar 2, 2018 · 12 comments
Labels
client Affects the @decent/client package. enhancement BETTER THING!! good first issue This is an easier thing to do that would work as a great first contribution.

Comments

@kerrtravers
Copy link

kerrtravers commented Mar 2, 2018

Currently, when the pins, mentions, and users tabs have nothing to display, they are just blank. It would maybe be a good idea to add some filler text, or a small notice that lets the users know the tab has loaded, but just doesn't have anything to show.

@bates64 bates64 added the invalid ??? label Mar 2, 2018
@kerrtravers kerrtravers changed the title Add filler text to mentions and Add filler text to the sidebar tabs when empty. Mar 2, 2018
@kerrtravers kerrtravers reopened this Mar 2, 2018
@bates64 bates64 added client Affects the @decent/client package. enhancement BETTER THING!! good first issue This is an easier thing to do that would work as a great first contribution. and removed invalid ??? labels Mar 2, 2018
@turisap
Copy link

turisap commented Mar 2, 2018

Hi, @ktrvs, I'm looking for an opportunity to make my first-time real contribution for an open-source project, so can I work on this issue?

@bates64
Copy link
Collaborator

bates64 commented Mar 2, 2018

Hi @turisap! You're totally welcome to work on this. Note that you'll need to build the client when you make changes to its source.

If you get stuck you can always ask us on https://meta.decent.chat 😃

@turisap
Copy link

turisap commented Mar 2, 2018

@heyitsmeuralex, I'm happy to hear I can give it a try, I'm starting working on it 😃

@bates64 bates64 added the wip Work-in-progress. label Mar 2, 2018
@turisap
Copy link

turisap commented Mar 3, 2018

Hi @heyitsmeuralex, I'm experiencing problems trying to get everything working.

I followed intructions, but when I run npx lerna run build I got a bunch of errors as follows

lerna ERR! execute callback with error
lerna ERR! Error: Command failed: npm run build
lerna ERR! Error: ENOENT: no such file or directory, open 
D:\IT\Code\decent\packages\client\dist\bundle.js
lerna ERR! npm ERR! code ELIFECYCLE
lerna ERR! npm ERR! errno 1
lerna ERR! npm ERR! @decent/[email protected] build: browserify src/app.js -t [ stringify --extensions [.svg] ] -g yo-yoify | minify -o dist/bundle.js && postcss css/app.css -o dist/bundle.css
lerna ERR! npm ERR! Exit status 1
lerna ERR! npm ERR!
lerna ERR! npm ERR! Failed at the @decent/[email protected] build script.
lerna ERR! npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
lerna ERR!
lerna ERR! npm ERR! A complete log of this run can be found in:
lerna ERR! npm ERR!     C:\Users\HP\AppData\Roaming\npm-cache\_logs\2018-03-03T09_34_14_892Z-debug.log
lerna ERR!
lerna ERR! > @decent/[email protected] build D:\IT\Code\decent\packages\client
lerna ERR! > browserify src/app.js -t [ stringify --extensions [.svg] ] -g yo-yoify | minify -o dist/bundle.js && postcss css/app.css -o dist/bundle.css
lerna ERR!
lerna ERR!
lerna ERR!     at Promise.all.then.arr (C:\Users\HP\AppData\Roaming\npm-cache\_npx\4020\node_modules\lerna\node_modules\execa\index.js:236:11)
lerna ERR!     at <anonymous>

and a bunch of warnings when I run npm install --global like

npm WARN rollback Rolling back [email protected] failed (this is probably harmless): D:\IT\Code\decent\packages\client\node_modules\fsevents\node_modules\ansi-regex is not a child of C:\Users\HP\AppData\Roaming\npm

After, when I run decent 8000 (I don't know also what to use as a database path) I get a blank screen with an error in console as Uncaught SyntaxError: Unexpected token < bundle.js:1

I tried to use your chat as you told me, but I wasn't successful here either((( I tried to register there, but on signup/signin attempts it shows an error 'failed to fetch'.

Could you please help me here? Sorry, I'm new to contributing to open-source and highly likely made something wrong, but I'm getting these results 2 times in succession.

Thanks

@bates64
Copy link
Collaborator

bates64 commented Mar 3, 2018

@turisap: Eek, that's probably a Windows-specific issue you've got there (both @towerofnix and I are on Linux). Could you try npx lerna run watch? I'll look into the chat issue; it's certainly got something to do with #259.

After, when I run decent 8000 (I don't know also what to use as a database path)

You can use any directory as a database path; Decent will automatically create its database files within it.

I get a blank screen with an error in console as Uncaught SyntaxError: Unexpected token < bundle.js:1

This means it didn't build properly, as you noticed.

Sorry, I'm new to contributing to open-source and highly likely made something wrong, but I'm getting these results 2 times in succession.

This actually seems like an issue with Decent/the build script, not your setup. You're doing well 📦

Good luck!

@towerofnix
Copy link
Member

@turisap I think the issue actually has to do with an issue in our build system, sorry! It looks like it's failing to write to the packages\client\dist directory, because that folder doesn't exist. I would like to fix that, but I'm not 100% sure how to make a cross-platform fix (I don't have a Windows system), so as a quick workaround, you could simply create that folder manually.

(I'm guessing this from these two lines:)

lerna ERR! Error: ENOENT: no such file or directory, open 
D:\IT\Code\decent\packages\client\dist\bundle.js

I don't know also what to use as a database path

Later on, you can just do decent 8000 db; that should make a db folder (if it doesn't you can make it manually), and database files will automatically be generated in there.

I tried to use your chat as you told me, but I wasn't successful here either((( I tried to register there, but on signup/signin attempts it shows an error 'failed to fetch'.

Are you able to show what happens in your browser's network console? That should be in the same place as the JavaScript console (just another tab in the UI). Particularly, "failed to fetch" means that the client's code tried to make an HTTP request, but the request failed somewhere along the line; the browser network console might help in figuring out exactly where it went wrong (such as by telling us what URL the failed HTTP request was to).

Just as a quick recommendation: Alex and I are currently using the latest versions of Firefox to develop Decent, so Firefox works for us. Recent versions of Chrome and Safari have also been tested by other users. Edge hasn't been seen to work at all. But I don't think that browser choice is your issue, since the chat program is showing up for you. (If it were just a white screen, you'd probably be using a browser that's too old.)

@turisap
Copy link

turisap commented Mar 4, 2018

@towerofnix, the problem was with packages\client\dist directory! I created it manually after cloning the repo and npx lerna run build was successfully run! So now, after running decent 8000 db and visiting localhost:8000 I have the application running in my browser. Thanks for your help!

Are you able to show what happens in your browser's network console?

I checked the Network tab and as it revealed it makes a request to https://undefined/api/users. I guess this is not what it is intended to be and probably I've done something wrong. This happens in both Chrome and Firefox (developer edition). What I've done is:

I also attached a screenshot of the Network tab.
failed to fetch

As for now I have the application running on my machine, could you direct me where should I add the filler text and on which conditions should it appear (or which steps should I undertake now)? What I have is only the page with two buttons, namely "add" and "Appearance" and don't completely understand what to do next :-)

@turisap
Copy link

turisap commented Mar 4, 2018

@heyitsmeuralex,
I tried to run npx lerna run wath on both broken and fixed builds, but in both occasions it just stopped here and did nothing for hour and I decided not to wait further :-)

npx: installed 1 in 3.713s
Path must be a string. Received undefined
npx: installed 330 in 45.805s
C:\Users\HP\AppData\Roaming\npm-cache\_npx\3728\node_modules\lerna\bin\lerna.js
lerna info version 2.9.0
[..................] | run: info version 2.9.0

@bates64
Copy link
Collaborator

bates64 commented Mar 4, 2018

@turisap:

Sorry - you can watch for changes to the client JS/CSS by doing cd packages/client/ && npm run watch. Awesome that you got it running.

Some steps:

  • Use the + Add button to add the localhost:8000 server
  • Edit the sidebar-right.js file to display some filler text when pins/mentions/users is empty (eg. You have no mentions.)
    • You'll have to create some new conditionals to see if state.pins.messages.length === 0, etc.
  • Assuming npm run watch was running and working, you should see a log from it - reload localhost:8000 to load the changes.

@towerofnix
Copy link
Member

I checked the Network tab and as it revealed it makes a request to https://undefined/api/users.

Ah yes, that's a bug. But it's an issue in the code - it's not the fault of you getting the program set up wrong or anything.

@turisap
Copy link

turisap commented Mar 11, 2018

@towerofnix, I've tried to implement this feature and then realized that it's not a good task for me due to unfamiliarity with framework you use. I went through docs but it did not made it clear. Sorry for spending your time on helping me set up this project on my machine))

@bates64 bates64 removed the wip Work-in-progress. label Mar 11, 2018
@towerofnix
Copy link
Member

No problem, I'm glad to help anytime! :)

Thanks for having a go! Sorry our framework is rather an odd one; we're working on simplifying it a bit, but in the end it is a weird and unique style.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
client Affects the @decent/client package. enhancement BETTER THING!! good first issue This is an easier thing to do that would work as a great first contribution.
Projects
None yet
Development

No branches or pull requests

4 participants