SimplGy / learning-react-text-file-viewer

View text and markdown files in your encrypted AWS S3 Buckets

This is a demo app for getting to know react.

It displays a list of text files, each of which you can tap to view.

Later maybe I will support some file parsing to detect patterns like todo lists

Then maybe tap to complete/uncomplete tasks

Maybe later support text editing

Set Up

1. Create an AWS S3 bucket to use as a source of text files. For it to work with this application, you'll have to configure permissions and enable CORS. If you've never used S3 this project might be a bit difficult to set up, but I believe you can do it.
2. Configure the application to point to an s3 bucket that hosts your text files. to do this, create a file src/.s3cfg.js. You can use src/.s3cfg-EXAMPLE.js as a starting point.

Start Developing

Run the development environment:

npm start

Run unit tests:

npm test

SASS isn't complied automaticaly. When working on styles, run the watcher:

npm run sass

Or run it as a one-time compilation:

npm run sass-once

If you add a brand-new sass file, make sure you import it somewhere (eg: index.js' import './index.css';)

Todo list

• Add some simple markdown syntax highlighting (that doesn't change char positions) -- tried codemirror via react-md-editor and ace and didn't like either
• First let's grab the url in componentDidMount -> window.location.pathname
• Then we'll turn it in to a meaningful action with urlToAction
• Include Redux
• send redux the url changed action
• turn the action into a useful state
• handle a filename that isn't found
• observe the back/forward buttons and react appropriately
• support reading data from an s3 bucket
• get file details from s3 bucket
• turn size into a char count (assuming plain text), and count words
• Show the bucket name you're connected to
• Make the text appear editable and scroll nicely
• If props.file.content != editableText, show a save button. Enable cmd+s for the button
• Have the save button actually persist to the server
• override cmd+s to save on chrome (got ctrl+s to work, but having trouble blocking browser behavior with cmd) -- use keydown instead of keypress
• Quickly build a functional way to sync a system folder with the s3 bucket (command line npm module?)
• CORS must be enabled on the bucket/resource. Have a clear warning on the front end when we detect that this is the problem
• Add a client-side search filter
• Support tests
• Support navigable folders
• Adjust layout for mobile
• Reuse header for individual file and file list
• Document deployment steps
• grow search area when focused on mobile without shifting title text
• Have clear error messages for missing bucket/key/secret
• Infinite scroll for long file lists

Nice to Have

• Live refresh the text, mixing in the current user's edits intelligently (2-way-sync challenge)
• cache file list and file contents on device; if old, greedy-invalidate. if not fresh, lazy-invalidate
• gui configurable s3 bucket target & key

---

This project was bootstrapped with Create React App.