BB-722: Display already selected achievements in Edit Achievement Page

src/client/components/input/drag-and-drop.tsx

@@ -28,22 +28,24 @@ 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;
-	src: string;
-	id: string;
+	badgeUrl: string | null;
+	id: number;
 };
 
 /**
  * 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;
+  initialAchievement?: Achievement;
 };
 
 /**
@@ -53,16 +55,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 +78,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,15 +94,15 @@ 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">
 				<Form.Group>
 					<Form.Control
 						name={name}
 						type="hidden"
-						value={achievement.id}
+						value={achievement.id ? achievement.id.toString() : ''}
 					/>
 				</Form.Group>
 				<div className="h3">
@@ -111,7 +115,19 @@ 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',
+		id: null,
+		name: 'drag badge to set'
+	}
+};
 
 export default DragAndDrop;

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.fulfillmentValue[0]?.achievement}
+							name="rank1"
+						/>
+						<DragAndDrop
+							initialAchievement={this.currAchievement.model.fulfillmentValue[1]?.achievement}
+							name="rank2"
+						/>
+						<DragAndDrop
+							initialAchievement={this.currAchievement.model.fulfillmentValue[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

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}
 				/>

src/server/routes/editor.tsx

@@ -531,19 +531,32 @@ router.get('/:id/achievements', async (req, res, next) => {
 		.where('editor_id', userId)
 		.fetchAll({require: false});
 
+	const achievementColPromise = 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();
 
-	const [unlocks, editorJSON, achievementTypes] = await Promise.all([
-		unlocksPromise, editorJSONPromise, achievementTypesPromise
+	const [unlocks, editorJSON, achievementTypes, achievementCol] = await Promise.all([
+		unlocksPromise, editorJSONPromise, achievementTypesPromise, achievementColPromise
 	]);
 
 	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}
 				/>