From 4724eff74cc7fca580bf2e9e8cf6c06a26321ce4 Mon Sep 17 00:00:00 2001
From: agatha <agatha@juggalol.com>
Date: Fri, 12 Apr 2024 22:24:27 -0400
Subject: [PATCH] create UsersList component

---
 src/client/Routes.js               |  3 ++-
 src/client/client.js               |  1 +
 src/client/components/UsersList.js | 30 ++++++++++++++++++++++++++++++
 src/index.js                       |  1 +
 4 files changed, 34 insertions(+), 1 deletion(-)
 create mode 100644 src/client/components/UsersList.js

diff --git a/src/client/Routes.js b/src/client/Routes.js
index c1b5a13..afb8f34 100644
--- a/src/client/Routes.js
+++ b/src/client/Routes.js
@@ -1,12 +1,13 @@
 import React from "react";
 import { Route } from "react-router-dom";
 import Home from "./components/Home";
+import UsersList from "./components/UsersList";
 
 export default () => {
   return (
       <div>
           <Route exact path="/" component={Home} />
-          <Route exact path="/users" component={() => 'Users'} />
+          <Route exact path="/users" component={UsersList} />
           <Route exact path="/admins" component={() => 'Admins List'} />
           <Route exact path="/profile" component={() => 'Current User'} />
       </div>
diff --git a/src/client/client.js b/src/client/client.js
index a78a4c8..5032b05 100644
--- a/src/client/client.js
+++ b/src/client/client.js
@@ -1,3 +1,4 @@
+import 'babel-polyfill';
 import React from "react";
 import ReactDOM from 'react-dom';
 import { BrowserRouter } from "react-router-dom";
diff --git a/src/client/components/UsersList.js b/src/client/components/UsersList.js
new file mode 100644
index 0000000..b8a4a41
--- /dev/null
+++ b/src/client/components/UsersList.js
@@ -0,0 +1,30 @@
+import React, { Component } from "react";
+import { connect } from 'react-redux'
+import { fetchUsers } from "../actions";
+
+class UsersList extends Component {
+    componentDidMount() {
+        this.props.fetchUsers();
+    }
+
+    renderUsers() {
+        return this.props.users.map(user => {
+            return <li key={user.id}>{user.name}</li>
+        })
+    }
+
+    render() {
+        return (
+            <div>
+                Users List
+                <ul>{this.renderUsers()}</ul>
+            </div>
+        );
+    }
+}
+
+function mapStateToProps(state) {
+    return { users: state.users };
+}
+
+export default connect(mapStateToProps, { fetchUsers })(UsersList);
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 07c5b7c..0881620 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,3 +1,4 @@
+import 'babel-polyfill';
 import express from 'express';
 import renderer from './helpers/renderer';
 import createStore from "./helpers/createStore";