members page

t9tio · Jun 21, 2019 · 454dc9c · 454dc9c
1 parent cb0bb3a
commit 454dc9c
Show file tree

Hide file tree

Showing 8 changed files with 150 additions and 13 deletions.
diff --git a/backend/index.js b/backend/index.js
@@ -95,6 +95,16 @@ nextApp.prepare().then(() => {
     });
   });
 
+  app.get('/chat/:groupName/members', async (req, res) => {
+    const { groupName } = req.params;
+    const group = await Group.get({ name: groupName });
+    const members = await GroupMember.getAllMembers({ groupName });
+
+    nextApp.render(req, res, '/members', {
+      group, members,
+    });
+  });
+
   app.get('/chat/:groupname/member/:username', async (req, res) => {
     const { groupname, username } = req.params;
     const groupMember = await GroupMember.get({ groupName: groupname, name: username });

diff --git a/db/GroupMember.js b/db/GroupMember.js
@@ -30,21 +30,40 @@ async function get({ groupName, name }) {
     Key: {
       groupName, name,
     },
+    AttributesToGet: [ // list of specific attribute names to return
+      'name',
+      'intro',
+      'url',
+    ],
   }).promise();
   return Item;
 }
 
 async function put({
-  groupName, name, email, url, intro,
+  groupName, name, email, url, intro, date,
 }) {
   await docClient.put({
     TableName: 'wewe-group-member',
     Item: {
-      groupName, name, email, url, intro,
+      groupName, name, email, url, intro, date,
     },
   }).promise();
 }
 
+async function getAllMembers({ groupName }) {
+  const { Items } = await docClient.query({
+    TableName: 'wewe-group-member',
+    KeyConditions: {
+      groupName: {
+        ComparisonOperator: 'EQ',
+        AttributeValueList: [groupName],
+      },
+    },
+  }).promise();
+
+  return Items;
+}
+
 async function getAllMemberNames({ groupName }) {
   const { Items } = await docClient.query({
     TableName: 'wewe-group-member',
@@ -67,6 +86,7 @@ module.exports = {
   deleteTable,
   get,
   put,
+  getAllMembers,
   getAllMemberNames,
 };
 
@@ -78,3 +98,13 @@ module.exports = {
 //   url: 't9t.io',
 //   email: 'timqian92@qq.com',
 // });
+
+
+// put({
+//   groupName: 'wewe',
+//   name: '秋虫儿闹声喧',
+//   email: 'liuyunli1992@163.com',
+//   // url: 'https://weibo.com/345981205',
+//   // intro: '野路子产品菜🐶，立志要做全栈产品。小程序：小确幸Me',
+//   date: new Date().getTime(),
+// });
diff --git a/pages/chat.js b/pages/chat.js
@@ -4,6 +4,7 @@ import Nav from './components/Nav';
 import Footer from './components/Footer';
 import Msg from './components/Msg';
 import './chat.scss';
+import ChatTabs from './components/ChatTabs';
 
 const Index = (props) => {
   const {
@@ -32,19 +33,10 @@ const Index = (props) => {
                 <p className="subtitle is-6">
                   {group.description}
                   &nbsp;
-                  <a href="https://jinshuju.net/f/hgoWO3" className="tag is-small is-success" >I'm a member of this group</a>
+                  <a href="https://jinshuju.net/f/hgoWO3" className="tag is-small is-success">I'm a member of this group</a>
                 </p>
 
-                <div className="tabs">
-                  <ul>
-                    <li className="is-active"><a href={`/chat/${group.name}`}>Messages</a></li>
-                    <li><a>Live</a></li>
-                    <li><a>Events</a></li>
-                    <li><a>Members</a></li>
-                    <li><a>Topics</a></li>
-                    <li><a>Statistics</a></li>
-                  </ul>
-                </div>
+                <ChatTabs groupName={group.name} focusedTab="messages" />
               </div>
 
               <div className="msg-section">

diff --git a/pages/chat.scss b/pages/chat.scss
@@ -55,6 +55,7 @@
 
 .chat-section {
   padding-top: 0;
+  min-height: 75vh;
 }
 
 .chat-title {

diff --git a/pages/components/ChatTabs.js b/pages/components/ChatTabs.js
@@ -0,0 +1,14 @@
+const Tabs = ({ groupName, focusedTab }) => (
+  <div className="tabs">
+    <ul>
+      <li className={focusedTab === 'messages' ? 'is-active' : ''}><a href={`/chat/${groupName}`}>Messages</a></li>
+      <li className={focusedTab === 'members' ? 'is-active' : ''}><a href={`/chat/${groupName}/members`}>Members</a></li>
+      <li className={focusedTab === 'live' ? 'is-active' : ''}><a href={`/chat/${groupName}`}>Live</a></li>
+      <li className={focusedTab === 'events' ? 'is-active' : ''}><a href={`/chat/${groupName}`}>Events</a></li>
+      <li className={focusedTab === 'topic' ? 'is-active' : ''}><a href={`/chat/${groupName}`}>Topics</a></li>
+      <li className={focusedTab === 'statics' ? 'is-active' : ''}><a href={`/chat/${groupName}`}>Statistics</a></li>
+    </ul>
+  </div>
+);
+
+export default Tabs;
diff --git a/pages/components/Msg.js b/pages/components/Msg.js
@@ -30,6 +30,7 @@ const Msg = ({
       <div className="chat-msg-img">
         <a
           href
+          style={{ cursor: 'zoom-in' }}
           onClick={() => {
             setModalImgSrc(link);
             setIsModalVisible(true);

diff --git a/pages/members.js b/pages/members.js
@@ -0,0 +1,85 @@
+import Head from './components/Head';
+import Nav from './components/Nav';
+import Footer from './components/Footer';
+import ChatTabs from './components/ChatTabs';
+import './members.scss';
+
+const MemberList = ({ members }) => members.map((member) => {
+  if (member.url || member.intro) {
+    return (
+      <div className="media">
+        <div className="media-content">
+          <div className="content">
+            <p>
+              <strong>{member.name}</strong>
+            &nbsp;
+              {member.url ? <a href={member.url}><small><i className="fas fa-home" /></small></a> : ''}
+              <br />
+              {member.intro ? <small>{member.intro}</small> : <small>&nbsp;</small>}
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+
+});
+
+const Index = (props) => {
+  const {
+    group, members,
+  } = props;
+
+
+  return (
+    <div>
+      <Head title={group.name} description={group.description} />
+      <Nav />
+      <div className="members-section section">
+        <br />
+        <div className="container">
+          <div className="columns">
+            <div className="column is-four-fifths ">
+              <div className="">
+                <p className="title is-5">
+                  <a href={`/chat/${group.name}`}>
+                    <i className="fab fa-weixin has-text-success" />
+                      &nbsp;
+                    {group.name}
+                  </a>
+                </p>
+                <p className="subtitle is-6">
+                  {group.description}
+                  &nbsp;
+                  <a href="https://jinshuju.net/f/hgoWO3" className="tag is-small is-success">I'm a member of this group</a>
+                </p>
+
+                <ChatTabs groupName={group.name} focusedTab="members" />
+
+
+                <MemberList members={members} />
+
+                <br />
+
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <Footer />
+    </div>
+  );
+};
+
+// load data from server (or in browser if nav using Link)
+// ref: https://stackoverflow.com/a/52136943/4674834
+Index.getInitialProps = async ({
+  query: {
+    group, members,
+  },
+}) => ({
+  group, members,
+});
+
+export default Index;
diff --git a/pages/members.scss b/pages/members.scss
@@ -0,0 +1,4 @@
+.members-section {
+  padding-top: 0;
+  min-height: 75vh;
+}