28 |
29 | );
30 | }
31 |
32 | export default UsersList;
33 |
--------------------------------------------------------------------------------
/flask_backend/seeds/users.py:
--------------------------------------------------------------------------------
1 | from flask_backend.models import db, User
2 |
3 |
4 | # Adds a demo user, you can add other users here if you want
5 | def seed_users():
6 | demo = User(
7 | username='Demo', email='demo@aa.io', password='password')
8 | danp = User(
9 | username='danp', email='danp@aa.io', password='password')
10 |
11 | db.session.add(demo)
12 | db.session.add(danp)
13 |
14 | db.session.commit()
15 |
16 |
17 | # Uses a raw SQL query to TRUNCATE the users table.
18 | # SQLAlchemy doesn't have a built in function to do this
19 | # TRUNCATE Removes all the data from the table, and RESET IDENTITY
20 | # resets the auto incrementing primary key, CASCADE deletes any
21 | # dependent entities
22 | def undo_users():
23 | db.session.execute('TRUNCATE users RESTART IDENTITY CASCADE;')
24 | db.session.commit()
25 |
--------------------------------------------------------------------------------
/react-app/src/store/index.js:
--------------------------------------------------------------------------------
1 | import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
2 | import thunk from 'redux-thunk';
3 | import session from './session';
4 | import gif from './gif';
5 | import posts from './posts';
6 |
7 | const rootReducer = combineReducers({
8 | session,
9 | gif,
10 | posts,
11 | });
12 |
13 |
14 | let enhancer;
15 |
16 | if (process.env.NODE_ENV === 'production') {
17 | enhancer = applyMiddleware(thunk);
18 | } else {
19 | const logger = require('redux-logger').default;
20 | const composeEnhancers =
21 | window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
22 | enhancer = composeEnhancers(applyMiddleware(thunk, logger));
23 | }
24 |
25 | const configureStore = (preloadedState) => {
26 | return createStore(rootReducer, preloadedState, enhancer);
27 | };
28 |
29 | export default configureStore;
30 |
--------------------------------------------------------------------------------
/react-app/src/components/SplashPage/index.js:
--------------------------------------------------------------------------------
1 |
2 | import { Link } from 'react-router-dom';
3 |
4 |
5 | export default function SplashPage(){
6 | return (
7 |
8 |
9 |
10 | The gif animation demonstration displays the rendering power of the useSelector and useDispatch hooks.
11 |
12 |
13 |
14 |
15 | The posts demonstration samples a much more complex scenario that involves nested objects in state. Dynamic rerendering is still achieved through only the useSelector and useDispatch hooks.
16 |
Nested Objects: CRUD for posts, comments and subcomments.
77 |
84 |
91 |
{posts}
92 |
93 | );
94 | }
95 |
--------------------------------------------------------------------------------
/react-app/src/index.css:
--------------------------------------------------------------------------------
1 | /* * {
2 | box-sizing: border-box;
3 | } */
4 |
5 | html,
6 | body,
7 | #root {
8 | height: 100%;
9 | margin: 0;
10 | font-family: "Comic Sans MS";
11 | font-family: "Lucida Sans";
12 | }
13 |
14 | #root {
15 | display: flex;
16 | flex-direction: column;
17 | }
18 |
19 | a {
20 | text-decoration: none;
21 | }
22 |
23 | a:hover {
24 | /* color: lightblue; */
25 | text-decoration: underline;
26 | }
27 |
28 | .App {
29 | text-align: center;
30 | }
31 |
32 | .App-logo {
33 | height: 40vmin;
34 | pointer-events: none;
35 | }
36 |
37 | @media (prefers-reduced-motion: no-preference) {
38 | .App-logo {
39 | animation: App-logo-spin infinite 20s linear;
40 | }
41 | }
42 |
43 | .App-link {
44 | color: #61dafb;
45 | }
46 |
47 | @keyframes App-logo-spin {
48 | from {
49 | transform: rotate(0deg);
50 | }
51 | to {
52 | transform: rotate(360deg);
53 | }
54 | }
55 |
56 | .App-header {
57 | height: 150px;
58 | display: flex;
59 | flex-direction: row;
60 | align-items: center;
61 | justify-content: space-around;
62 | background-color: #282c34;
63 | font-size: calc(10px + 2vmin);
64 | color: white;
65 | padding: 30px;
66 | }
67 |
68 | .App-header img {
69 | width: 300px;
70 | height: 200px;
71 | }
72 |
73 | .App-main {
74 | display: flex;
75 | width: 100%;
76 | flex-direction: column;
77 | align-items: center;
78 | }
79 |
80 | .gif-wrapper {
81 | display: flex;
82 | flex-direction: column;
83 | width: 400px;
84 | }
85 |
86 |
87 | .App-footer {
88 | width: 100%;
89 | background-color: #282c34;
90 | color: #fff;
91 | text-align: center;
92 | margin-top: auto;
93 | }
94 |
95 | .btn {
96 | height: 40px;
97 | border-radius: 7px;
98 | margin: 10px;
99 | }
100 |
101 | .nav-link {
102 | color: white;
103 | }
104 |
105 | .nav-banner-wrapper {
106 | display: flex;
107 | justify-content: space-around;
108 | padding: 10px;
109 | background-color: lightblue;
110 | margin-bottom: 10px;
111 | }
112 |
113 | .gif-blurb-wrap, .nesting-blurb-wrap {
114 | width: 600px;
115 | padding: 20px;
116 | }
117 |
118 | .posts-wrapper {
119 | display: flex;
120 | flex-direction: column;
121 | width: 400px;
122 | }
123 |
124 | .single-post-wrap {
125 | box-sizing: border-box;
126 | display: flex;
127 | flex-direction: column;
128 | width: 100%;
129 | margin-top: 10px;
130 | margin-bottom: 10px;
131 | }
132 |
133 | .single-post-header {
134 | box-sizing:border-box;
135 | display: flex;
136 | flex-direction: row;
137 | justify-content: space-between;
138 | align-items: center;
139 | width: 100%;
140 | height: 30px;
141 | }
142 |
143 | .btn-small {
144 | height: fit-content;
145 | border-radius: 3px;
146 | }
147 |
148 | .single-comment {
149 | width: 100%;
150 | display: flex;
151 | justify-content: space-around;
152 | margin: 5px;
153 | }
154 |
155 | .posts-list {
156 | padding: 10px;
157 | }
158 |
--------------------------------------------------------------------------------
/migrations/env.py:
--------------------------------------------------------------------------------
1 | from __future__ import with_statement
2 |
3 | import logging
4 | from logging.config import fileConfig
5 |
6 | from flask import current_app
7 |
8 | from alembic import context
9 |
10 | # this is the Alembic Config object, which provides
11 | # access to the values within the .ini file in use.
12 | config = context.config
13 |
14 | # Interpret the config file for Python logging.
15 | # This line sets up loggers basically.
16 | fileConfig(config.config_file_name)
17 | logger = logging.getLogger('alembic.env')
18 |
19 | # add your model's MetaData object here
20 | # for 'autogenerate' support
21 | # from myapp import mymodel
22 | # target_metadata = mymodel.Base.metadata
23 | config.set_main_option(
24 | 'sqlalchemy.url',
25 | str(current_app.extensions['migrate'].db.get_engine().url).replace(
26 | '%', '%%'))
27 | target_metadata = current_app.extensions['migrate'].db.metadata
28 |
29 | # other values from the config, defined by the needs of env.py,
30 | # can be acquired:
31 | # my_important_option = config.get_main_option("my_important_option")
32 | # ... etc.
33 |
34 |
35 | def run_migrations_offline():
36 | """Run migrations in 'offline' mode.
37 |
38 | This configures the context with just a URL
39 | and not an Engine, though an Engine is acceptable
40 | here as well. By skipping the Engine creation
41 | we don't even need a DBAPI to be available.
42 |
43 | Calls to context.execute() here emit the given string to the
44 | script output.
45 |
46 | """
47 | url = config.get_main_option("sqlalchemy.url")
48 | context.configure(
49 | url=url, target_metadata=target_metadata, literal_binds=True
50 | )
51 |
52 | with context.begin_transaction():
53 | context.run_migrations()
54 |
55 |
56 | def run_migrations_online():
57 | """Run migrations in 'online' mode.
58 |
59 | In this scenario we need to create an Engine
60 | and associate a connection with the context.
61 |
62 | """
63 |
64 | # this callback is used to prevent an auto-migration from being generated
65 | # when there are no changes to the schema
66 | # reference: http://alembic.zzzcomputing.com/en/latest/cookbook.html
67 | def process_revision_directives(context, revision, directives):
68 | if getattr(config.cmd_opts, 'autogenerate', False):
69 | script = directives[0]
70 | if script.upgrade_ops.is_empty():
71 | directives[:] = []
72 | logger.info('No changes in schema detected.')
73 |
74 | connectable = current_app.extensions['migrate'].db.get_engine()
75 |
76 | with connectable.connect() as connection:
77 | context.configure(
78 | connection=connection,
79 | target_metadata=target_metadata,
80 | process_revision_directives=process_revision_directives,
81 | **current_app.extensions['migrate'].configure_args
82 | )
83 |
84 | with context.begin_transaction():
85 | context.run_migrations()
86 |
87 |
88 | if context.is_offline_mode():
89 | run_migrations_offline()
90 | else:
91 | run_migrations_online()
92 |
--------------------------------------------------------------------------------
/react-app/src/store/comments.js:
--------------------------------------------------------------------------------
1 |
2 | // //switch cases
3 | // const create = "comments/CREATE";
4 | // const get = "comments/GET";
5 | // const remove = "comments/DELETE";
6 | // const set_error = "error/NEW_ERROR";
7 |
8 | // //actions
9 | // const add_comment = (comment) => ({
10 | // type: create,
11 | // comment,
12 | // });
13 |
14 | // const all_comments = (comments) => ({
15 | // type: get,
16 | // comments
17 | // })
18 |
19 | // const del_comment_action = (comment_id) => ({
20 | // type: remove,
21 | // comment_id: comment_id
22 | // })
23 |
24 | // const new_error = (error) => ({
25 | // type: set_error,
26 | // error,
27 | // });
28 |
29 | // //thunks
30 | // export const create_comment = (comment) => async (dispatch) => {
31 | // const response = await fetch(`/api/comments/`, {
32 | // method: "comment",
33 | // headers: {
34 | // 'Accept': 'application/json',
35 | // "Content-Type": "application/json",
36 | // },
37 | // body: JSON.stringify(comment)
38 | // });
39 |
40 | // if (response.ok) {
41 | // const comment = await response.json();
42 | // dispatch(add_comment(comment));
43 | // } else {
44 | // const error = {
45 | // status_code: response.status,
46 | // error_desc: "increment_frame failed",
47 | // };
48 | // dispatch(new_error(error));
49 | // }
50 | // };
51 |
52 | // export const get_all_comments = () => async (dispatch) => {
53 | // console.log("<<<< DISPATCHING GET ALL commentS >>>>")
54 |
55 | // const response = await fetch("/api/comments/")
56 | // if(response.ok){
57 | // const { comments } = await response.json();
58 | // dispatch(all_comments(comments))
59 | // } else {
60 | // const error = {
61 | // status_code: response.status,
62 | // error_desc: "increment_frame failed",
63 | // };
64 | // dispatch(new_error(error));
65 | // }
66 | // }
67 |
68 | // export const delete_comment = (comment_id) => async (dispatch) => {
69 | // console.log("delete_comment", comment_id);
70 | // const response = await fetch(`/api/comments/delete/${comment_id}`, {
71 | // method: "DELETE",
72 | // });
73 |
74 | // if (response.ok) {
75 | // dispatch(del_comment_action(comment_id));
76 | // }
77 | // }
78 |
79 |
80 | // //reducer
81 | // export default function reducer(state = {all_comments: []}, action){
82 | // switch (action.type) {
83 | // case create:
84 | // return {...state, [action.comment.id]: action.comment, all_comments: [action.comment, ...state.all_comments] }
85 |
86 | // case get:
87 | // const update_keys = (array) => {
88 | // const obj = {}
89 | // array.forEach(p => obj[p.id] = p)
90 | // return obj
91 | // }
92 | // return { ...state, ...update_keys(action.comments), all_comments: [...action.comments] }
93 |
94 | // case remove:
95 | // const newState = { ...state };
96 | // delete newState[action.comment_id];
97 | // newState.all_comments.splice(newState.all_comments.findIndex(p => p.id === action.comment_id), 1);
98 | // newState.all_comments = [...newState.all_comments]
99 | // return newState
100 |
101 | // case set_error:
102 | // return { ...state, error: action.error };
103 | // default:
104 | // return state;
105 | // }
106 | // };
107 |
--------------------------------------------------------------------------------
/react-app/src/assets/frames.js:
--------------------------------------------------------------------------------
1 | import f0 from './gif_frames_png/IMG00000.png'
2 | import f1 from './gif_frames_png/IMG00001.png'
3 | import f2 from './gif_frames_png/IMG00002.png'
4 | import f3 from './gif_frames_png/IMG00003.png'
5 | import f4 from './gif_frames_png/IMG00004.png'
6 | import f5 from './gif_frames_png/IMG00005.png'
7 | import f6 from './gif_frames_png/IMG00006.png'
8 | import f7 from './gif_frames_png/IMG00007.png'
9 | import f8 from './gif_frames_png/IMG00008.png'
10 | import f9 from './gif_frames_png/IMG00009.png'
11 | import f10 from './gif_frames_png/IMG00010.png'
12 | import f11 from './gif_frames_png/IMG00011.png'
13 | import f12 from './gif_frames_png/IMG00012.png'
14 | import f13 from './gif_frames_png/IMG00013.png'
15 | import f14 from './gif_frames_png/IMG00014.png'
16 | import f15 from './gif_frames_png/IMG00015.png'
17 | import f16 from './gif_frames_png/IMG00016.png'
18 | import f17 from './gif_frames_png/IMG00017.png'
19 | import f18 from './gif_frames_png/IMG00018.png'
20 | import f19 from './gif_frames_png/IMG00019.png'
21 | import f20 from './gif_frames_png/IMG00020.png'
22 | import f21 from './gif_frames_png/IMG00021.png'
23 | import f22 from './gif_frames_png/IMG00022.png'
24 | import f23 from './gif_frames_png/IMG00023.png'
25 | import f24 from './gif_frames_png/IMG00024.png'
26 | import f25 from './gif_frames_png/IMG00025.png'
27 | import f26 from './gif_frames_png/IMG00026.png'
28 | import f27 from './gif_frames_png/IMG00027.png'
29 | import f28 from './gif_frames_png/IMG00028.png'
30 | import f29 from './gif_frames_png/IMG00029.png'
31 | import f30 from './gif_frames_png/IMG00030.png'
32 | import f31 from './gif_frames_png/IMG00031.png'
33 | import f32 from './gif_frames_png/IMG00032.png'
34 | import f33 from './gif_frames_png/IMG00033.png'
35 | import f34 from './gif_frames_png/IMG00034.png'
36 | import f35 from './gif_frames_png/IMG00035.png'
37 | import f36 from './gif_frames_png/IMG00036.png'
38 | import f37 from './gif_frames_png/IMG00037.png'
39 | import f38 from './gif_frames_png/IMG00038.png'
40 | import f39 from './gif_frames_png/IMG00039.png'
41 | import f40 from './gif_frames_png/IMG00040.png'
42 | import f41 from './gif_frames_png/IMG00041.png'
43 | import f42 from './gif_frames_png/IMG00042.png'
44 | import f43 from './gif_frames_png/IMG00043.png'
45 | import f44 from './gif_frames_png/IMG00044.png'
46 | import f45 from './gif_frames_png/IMG00045.png'
47 | import f46 from './gif_frames_png/IMG00046.png'
48 | import f47 from './gif_frames_png/IMG00047.png'
49 | import f48 from './gif_frames_png/IMG00048.png'
50 | import f49 from './gif_frames_png/IMG00049.png'
51 | import f50 from './gif_frames_png/IMG00050.png'
52 | import f51 from './gif_frames_png/IMG00051.png'
53 | import f52 from './gif_frames_png/IMG00052.png'
54 | import f53 from './gif_frames_png/IMG00053.png'
55 | import f54 from './gif_frames_png/IMG00054.png'
56 | import f55 from './gif_frames_png/IMG00055.png'
57 | import f56 from './gif_frames_png/IMG00056.png'
58 | import f57 from './gif_frames_png/IMG00057.png'
59 | import f58 from './gif_frames_png/IMG00058.png'
60 | import f59 from './gif_frames_png/IMG00059.png'
61 | import f60 from './gif_frames_png/IMG00060.png'
62 | import f61 from './gif_frames_png/IMG00061.png'
63 |
64 | const frame_array = [
65 | f0, f1, f2, f3, f4, f5, f6, f7, f8, f9, f10, f11, f12, f13, f14, f15, f16, f17, f18, f19, f20, f21, f22, f23, f24, f25, f26, f27, f28, f29, f30, f31, f32, f33, f34, f35, f36, f37, f38, f39, f40, f41, f42, f43, f44, f45, f46, f47, f48, f49, f50, f51, f52, f53, f54, f55, f56, f57, f58, f59, f60, f61
66 | ]
67 |
68 |
69 | export default frame_array
70 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Flask React Project
2 |
3 | This is the starter for the Flask React project.
4 |
5 | ## Getting started
6 |
7 | 1. Clone this repository (only this branch)
8 |
9 | ```bash
10 | git clone https://github.com/appacademy-starters/python-project-starter.git
11 | ```
12 |
13 | 2. Install dependencies
14 |
15 | ```bash
16 | pipenv install --dev -r dev-requirements.txt && pipenv install -r requirements.txt
17 | ```
18 |
19 | 3. Create a **.env** file based on the example with proper settings for your
20 | development environment
21 | 4. Setup your PostgreSQL user, password and database and make sure it matches your **.env** file
22 |
23 | 5. Get into your pipenv, migrate your database, seed your database, and run your flask app
24 |
25 | ```bash
26 | pipenv shell
27 | ```
28 |
29 | ```bash
30 | flask db upgrade
31 | ```
32 |
33 | ```bash
34 | flask seed all
35 | ```
36 |
37 | ```bash
38 | flask run
39 | ```
40 |
41 | 6. To run the React App in development, checkout the [README](./react-app/README.md) inside the `react-app` directory.
42 |
43 | ***
44 | *IMPORTANT!*
45 | If you add any python dependencies to your pipfiles, you'll need to regenerate your requirements.txt before deployment.
46 | You can do this by running:
47 |
48 | ```bash
49 | pipenv lock -r > requirements.txt
50 | ```
51 |
52 | *ALSO IMPORTANT!*
53 | psycopg2-binary MUST remain a dev dependency because you can't install it on apline-linux.
54 | There is a layer in the Dockerfile that will install psycopg2 (not binary) for us.
55 | ***
56 |
57 | ## Deploy to Heroku
58 |
59 | 1. Before you deploy, don't forget to run the following command in order to
60 | ensure that your production environment has all of your up-to-date
61 | dependencies. You only have to run this command when you have installed new
62 | Python packages since your last deployment, but if you aren't sure, it won't
63 | hurt to run it again.
64 |
65 | ```bash
66 | pipenv lock -r > requirements.txt
67 | ```
68 |
69 | 2. Create a new project on Heroku
70 | 3. Under Resources click "Find more add-ons" and add the add on called "Heroku Postgres"
71 | 4. Install the [Heroku CLI](https://devcenter.heroku.com/articles/heroku-command-line)
72 | 5. Run
73 |
74 | ```bash
75 | heroku login
76 | ```
77 |
78 | 6. Login to the heroku container registry
79 |
80 | ```bash
81 | heroku container:login
82 | ```
83 |
84 | 7. Update the `REACT_APP_BASE_URL` variable in the Dockerfile.
85 | This should be the full URL of your Heroku app: i.e. "https://flask-react-aa.herokuapp.com"
86 | 8. Push your docker container to heroku from the root directory of your project.
87 | (If you are using an M1 mac, follow [these steps below](#for-m1-mac-users) instead, then continue on to step 9.)
88 | This will build the Dockerfile and push the image to your heroku container registry.
89 |
90 | ```bash
91 | heroku container:push web -a {NAME_OF_HEROKU_APP}
92 | ```
93 |
94 | 9. Release your docker container to heroku
95 |
96 | ```bash
97 | heroku container:release web -a {NAME_OF_HEROKU_APP}
98 | ```
99 |
100 | 10. set up your database
101 |
102 | ```bash
103 | heroku run -a {NAME_OF_HEROKU_APP} flask db upgrade
104 | heroku run -a {NAME_OF_HEROKU_APP} flask seed all
105 | ```
106 |
107 | 11. Under Settings find "Config Vars" and add any additional/secret .env
108 | variables.
109 |
110 | 12. profit
111 |
112 | ### For M1 Mac users
113 |
114 | (Replaces **Step 8**)
115 |
116 | 1. Build image with linux platform for heroku servers. Replace
117 | {NAME_OF_HEROKU_APP} with your own tag:
118 |
119 | ```bash=
120 | docker buildx build --platform linux/amd64 -t {NAME_OF_HEROKU_APP} .
121 | ```
122 |
123 | 2. Tag your app with the url for your apps registry. Make sure to use the name
124 | of your Heroku app in the url and tag name:
125 |
126 | ```bash=2
127 | docker tag {NAME_OF_HEROKU_APP} registry.heroku.com/{NAME_OF_HEROKU_APP}/web
128 | ```
129 |
130 | 3. Use docker to push the image to the Heroku container registry:
131 |
132 | ```bash=3
133 | docker push registry.heroku.com/{NAME_OF_HEROKU_APP}/web
134 | ```
135 |
--------------------------------------------------------------------------------
/react-app/src/assets/git_frames_bmp/frameslist.gsf:
--------------------------------------------------------------------------------
1 | [Header]
2 | Type=GifSplitter Frames
3 | Version=2.0
4 | Count=62
5 | [Frames]
6 | IMG00000=C:\Users\purce\OneDrive\Desktop\gif_image_tools_output\IMG00000.bmp
7 | IMG00001=C:\Users\purce\OneDrive\Desktop\gif_image_tools_output\IMG00001.bmp
8 | IMG00002=C:\Users\purce\OneDrive\Desktop\gif_image_tools_output\IMG00002.bmp
9 | IMG00003=C:\Users\purce\OneDrive\Desktop\gif_image_tools_output\IMG00003.bmp
10 | IMG00004=C:\Users\purce\OneDrive\Desktop\gif_image_tools_output\IMG00004.bmp
11 | IMG00005=C:\Users\purce\OneDrive\Desktop\gif_image_tools_output\IMG00005.bmp
12 | IMG00006=C:\Users\purce\OneDrive\Desktop\gif_image_tools_output\IMG00006.bmp
13 | IMG00007=C:\Users\purce\OneDrive\Desktop\gif_image_tools_output\IMG00007.bmp
14 | IMG00008=C:\Users\purce\OneDrive\Desktop\gif_image_tools_output\IMG00008.bmp
15 | IMG00009=C:\Users\purce\OneDrive\Desktop\gif_image_tools_output\IMG00009.bmp
16 | IMG00010=C:\Users\purce\OneDrive\Desktop\gif_image_tools_output\IMG00010.bmp
17 | IMG00011=C:\Users\purce\OneDrive\Desktop\gif_image_tools_output\IMG00011.bmp
18 | IMG00012=C:\Users\purce\OneDrive\Desktop\gif_image_tools_output\IMG00012.bmp
19 | IMG00013=C:\Users\purce\OneDrive\Desktop\gif_image_tools_output\IMG00013.bmp
20 | IMG00014=C:\Users\purce\OneDrive\Desktop\gif_image_tools_output\IMG00014.bmp
21 | IMG00015=C:\Users\purce\OneDrive\Desktop\gif_image_tools_output\IMG00015.bmp
22 | IMG00016=C:\Users\purce\OneDrive\Desktop\gif_image_tools_output\IMG00016.bmp
23 | IMG00017=C:\Users\purce\OneDrive\Desktop\gif_image_tools_output\IMG00017.bmp
24 | IMG00018=C:\Users\purce\OneDrive\Desktop\gif_image_tools_output\IMG00018.bmp
25 | IMG00019=C:\Users\purce\OneDrive\Desktop\gif_image_tools_output\IMG00019.bmp
26 | IMG00020=C:\Users\purce\OneDrive\Desktop\gif_image_tools_output\IMG00020.bmp
27 | IMG00021=C:\Users\purce\OneDrive\Desktop\gif_image_tools_output\IMG00021.bmp
28 | IMG00022=C:\Users\purce\OneDrive\Desktop\gif_image_tools_output\IMG00022.bmp
29 | IMG00023=C:\Users\purce\OneDrive\Desktop\gif_image_tools_output\IMG00023.bmp
30 | IMG00024=C:\Users\purce\OneDrive\Desktop\gif_image_tools_output\IMG00024.bmp
31 | IMG00025=C:\Users\purce\OneDrive\Desktop\gif_image_tools_output\IMG00025.bmp
32 | IMG00026=C:\Users\purce\OneDrive\Desktop\gif_image_tools_output\IMG00026.bmp
33 | IMG00027=C:\Users\purce\OneDrive\Desktop\gif_image_tools_output\IMG00027.bmp
34 | IMG00028=C:\Users\purce\OneDrive\Desktop\gif_image_tools_output\IMG00028.bmp
35 | IMG00029=C:\Users\purce\OneDrive\Desktop\gif_image_tools_output\IMG00029.bmp
36 | IMG00030=C:\Users\purce\OneDrive\Desktop\gif_image_tools_output\IMG00030.bmp
37 | IMG00031=C:\Users\purce\OneDrive\Desktop\gif_image_tools_output\IMG00031.bmp
38 | IMG00032=C:\Users\purce\OneDrive\Desktop\gif_image_tools_output\IMG00032.bmp
39 | IMG00033=C:\Users\purce\OneDrive\Desktop\gif_image_tools_output\IMG00033.bmp
40 | IMG00034=C:\Users\purce\OneDrive\Desktop\gif_image_tools_output\IMG00034.bmp
41 | IMG00035=C:\Users\purce\OneDrive\Desktop\gif_image_tools_output\IMG00035.bmp
42 | IMG00036=C:\Users\purce\OneDrive\Desktop\gif_image_tools_output\IMG00036.bmp
43 | IMG00037=C:\Users\purce\OneDrive\Desktop\gif_image_tools_output\IMG00037.bmp
44 | IMG00038=C:\Users\purce\OneDrive\Desktop\gif_image_tools_output\IMG00038.bmp
45 | IMG00039=C:\Users\purce\OneDrive\Desktop\gif_image_tools_output\IMG00039.bmp
46 | IMG00040=C:\Users\purce\OneDrive\Desktop\gif_image_tools_output\IMG00040.bmp
47 | IMG00041=C:\Users\purce\OneDrive\Desktop\gif_image_tools_output\IMG00041.bmp
48 | IMG00042=C:\Users\purce\OneDrive\Desktop\gif_image_tools_output\IMG00042.bmp
49 | IMG00043=C:\Users\purce\OneDrive\Desktop\gif_image_tools_output\IMG00043.bmp
50 | IMG00044=C:\Users\purce\OneDrive\Desktop\gif_image_tools_output\IMG00044.bmp
51 | IMG00045=C:\Users\purce\OneDrive\Desktop\gif_image_tools_output\IMG00045.bmp
52 | IMG00046=C:\Users\purce\OneDrive\Desktop\gif_image_tools_output\IMG00046.bmp
53 | IMG00047=C:\Users\purce\OneDrive\Desktop\gif_image_tools_output\IMG00047.bmp
54 | IMG00048=C:\Users\purce\OneDrive\Desktop\gif_image_tools_output\IMG00048.bmp
55 | IMG00049=C:\Users\purce\OneDrive\Desktop\gif_image_tools_output\IMG00049.bmp
56 | IMG00050=C:\Users\purce\OneDrive\Desktop\gif_image_tools_output\IMG00050.bmp
57 | IMG00051=C:\Users\purce\OneDrive\Desktop\gif_image_tools_output\IMG00051.bmp
58 | IMG00052=C:\Users\purce\OneDrive\Desktop\gif_image_tools_output\IMG00052.bmp
59 | IMG00053=C:\Users\purce\OneDrive\Desktop\gif_image_tools_output\IMG00053.bmp
60 | IMG00054=C:\Users\purce\OneDrive\Desktop\gif_image_tools_output\IMG00054.bmp
61 | IMG00055=C:\Users\purce\OneDrive\Desktop\gif_image_tools_output\IMG00055.bmp
62 | IMG00056=C:\Users\purce\OneDrive\Desktop\gif_image_tools_output\IMG00056.bmp
63 | IMG00057=C:\Users\purce\OneDrive\Desktop\gif_image_tools_output\IMG00057.bmp
64 | IMG00058=C:\Users\purce\OneDrive\Desktop\gif_image_tools_output\IMG00058.bmp
65 | IMG00059=C:\Users\purce\OneDrive\Desktop\gif_image_tools_output\IMG00059.bmp
66 | IMG00060=C:\Users\purce\OneDrive\Desktop\gif_image_tools_output\IMG00060.bmp
67 | IMG00061=C:\Users\purce\OneDrive\Desktop\gif_image_tools_output\IMG00061.bmp
68 |
--------------------------------------------------------------------------------
/react-app/src/components/Gif/index.js:
--------------------------------------------------------------------------------
1 |
2 | import React from "react"
3 | import { useDispatch, useSelector } from 'react-redux';
4 | import { increment_frame } from '../../store/gif'
5 |
6 | import frame_array from '../../assets/frames'
7 |
8 | //lets pretend this is an object you imported or something
9 | // const bad_ref = { index: 0 }
10 |
11 | export default function Gif() {
12 |
13 | //TODO: step 1. start here using Redux. useSelector alone will cause rerenders
14 | const dispatch = useDispatch();
15 | //note: state var is a primitive; makes it guaranteed to rerender
16 | const gif_frame = useSelector((state) => state.gif?.frame?.frame_index);
17 |
18 | //edge case
19 | const image = frame_array[0]
20 |
21 | const manual_click = () => {
22 | dispatch(increment_frame());
23 | }
24 |
25 |
26 | // //TODO: step 2. the same react principles apply using local component state
27 | // //same effect but with local component state instead
28 | // // todo: note the use of a callback in useState. it fixes race conditions
29 |
30 | // const [compState, setCompState] = React.useState(0)
31 |
32 | // const manual_click = () => {
33 |
34 | // setCompState(prev => {
35 | // if(prev < frame_array.length-1){
36 | // return prev + 1
37 | // } else return 0
38 | // })
39 | // };
40 |
41 |
42 |
43 | //todo: HERE BE DRAGONS! -> using state improperly
44 | // //react component lifecycle is based on object equality. react will do a === on state to decide when to rerender
45 | // //recall the gotchas you learned when doing a === on objects
46 |
47 | // const [compState, setCompState] = React.useState(bad_ref)
48 |
49 | // const manual_click = () => {
50 | // //scenario 1:
51 | // //dont modify objects outside of react state!!
52 | // bad_ref.index = bad_ref.index + 1
53 | // setCompState(bad_ref)
54 |
55 | // //scenario 2:
56 | // // setCompState(state => {
57 | // // console.log("running useState callback!", state)
58 | // // state.index += 1
59 | // // const modified_state = state
60 | // // console.log("same object in memory? ", state === modified_state)
61 | // // return modified_state
62 | // // })
63 |
64 | // //bad reference: we are mutating an existing object
65 | // //reference in memory is the same
66 | // //react runs oldState === newState and it is true, so nothing happens
67 |
68 |
69 | // //todo: how to fix this
70 | // //copy old state and return a new reference in memory
71 | // //the logs will show the asynchronous nature of useState hook
72 | // // setCompState(state => {
73 |
74 | // // console.log("logging previous state:: ", state)
75 | // // const modified_state = {...state, index: state.index + 1}
76 | // // console.log("same object in memory? ", state === modified_state)
77 |
78 | // // return modified_state
79 | // // })
80 | // console.log("I run before the useState callback!", compState)
81 | // }
82 |
83 | // React.useEffect(() => {
84 | // console.log("useEffect runs before render so you can see the change!", compState)
85 | // }, [compState]);
86 |
87 |
88 | //TODO for good times
89 | //make it a video lol
90 | // const [vidStart, setVidStart] = React.useState(false)
91 | // const [compStateAuto, setCompStateAuto] = React.useState(0)
92 | // const [intID, setIntID] = React.useState(0)
93 | // React.useEffect(() => {
94 | // if((vidStart === true) && (intID === 0)){
95 | // const newIntID = setInterval(() => {
96 | // setCompStateAuto(prev => {
97 | // if(prev < frame_array.length-1){
98 | // return prev + 1
99 | // } else return 0
100 | // })
101 | // }, 150);
102 | // setIntID(newIntID)
103 | // } else if ((vidStart === false) && intID){
104 | // clearInterval(intID);
105 | // setIntID(0);
106 | // }
107 | // }, [vidStart, intID]);
108 |
109 |
110 |
111 | //pro tip: to correctly log async code, you need a useEffect
112 | // React.useEffect(() => {
113 | // console.log("intervalID, vidStart:: ", intID, vidStart)
114 | // }, [vidStart, intID]);
115 |
116 | // const vid_click = () => {
117 | // setVidStart(prev => !prev)
118 | // }
119 |
120 |
121 | return (
122 |
123 |
Write code to advance the frames!
124 |
145 | manual frames:
146 |
149 | {/* auto frames:
150 | */}
153 |
154 |
155 | {/* //todo: switch up the var depending on your source */}
156 | Using a redux useSelector! Frame: {gif_frame}
157 | {/* Using local useState! Frame: {compState} */}
158 | {/* Using a bad object reference! Frame: {compState.index} */}
159 |