add rtk-snapshot

javascript/frameworks-libraries/react-redux-stack/src-6-rtk/App.jsx

@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+import { Provider } from 'react-redux';
+
+import Chat from './containers/Chat';
+// import Button from './components/Button';
+// import ButtonFunctional from './components/ButtonFunctional';
+import { store } from './model/store';
+
+window.store = store;
+// store.subscribe(() => console.log('subscribe', store.getState()));
+// TODO: @see https://redux-toolkit.js.org/api/createListenerMiddleware
+
+export default class App extends Component {
+  render() {
+    return (
+      <Provider store={store}>
+        <Chat />
+        {/* <Button text="Usual Button" /> */}
+        {/* <ButtonFunctional  text="ButtonFunctional" /> */}
+      </Provider>
+    );
+  }
+}

javascript/frameworks-libraries/react-redux-stack/src-6-rtk/App.test.js

@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders without crashing', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

javascript/frameworks-libraries/react-redux-stack/src-6-rtk/components/Button.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+class Button extends React.Component {
+  render() {
+    return (
+      <button onClick={this.props.onClick}>
+        {this.props.text}
+      </button>
+    );
+  }
+}
+
+export default Button;

javascript/frameworks-libraries/react-redux-stack/src-6-rtk/components/ButtonFunctional.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const ButtonFunctional = ({text, onClick}) => (
+  <button onClick={onClick}>
+    {text}
+  </button>
+);
+
+export default ButtonFunctional;

javascript/frameworks-libraries/react-redux-stack/src-6-rtk/components/Heading5.js

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+
+export default styled.h5`
+  margin: 0 0 1em;
+`;

javascript/frameworks-libraries/react-redux-stack/src-6-rtk/components/Messages.jsx

@@ -0,0 +1,54 @@
+import React, { PureComponent } from 'react';
+// Components ---------------------------
+import Ul from './Ul';
+import Heading5 from './Heading5';
+// Styles -------------------------------
+import styled from 'styled-components';
+
+const Form = styled.form`
+  padding: 0.5em;
+`;
+
+const Info = styled.span`
+  opacity: 0.5;
+`;
+
+class Messages extends PureComponent {
+  submitForm(event) {
+    event.preventDefault();
+    console.log(this.input.value);
+    this.props.addMessage(this.input.value, '1');
+    this.input.value = '';
+  }
+
+  render() {
+    console.log('Messages props', this.props); // {users}
+    return (
+      <Form onSubmit={this.submitForm.bind(this)}>
+        <Heading5>Messages:</Heading5>
+        <Ul>
+          {this.props.messages.map((message) => {
+            const time = new Date(message.timeStamp);
+            const hours = time.getHours();
+            const minutes = time.getMinutes();
+            return (
+              <li key={message.timeStamp}>
+                <Info>{`${hours}:${minutes} ${message.author} `}</Info>
+                {message.text}
+              </li>
+            );
+          })}
+        </Ul>
+        <hr />
+
+        <input
+          ref={(input) => (this.input = input)}
+          type="text"
+          placeholder="Enter a message"
+        />
+      </Form>
+    );
+  }
+}
+
+export default Messages;

javascript/frameworks-libraries/react-redux-stack/src-6-rtk/components/Ul.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+export default styled.ul`
+  padding: 0;
+  list-style: none;
+  height: 200px;
+  overflow: auto;
+`;

javascript/frameworks-libraries/react-redux-stack/src-6-rtk/components/UserList.jsx

@@ -0,0 +1,32 @@
+import React, {Component} from 'react';
+// Components ---------------------------
+import Ul from './Ul';
+// Styles -------------------------------
+import styled from 'styled-components';
+
+const Li = styled.li`
+  width: 60px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+const UlStyled = styled(Ul)`
+  font-family: monospace;
+`;
+
+class UserList extends Component {
+  render() {
+    console.log('UserList props', this.props); // {users}
+    return (
+      <Ul className="UserList">
+        <UlStyled className="UserList">
+          {this.props.users.map(user => {
+            return <Li key={user}>{user}</Li>;
+          })}
+        </UlStyled>
+      </Ul>
+    );
+  }
+}
+
+export default UserList;

javascript/frameworks-libraries/react-redux-stack/src-6-rtk/containers/Chat.jsx

@@ -0,0 +1,55 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import styled from 'styled-components';
+
+import Messages from './../components/Messages';
+import Users from './../containers/Users';
+import { chatSelector } from './../model/selectors';
+import { addMessage } from './../model/messagesSlice';
+import { changeUser } from './../model/actions';
+
+const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const Panels = styled.div`
+  display: flex;
+  background-color: #f5f5f5;
+  padding: 0.5em;
+`;
+
+class Chat extends Component {
+  render() {
+    console.log('Chat props', this.props);
+    return (
+      <Content>
+        <h3>Chat</h3>
+
+        <Panels>
+          <Users addUser={this.props.addUser} users={this.props.users} />
+          <Messages
+            addMessage={this.props.addMessage}
+            messages={this.props.messages}
+          />
+        </Panels>
+      </Content>
+    );
+  }
+}
+
+// used a selector below
+// const mapStateToProps = state => {
+//   return {
+//     users: state.users,
+//     messages: state.messages
+//   };
+// };
+
+const mapDispatchToProps = { addUser: changeUser, addMessage };
+
+// usual
+//export default connect(mapStateToProps, mapDispatchToProps)(Chat);
+
+// with reselect
+export default connect(chatSelector, mapDispatchToProps)(Chat);

javascript/frameworks-libraries/react-redux-stack/src-6-rtk/containers/Users.jsx

@@ -0,0 +1,28 @@
+import React, {Component} from 'react';
+// Components ---------------------------
+import UserList from './../components/UserList';
+import Heading5 from './../components/Heading5';
+// Styles -------------------------------
+import styled from 'styled-components';
+
+const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 0.5em;
+  background-color: #cccdff;
+`;
+
+class Users extends Component {
+  render() {
+    console.log('Users props', this.props); // {users}
+    return (
+      <Content>
+        <Heading5>Users:</Heading5>
+        <button onClick={this.props.addUser}>add</button>
+        <UserList users={this.props.users}/>
+      </Content>
+    );
+  }
+}
+
+export default Users;

javascript/frameworks-libraries/react-redux-stack/src-6-rtk/index.css

@@ -0,0 +1,14 @@
+body {
+  font-family: "Century Gothic", Futura, sans-serif;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+#root {
+  flex-grow: 1;
+  flex-shrink: 0;
+}

javascript/frameworks-libraries/react-redux-stack/src-6-rtk/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+// Components ---------------------------
+import App from './App';
+// Styles -------------------------------
+import 'normalize.css';
+import './index.css';
+// --------------------------------------
+const root = createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

javascript/frameworks-libraries/react-redux-stack/src-6-rtk/model/_counterSlice.js

@@ -0,0 +1,30 @@
+import { createSlice } from '@reduxjs/toolkit'
+
+const initialState = {
+  value: 0,
+}
+
+export const counterSlice = createSlice({
+  name: 'counter',
+  initialState,
+  reducers: {
+    increment: (state) => {
+      // Redux Toolkit allows us to write "mutating" logic in reducers. It
+      // doesn't actually mutate the state because it uses the Immer library,
+      // which detects changes to a "draft state" and produces a brand new
+      // immutable state based off those changes
+      state.value += 1
+    },
+    decrement: (state) => {
+      state.value -= 1
+    },
+    incrementByAmount: (state, action) => {
+      state.value += action.payload
+    },
+  },
+})
+
+// Action creators are generated for each case reducer function
+export const { increment, decrement, incrementByAmount } = counterSlice.actions
+
+export default counterSlice.reducer

javascript/frameworks-libraries/react-redux-stack/src-6-rtk/model/_counterSlice.spec.js

@@ -0,0 +1,33 @@
+import counterReducer, {
+  increment,
+  decrement,
+  incrementByAmount,
+} from './counterSlice';
+
+describe('counter reducer', () => {
+  const initialState = {
+    value: 3,
+    status: 'idle',
+  };
+  it('should handle initial state', () => {
+    expect(counterReducer(undefined, { type: 'unknown' })).toEqual({
+      value: 0,
+      status: 'idle',
+    });
+  });
+
+  it('should handle increment', () => {
+    const actual = counterReducer(initialState, increment());
+    expect(actual.value).toEqual(4);
+  });
+
+  it('should handle decrement', () => {
+    const actual = counterReducer(initialState, decrement());
+    expect(actual.value).toEqual(2);
+  });
+
+  it('should handle incrementByAmount', () => {
+    const actual = counterReducer(initialState, incrementByAmount(2));
+    expect(actual.value).toEqual(5);
+  });
+});

javascript/frameworks-libraries/react-redux-stack/src-6-rtk/model/actions.js

@@ -0,0 +1,12 @@
+import { nanoid } from '@reduxjs/toolkit';
+
+import { addUser } from './usersSlice';
+import { addMessage } from './messagesSlice';
+
+export const changeUser = () => {
+  return (dispatch) => {
+    const name = '@' + nanoid();
+    dispatch(addUser(name));
+    dispatch(addMessage('Joined!', name));
+  };
+};