From 4d15347850eca9f42d18ade8b76061cbf26a890c Mon Sep 17 00:00:00 2001
From: anshg1214 <anshg1214@gmail.com>
Date: Sun, 29 Oct 2023 11:38:44 +0000
Subject: [PATCH 1/4] feat: Show already selected achievements

---
 src/client/components/input/drag-and-drop.tsx | 38 +++++++++++++------
 .../pages/parts/editor-achievements.js        | 19 ++++++++--
 src/client/controllers/editor/achievement.js  |  1 +
 src/server/routes/editor.tsx                  | 14 +++++++
 4 files changed, 57 insertions(+), 15 deletions(-)

diff --git a/src/client/components/input/drag-and-drop.tsx b/src/client/components/input/drag-and-drop.tsx
index 7ec2ec3fa9..10f99b8ab2 100644
--- a/src/client/components/input/drag-and-drop.tsx
+++ b/src/client/components/input/drag-and-drop.tsx
@@ -33,8 +33,8 @@ const {useState, useCallback} = React;
 */
 type Achievement = {
 	name: string;
-	src: string;
-	id: string;
+	badgeUrl: string;
+	id: number;
 };
 
 /**
@@ -44,6 +44,7 @@ type Achievement = {
  */
 type Props = {
   name: string;
+  initialAchievement?: Achievement;
 };
 
 /**
@@ -53,16 +54,14 @@ type Props = {
 * @param {Props} props - The props object containing the following:
 * @returns {JSX.Element} A React component that displays a drag-and-drop card for an achievement.
 */
-function DragAndDrop({name}: Props): JSX.Element {
-	const [achievement, setAchievement] = useState<Achievement>({
-		name: 'drag badge to set',
-		src: '/images/blankbadge.svg'
-	});
+function DragAndDrop({name, initialAchievement}: Props): JSX.Element {
+	const [achievement, setAchievement] = useState<Achievement>(initialAchievement);
 	const handleClick = useCallback((event: React.MouseEvent<HTMLDivElement>) => {
 		event.preventDefault();
 		setAchievement({
-			name: 'drag badge to set',
-			src: '/images/blankbadge.svg'
+			badgeUrl: '/images/blankbadge.svg',
+			id: null,
+			name: 'drag badge to set'
 		});
 	});
 	const handleDragOver = useCallback((event: React.DragEvent<HTMLDivElement>) => {
@@ -78,7 +77,11 @@ function DragAndDrop({name}: Props): JSX.Element {
 		catch (error) {
 			return;
 		}
-		setAchievement(data);
+		setAchievement({
+			badgeUrl: data.src,
+			id: data.id,
+			name: data.name
+		});
 	});
 	return (
 		<Card
@@ -90,7 +93,7 @@ function DragAndDrop({name}: Props): JSX.Element {
 			<Card.Img
 				className="mt-4"
 				height={100}
-				src={achievement.src}
+				src={achievement.badgeUrl}
 				variant="top"
 			/>
 			<Card.Body className="text-center">
@@ -98,7 +101,7 @@ function DragAndDrop({name}: Props): JSX.Element {
 					<Form.Control
 						name={name}
 						type="hidden"
-						value={achievement.id}
+						value={achievement.id ? achievement.id.toString() : ''}
 					/>
 				</Form.Group>
 				<div className="h3">
@@ -111,7 +114,18 @@ function DragAndDrop({name}: Props): JSX.Element {
 
 DragAndDrop.displayName = 'DragAndDrop';
 DragAndDrop.propTypes = {
+	initialAchievement: PropTypes.shape({
+		badgeUrl: PropTypes.string,
+		id: PropTypes.number,
+		name: PropTypes.string.isRequired
+	}),
 	name: PropTypes.string.isRequired
 };
+DragAndDrop.defaultProps = {
+	initialAchievement: {
+		badgeUrl: '/images/blankbadge.svg',
+		name: 'drag badge to set'
+	}
+};
 
 export default DragAndDrop;
diff --git a/src/client/components/pages/parts/editor-achievements.js b/src/client/components/pages/parts/editor-achievements.js
index e09b994808..bc0033408b 100644
--- a/src/client/components/pages/parts/editor-achievements.js
+++ b/src/client/components/pages/parts/editor-achievements.js
@@ -39,6 +39,7 @@ class EditorAchievementTab extends React.Component {
 	 */
 	constructor(props) {
 		super(props);
+		this.currAchievement = props.currAchievement;
 		this.state = {
 			achievement: props.achievement,
 			editor: props.editor
@@ -91,9 +92,18 @@ class EditorAchievementTab extends React.Component {
 					method="post"
 				>
 					<CardDeck className="mb-3">
-						<DragAndDrop name="rank1"/>
-						<DragAndDrop name="rank2"/>
-						<DragAndDrop name="rank3"/>
+						<DragAndDrop
+							initialAchievement={this.currAchievement.model[0]?.achievement}
+							name="rank1"
+						/>
+						<DragAndDrop
+							initialAchievement={this.currAchievement.model[1]?.achievement}
+							name="rank2"
+						/>
+						<DragAndDrop
+							initialAchievement={this.currAchievement.model[2]?.achievement}
+							name="rank3"
+						/>
 					</CardDeck>
 					<span className="margin-left-1">
 						<Button type="submit" variant="success">
@@ -151,6 +161,9 @@ EditorAchievementTab.propTypes = {
 	achievement: PropTypes.shape({
 		model: PropTypes.array
 	}).isRequired,
+	currAchievement: PropTypes.shape({
+		model: PropTypes.array
+	}).isRequired,
 	editor: PropTypes.shape({
 		authenticated: PropTypes.bool,
 		id: PropTypes.number
diff --git a/src/client/controllers/editor/achievement.js b/src/client/controllers/editor/achievement.js
index 591cdc4e04..81af8d623b 100644
--- a/src/client/controllers/editor/achievement.js
+++ b/src/client/controllers/editor/achievement.js
@@ -41,6 +41,7 @@ ReactDOM.hydrate(
 			>
 				<AchievementsTab
 					achievement={props.achievement}
+					currAchievement={props.currAchievement}
 					editor={props.editor}
 					isOwner={props.isOwner}
 				/>
diff --git a/src/server/routes/editor.tsx b/src/server/routes/editor.tsx
index 5f9e0f0a3c..5f90b5d094 100644
--- a/src/server/routes/editor.tsx
+++ b/src/server/routes/editor.tsx
@@ -531,6 +531,16 @@ router.get('/:id/achievements', async (req, res, next) => {
 		.where('editor_id', userId)
 		.fetchAll({require: false});
 
+	const achievementCol = await new AchievementUnlock()
+		.where('editor_id', userId)
+		.where('profile_rank', '<=', '3')
+		.query((qb) => qb.limit(3))
+		.orderBy('profile_rank', 'ASC')
+		.fetchAll({
+			require: false,
+			withRelated: ['achievement']
+		});
+
 	const achievementTypesPromise = new AchievementType()
 		.orderBy('id', 'ASC')
 		.fetchAll();
@@ -542,8 +552,11 @@ router.get('/:id/achievements', async (req, res, next) => {
 	const achievementJSON =
 		await setAchievementUnlockedField(achievementTypes, unlocks, userId, res.app.locals.orm);
 
+	const currAchievementJSON = achievementColToEditorGetJSON(achievementCol);
+
 	const props = generateProps(req, res, {
 		achievement: achievementJSON,
+		currAchievement: currAchievementJSON,
 		editor: editorJSON,
 		isOwner,
 		tabActive: 2
@@ -556,6 +569,7 @@ router.get('/:id/achievements', async (req, res, next) => {
 			>
 				<AchievementsTab
 					achievement={props.achievement}
+					currAchievement={props.currAchievement}
 					editor={props.editor}
 					isOwner={props.isOwner}
 				/>

From 6e7e14e997a485175e6852c25de934e7631a84eb Mon Sep 17 00:00:00 2001
From: anshg1214 <anshg1214@gmail.com>
Date: Sun, 29 Oct 2023 11:42:00 +0000
Subject: [PATCH 2/4] docs: Update comments

---
 src/client/components/input/drag-and-drop.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/client/components/input/drag-and-drop.tsx b/src/client/components/input/drag-and-drop.tsx
index 10f99b8ab2..77392e504d 100644
--- a/src/client/components/input/drag-and-drop.tsx
+++ b/src/client/components/input/drag-and-drop.tsx
@@ -28,8 +28,8 @@ const {useState, useCallback} = React;
 * The Achievement interface, defining the properties of an achievement.
 * @typedef
 * @property {string} name - The name of the achievement.
-* @property {string} src - The source URL of the achievement's badge image.
-* @property {string} id - The ID of the achievement.
+* @property {string} badgeUrl - The source URL of the achievement's badge image.
+* @property {number} id - The ID of the achievement.
 */
 type Achievement = {
 	name: string;
@@ -41,6 +41,7 @@ type Achievement = {
  * Props for DragAndDropImage component
  * @typedef {Object} Props
  * @property {string} name - The name of the DragAndDrop component.
+ * @property {Achievement} initialAchievement - The initial achievement to display in the card.
  */
 type Props = {
   name: string;

From 7c42dfa426ceba1ff9dff6dab17fa805a6139056 Mon Sep 17 00:00:00 2001
From: anshg1214 <anshg1214@gmail.com>
Date: Fri, 29 Dec 2023 16:59:43 +0000
Subject: [PATCH 3/4] fix: types and drag and drop props

---
 src/client/components/input/drag-and-drop.tsx            | 3 ++-
 src/client/components/pages/parts/editor-achievements.js | 6 +++---
 src/server/routes/editor.tsx                             | 4 ++--
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/client/components/input/drag-and-drop.tsx b/src/client/components/input/drag-and-drop.tsx
index 77392e504d..306bcad22c 100644
--- a/src/client/components/input/drag-and-drop.tsx
+++ b/src/client/components/input/drag-and-drop.tsx
@@ -33,7 +33,7 @@ const {useState, useCallback} = React;
 */
 type Achievement = {
 	name: string;
-	badgeUrl: string;
+	badgeUrl: string | null;
 	id: number;
 };
 
@@ -125,6 +125,7 @@ DragAndDrop.propTypes = {
 DragAndDrop.defaultProps = {
 	initialAchievement: {
 		badgeUrl: '/images/blankbadge.svg',
+		id: null,
 		name: 'drag badge to set'
 	}
 };
diff --git a/src/client/components/pages/parts/editor-achievements.js b/src/client/components/pages/parts/editor-achievements.js
index bc0033408b..903d0d9399 100644
--- a/src/client/components/pages/parts/editor-achievements.js
+++ b/src/client/components/pages/parts/editor-achievements.js
@@ -93,15 +93,15 @@ class EditorAchievementTab extends React.Component {
 				>
 					<CardDeck className="mb-3">
 						<DragAndDrop
-							initialAchievement={this.currAchievement.model[0]?.achievement}
+							initialAchievement={this.currAchievement.model.fulfillmentValue[0]?.achievement}
 							name="rank1"
 						/>
 						<DragAndDrop
-							initialAchievement={this.currAchievement.model[1]?.achievement}
+							initialAchievement={this.currAchievement.model.fulfillmentValue[1]?.achievement}
 							name="rank2"
 						/>
 						<DragAndDrop
-							initialAchievement={this.currAchievement.model[2]?.achievement}
+							initialAchievement={this.currAchievement.model.fulfillmentValue[2]?.achievement}
 							name="rank3"
 						/>
 					</CardDeck>
diff --git a/src/server/routes/editor.tsx b/src/server/routes/editor.tsx
index 5f90b5d094..19e04461bd 100644
--- a/src/server/routes/editor.tsx
+++ b/src/server/routes/editor.tsx
@@ -531,7 +531,7 @@ router.get('/:id/achievements', async (req, res, next) => {
 		.where('editor_id', userId)
 		.fetchAll({require: false});
 
-	const achievementCol = await new AchievementUnlock()
+	const achievementCol = new AchievementUnlock()
 		.where('editor_id', userId)
 		.where('profile_rank', '<=', '3')
 		.query((qb) => qb.limit(3))
@@ -546,7 +546,7 @@ router.get('/:id/achievements', async (req, res, next) => {
 		.fetchAll();
 
 	const [unlocks, editorJSON, achievementTypes] = await Promise.all([
-		unlocksPromise, editorJSONPromise, achievementTypesPromise
+		unlocksPromise, editorJSONPromise, achievementTypesPromise, achievementCol
 	]);
 
 	const achievementJSON =

From 5bed9a1fb3b72f18c3a5624562c95e7ee5dd056b Mon Sep 17 00:00:00 2001
From: anshg1214 <anshg1214@gmail.com>
Date: Tue, 16 Jan 2024 04:46:05 +0000
Subject: [PATCH 4/4] fix: Await achievement promise request

---
 src/server/routes/editor.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/server/routes/editor.tsx b/src/server/routes/editor.tsx
index 19e04461bd..dd6aa81457 100644
--- a/src/server/routes/editor.tsx
+++ b/src/server/routes/editor.tsx
@@ -531,7 +531,7 @@ router.get('/:id/achievements', async (req, res, next) => {
 		.where('editor_id', userId)
 		.fetchAll({require: false});
 
-	const achievementCol = new AchievementUnlock()
+	const achievementColPromise = new AchievementUnlock()
 		.where('editor_id', userId)
 		.where('profile_rank', '<=', '3')
 		.query((qb) => qb.limit(3))
@@ -545,8 +545,8 @@ router.get('/:id/achievements', async (req, res, next) => {
 		.orderBy('id', 'ASC')
 		.fetchAll();
 
-	const [unlocks, editorJSON, achievementTypes] = await Promise.all([
-		unlocksPromise, editorJSONPromise, achievementTypesPromise, achievementCol
+	const [unlocks, editorJSON, achievementTypes, achievementCol] = await Promise.all([
+		unlocksPromise, editorJSONPromise, achievementTypesPromise, achievementColPromise
 	]);
 
 	const achievementJSON =