From b80a249cf7cd193e0d8d3761dd9db35aef9dd426 Mon Sep 17 00:00:00 2001
From: "G.Ambatte" <sean@robertson-family.nz>
Date: Mon, 26 Jul 2021 22:40:01 +1200
Subject: [PATCH] Reduce code duplication in sorting radio options

---
 client/homebrew/pages/userPage/userPage.jsx | 88 ++++++---------------
 1 file changed, 22 insertions(+), 66 deletions(-)

diff --git a/client/homebrew/pages/userPage/userPage.jsx b/client/homebrew/pages/userPage/userPage.jsx
index 9dd72c2ca..b32e09f79 100644
--- a/client/homebrew/pages/userPage/userPage.jsx
+++ b/client/homebrew/pages/userPage/userPage.jsx
@@ -83,6 +83,22 @@ const UserPage = createClass({
 		});
 	},
 
+	renderSortRadioOption : function(sortTitle, sortValue){
+		return <td>
+			<label>
+				  <input
+					  type='radio'
+					  name='sortType'
+					  value={`${sortValue}`}
+					  checked={this.state.sortType == `${sortValue}`}
+					  className='sort-radio'
+					  onChange={this.handleSortOptionChange}
+				  />
+  		{`${sortTitle}`}
+			  </label>
+		  </td>;
+	},
+
 	renderSortOptions : function(){
 		return <div className='sort-container'>
 			<table>
@@ -90,72 +106,12 @@ const UserPage = createClass({
 					<td>
 						<h6>Sort Type :</h6>
 					</td>
-					<td>
-		  		<label>
-							<input
-								type='radio'
-								name='sortType'
-								value='alpha'
-								checked={this.state.sortType == 'alpha'}
-								className='sort-radio'
-								onChange={this.handleSortOptionChange}
-							/>
-			Title
-						</label>
-					</td>
-					<td>
-						<label>
-							<input
-								type='radio'
-								name='sortType'
-								value='created'
-								checked={this.state.sortType == 'created'}
-								className='sort-radio'
-								onChange={this.handleSortOptionChange}
-							/>
-			Created Date
-						</label>
-					</td>
-					<td>
-						<label>
-							<input
-								type='radio'
-								name='sortType'
-								value='updated'
-								checked={this.state.sortType == 'updated'}
-								className='sort-radio'
-								onChange={this.handleSortOptionChange}
-							/>
-			Updated Date
-		  		</label>
-				  </td>
-				  <td>
-				  <label>
-							<input
-								type='radio'
-								name='sortType'
-								value='views'
-								checked={this.state.sortType == 'views'}
-								className='sort-radio'
-								onChange={this.handleSortOptionChange}
-							/>
-			Views
-		  		</label>
-				  </td>
-				  <td>
-				  <label>
-							<input
-								type='radio'
-								name='sortType'
-								value='latest'
-								checked={this.state.sortType == 'latest'}
-								className='sort-radio'
-								onChange={this.handleSortOptionChange}
-							/>
-			Latest
-		  		</label>
-				  </td>
-				  <td>
+					{this.renderSortRadioOption('Title', 'alpha')}
+					{this.renderSortRadioOption('Created Date', 'created')}
+					{this.renderSortRadioOption('Updated Date', 'updated')}
+					{this.renderSortRadioOption('Views', 'views')}
+					{/* {this.renderSortRadioOption('Latest', 'latest')} */}
+				    <td>
 						<h6>Direction :</h6>
 					</td>
 					<td>