refactor Contributor.js structure

src/client/js/components/StaffCredit/Contributor.js

@@ -1,69 +1,104 @@
 const contributors = [
   {
     sectionName: 'GROWI VILLAGE',
-    sectionAdditionalClass: 'staff-credit-mt-10',
-    memberAdditionalClass: 'col-md-12 my-4',
-    members: [
-      { position: 'Founder', name: 'yuki-takei' },
-      { position: 'Soncho 1st', name: 'mizozobu' },
-      { position: 'Soncho 2nd', name: 'yusuketk' },
-    ],
-  },
-  {
-    hideSectionName: true,
-    sectionName: 'GROWI VILLAGE 2',
-    sectionAdditionalClass: 'staff-credit-mb-10',
-    memberAdditionalClass: 'col-md-6 my-4',
-    members: [
-      { name: 'utsushiiro' },
-      { name: 'mayumorita' },
-      { name: 'TatsuyaIse' },
-      { name: 'shinoka7' },
-      { name: 'SeiyaTashiro' },
-      { name: 'itizawa' },
-      { name: 'TsuyoshiSuzukief' },
-      { name: 'Yuchan4342' },
-      { name: 'ryu-sato' },
-      { name: 'haruhikonyan' },
-      { name: 'KazuyaNagase' },
-      { name: 'kaishuu0123' },
-      { name: 'kouki-o' },
-      { name: 'Angola' },
+    additionalClass: '',
+    memberGroups: [
+      {
+        additionalClass: 'col-md-12 my-4',
+        members: [
+          { position: 'Founder', name: 'yuki-takei' },
+          { position: 'Soncho 1st', name: 'mizozobu' },
+          { position: 'Soncho 2nd', name: 'yusuketk' },
+        ],
+      },
+      {
+        additionalClass: 'col-md-6 my-4',
+        members: [
+          { name: 'utsushiiro' },
+          { name: 'mayumorita' },
+          { name: 'TatsuyaIse' },
+          { name: 'shinoka7' },
+          { name: 'SeiyaTashiro' },
+          { name: 'itizawa' },
+          { name: 'TsuyoshiSuzukief' },
+          { name: 'Yuchan4342' },
+          { name: 'ryu-sato' },
+          { name: 'haruhikonyan' },
+          { name: 'KazuyaNagase' },
+          { name: 'kaishuu0123' },
+          { name: 'kouki-o' },
+          { name: 'Angola' },
+        ],
+      },
     ],
   },
   {
     sectionName: 'CONTRIBUTER',
-    sectionAdditionalClass: 'staff-credit-mt-10 staff-credit-mb-10',
-    memberAdditionalClass: 'col-md-4',
-    members: [
-      { name: 'shield-9' },
-      { name: 'yaodingyd' },
-      { name: 'hitochan777' },
-      { name: 'ttaka66' },
-      { name: 'watagashi' },
-      { name: 'nt-7' },
-      { name: 'hideo54' },
-      { name: 'wadahiro' },
-      { name: 'shaminmeerankutty' },
-      { name: 'fumitti' },
-      { name: 'fmy' },
-      { name: 'yaamai' },
-      { name: 'ta2yak' },
-      { name: 'ryo33' },
-      { name: 'rabitarochan' },
-      { name: 'r-tateshina' },
-      { name: 'nekoruri' },
-      { name: 'kmyk' },
-      { name: 'aximov' },
+    additionalClass: '',
+    memberGroups: [
+      {
+        additionalClass: 'col-md-4 my-4',
+        members: [
+          { name: 'shield-9' },
+          { name: 'yaodingyd' },
+          { name: 'hitochan777' },
+          { name: 'ttaka66' },
+          { name: 'watagashi' },
+          { name: 'nt-7' },
+          { name: 'hideo54' },
+          { name: 'wadahiro' },
+          { name: 'fumitti' },
+        ],
+      },
+      {
+        additionalClass: 'col-md-6 my-4',
+        members: [
+          { name: 'shaminmeerankutty' },
+          { name: 'rabitarochan' },
+        ],
+      },
+      {
+        additionalClass: 'col-md-4 my-4',
+        members: [
+          { name: 'fmy' },
+          { name: 'yaamai' },
+          { name: 'ta2yak' },
+          { name: 'ryo33' },
+          { name: 'r-tateshina' },
+          { name: 'nekoruri' },
+          { name: 'kmyk' },
+          { name: 'aximov' },
+        ],
+      },
     ],
   },
+  // {
+  //   sectionName: 'VALNERABILITY HUNTER',
+  //   additionalClass: '',
+  //   memberGroups: [
+  //     {
+  //       additionalClass: 'col-md-6 my-4',
+  //       members: [
+  //         { name: 'Yoshinori Hayashi' },
+  //         { name: 'Kanta Nishitani' },
+  //         { name: 'Takashi Yoneuchi' },
+  //         { position: 'DeCurret', name: 'Yusuke Tanomogi' },
+  //       ],
+  //     },
+  //   ],
+  // },
   {
     sectionName: 'SPECIAL THANKS',
-    sectionAdditionalClass: 'staff-credit-mt-10 staff-credit-mb-10',
-    memberAdditionalClass: 'col-md-4',
-    members: [
-      { name: 'Crowi Team' },
-      { position: 'Ambassador', name: 'Tsuyoshi Suzuki' },
+    additionalClass: '',
+    memberGroups: [
+      {
+        additionalClass: 'col-md-4 my-4',
+        members: [
+          { name: 'Crowi Team' },
+          { position: 'Ambassador', name: 'Tsuyoshi Suzuki' },
+          { name: 'JPCERT/CC' },
+        ],
+      },
     ],
   },
 ];

src/client/js/components/StaffCredit/StaffCredit.jsx

@@ -58,28 +58,38 @@ export default class StaffCredit extends React.Component {
     }
   }
 
+  renderMembers(memberGroup, keyPrefix) {
+    // construct members elements
+    const members = memberGroup.members.map((member) => {
+      return (
+        <div className={memberGroup.additionalClass} key={`${keyPrefix}-${member.name}-container`}>
+          <span className="dev-position" key={`${keyPrefix}-${member.name}-position`}>
+            {/* position or '&nbsp;' */}
+            { member.position || '\u00A0' }
+          </span>
+          <p className="dev-name" key={`${keyPrefix}-${member.name}`}>{member.name}</p>
+        </div>
+      );
+    });
+    return (
+      <React.Fragment key={`${keyPrefix}-fragment`}>
+        {members}
+      </React.Fragment>
+    );
+  }
+
   renderContributors() {
     if (this.state.isShown) {
       const credit = contributors.map((contributor) => {
         // construct members elements
-        const members = contributor.members.map((member) => {
-          return (
-            <div className={contributor.memberAdditionalClass} key={`${member.name}-container`}>
-              <span className="dev-position" key={`${member.name}-position`}>
-                {/* position or '&nbsp;' */}
-                { member.position || '\u00A0' }
-              </span>
-              <p className="dev-name" key={member.name}>{member.name}</p>
-            </div>
-          );
+        const memberGroups = contributor.memberGroups.map((memberGroup, idx) => {
+          return this.renderMembers(memberGroup, `${contributor.sectionName}-group${idx}`);
         });
         return (
           <React.Fragment key={`${contributor.sectionName}-fragment`}>
-            <div className={`row ${contributor.sectionAdditionalClass}`} key={`${contributor.sectionName}-row`}>
-              { !contributor.hideSectionName && (
-                <h2 className="col-md-12 dev-team mt-5 staff-credit-mb-10" key={contributor.sectionName}>{contributor.sectionName}</h2>
-              ) }
-              {members}
+            <div className={`row staff-credit-my-10 ${contributor.additionalClass}`} key={`${contributor.sectionName}-row`}>
+              <h2 className="col-md-12 dev-team mt-5 staff-credit-mb-10" key={contributor.sectionName}>{contributor.sectionName}</h2>
+              {memberGroups}
             </div>
             <div className="clearfix"></div>
           </React.Fragment>
@@ -88,7 +98,7 @@ export default class StaffCredit extends React.Component {
       return (
         <div className="text-center credit-curtain" onClick={this.deleteCredit}>
           <div className="credit-body">
-            <h1 className="staff-credit-mb-10">Growi Staff Credits</h1>
+            <h1 className="staff-credit-mb-10">Growi Contributors</h1>
             <div className="clearfix"></div>
             {credit}
           </div>

src/client/styles/scss/_staff_credit.scss

@@ -67,4 +67,9 @@
   .staff-credit-mb-10 {
     margin-bottom: 6rem;
   }
+
+  .staff-credit-my-10 {
+    @extend .staff-credit-mt-10;
+    @extend .staff-credit-mb-10;
+  }
 }