Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bebofofum/react-stream-schedule-client
Stream Scheduler built with React(possibly Redux) to compliment the Rails API. Ability to see full stream listing, add streams and see stream details. File uploads.
https://github.com/bebofofum/react-stream-schedule-client
javascript jsx react react-router
Last synced: 13 days ago
JSON representation
Stream Scheduler built with React(possibly Redux) to compliment the Rails API. Ability to see full stream listing, add streams and see stream details. File uploads.
- Host: GitHub
- URL: https://github.com/bebofofum/react-stream-schedule-client
- Owner: bebofofum
- Created: 2021-08-30T16:15:32.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-04-30T17:44:47.000Z (8 months ago)
- Last Synced: 2024-04-30T18:55:40.508Z (8 months ago)
- Topics: javascript, jsx, react, react-router
- Language: JavaScript
- Homepage:
- Size: 869 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Stream Schedule Client
Created a new react app
```bash
npx create-react-app react-scheduler-client
```
or clone repo.
## Add React Router
```bash
yarn add react-router-dom
```
Start with clean slate so remove the following files
-App.css
-App.test.js
-Index.css
-logo.svg
-reportWebVitals.js
-setupTests.js
Also clear out App.js all but outer Div. And remove references to deleted files in index and app.js. So remove imports and function calls to those components, css and logos that were just deleted.
Start react dev server to test
```bash
yarn start
```
New Stream Form container with route 'user/:userId/streams/new'?
## AddStreamForm
When we try to make a POST request without having an associated user for our Stream we get a 422 Unprocessable Entity error in our Inspector Network tab. This indicates a problem in the API, in our Rails controllers. First, check strong parameters in the Stream controller.
We can make a current_user by making a new user instance like so:
```rb
class ApplicationController < ActionController::API
def current_user
User.first_or_create(email: '[email protected]', password: 'password')
end
end
```
Then in our Stream controller an instance of our Stream is created as an association of the current_user.
```rb
def create
@stream = current_user.streams.build(stream_params)
if @stream.save
render json: @stream, status: :created, location: @stream
else
render json: @stream.errors, status: :unprocessable_entity
end
end
```
Since I am creating an instance of our stream based on the current_user I don't need to include :user_id as part of the strong params because the user will be already attached when creating the stream instance rather than being passed as part of making the stream instance.
If we had another id such as an associated, such as if the stream also belong_to a group and we needed a group id passed when we make our Post request we could add the :group_id into our stream_params.
So now when we submit the form the data is persisted to the database!
# Next we make our views for Show each individual Stream. (a details page if you will)
```bash
touch src/containers/StreamShowContainer.js
```
This component will fetch from our api based on the element id requested to our stream controller. Something like
```
fetch('http://localhost:3001/streams/1)
# Add details about Redux