refactor: made emotions typed (#1179)

* refactor: made emotions typed

* refactor: deleted incognito.webp

src/backend/comment.ts

@@ -3,10 +3,11 @@ import ipfs from '@capsulesocial/ipfs-wrapper'
 import { nodeUrl } from './utilities/config'
 import libsodium from './utilities/keys'
 import { ISignedIPFSObject, uint8ArrayToHexString } from './utilities/helpers'
+import { EmotionCategories, Emotions } from '@/config/config'
 
 export interface INewCommentData {
 	content: string
-	emotion: string
+	emotion: Emotions
 	timestamp: number
 	parentCID: string
 	authorID: string
@@ -17,18 +18,23 @@ export interface ICommentData {
 	_id: string
 	timestamp: number
 	parentCID: string
-	emotion: string
+	emotion: Emotions
 }
 
 export interface ICommentsStats {
 	total: number
 	positive: number
 	neutral: number
 	negative: number
-	faceStats: Record<string, number>
+	faceStats: Record<Emotions, number> | null
 }
 
-export function createComment(authorID: string, content: string, emotion: string, parentCID: string): INewCommentData {
+export function createComment(
+	authorID: string,
+	content: string,
+	emotion: Emotions,
+	parentCID: string,
+): INewCommentData {
 	return {
 		authorID,
 		content,
@@ -73,8 +79,8 @@ export async function getCommentsOfPost(
 	parentCID: string,
 	offset: number,
 	limit: number,
-	emotion?: string,
-	emotionCategory?: `negative` | `neutral` | `positive`,
+	emotion?: Emotions,
+	emotionCategory?: EmotionCategories,
 ): Promise<ICommentData[]> {
 	const res = await axios.get(`${nodeUrl()}/content/${parentCID}/comments`, {
 		params: { ...(emotion ? { emotion } : {}), ...(emotionCategory ? { emotionCategory } : {}), offset, limit },

src/components/post/Actions.vue

@@ -187,7 +187,7 @@
 						@click="
 							showEmotions = false
 							selectedEmotionColor = `neutralLightest`
-							selectedEmotion = { label: ``, light: null, dark: null }
+							selectedEmotion = null
 						"
 					>
 						<CloseIcon />
@@ -223,7 +223,7 @@
 							: (selectedEmotionColor === `positive` ||
 									selectedEmotionColor === `neutral` ||
 									selectedEmotionColor === `negative`) &&
-							  selectedEmotion.label !== ``
+							  selectedEmotion
 							? `border p-2 bg-` + selectedEmotionColor
 							: `p-2 bg-lightBG dark:bg-darkBG`
 					"
@@ -236,7 +236,7 @@
 							<!-- Front side: Type comment -->
 							<div v-show="!showEmotions" class="flex w-full bg-lightBG dark:bg-darkBG">
 								<button class="focus:outline-none h-auto flex-shrink-0" @click="toggleShowEmotions">
-									<span v-if="activeEmotion.label !== ``">
+									<span v-if="activeEmotion">
 										<img
 											:src="$colorMode.dark ? activeEmotion.dark : activeEmotion.light"
 											:alt="activeEmotion.label"
@@ -274,8 +274,8 @@
 									<button
 										class="bg-primary focus:outline-none block rounded-lg lg:hidden"
 										style="margin-right: 15.2px; margin-bottom: 12px"
-										:disabled="comment === '' && activeEmotion.label === ''"
-										:class="comment !== '' && activeEmotion.label !== '' ? '' : 'opacity-50 cursor-not-allowed'"
+										:disabled="comment === '' && !activeEmotion"
+										:class="comment !== '' && activeEmotion ? '' : 'opacity-50 cursor-not-allowed'"
 										@click="sendComment"
 									>
 										<SendIcon class="m-2 mb-3 ml-3 h-5 w-5 text-white transform rotate-45" />
@@ -286,8 +286,8 @@
 										class="hidden lg:block"
 										:action="sendComment"
 										:thin="true"
-										:disabled="comment === '' && activeEmotion.label === ''"
-										:class="comment !== '' && activeEmotion.label !== '' ? '' : 'opacity-50 cursor-not-allowed'"
+										:disabled="comment === '' && !activeEmotion"
+										:class="comment !== '' && activeEmotion ? '' : 'opacity-50 cursor-not-allowed'"
 									/>
 								</span>
 							</div>
@@ -323,7 +323,7 @@
 											:key="face.label"
 											class="focus:outline-none outline-none rounded-lg border-2"
 											:class="
-												selectedEmotion.label === face.label ? `border-` + selectedEmotionColor : `border-transparent`
+												selectedEmotion?.label === face.label ? `border-` + selectedEmotionColor : `border-transparent`
 											"
 											style="transition: all 0.3s ease-in-out"
 											@click="setEmotion($event, face)"
@@ -337,7 +337,7 @@
 											<p
 												class="capitalize lg:hidden mt-1"
 												:class="
-													selectedEmotion.label === face.label
+													selectedEmotion?.label === face.label
 														? `font-bold text-` + selectedEmotionColor
 														: `text-gray7 dark:text-gray3`
 												"
@@ -353,7 +353,7 @@
 											<button
 												class="focus:outline-none outline-none flex flex-grow items-center justify-center"
 												:class="
-													selectedEmotion.label === face.label
+													selectedEmotion?.label === face.label
 														? `font-bold text-` + selectedEmotionColor
 														: `text-gray7 dark:text-gray3`
 												"
@@ -436,8 +436,8 @@ import RepostIcon from '@/components/icons/Repost.vue'
 import QuoteIcon from '@/components/icons/Quote.vue'
 import Avatar from '@/components/Avatar.vue'
 
-import { feelings } from '@/config/config'
-import { faces, faceGroupings, IFace } from '@/config/faces'
+import { EmotionCategories, emotionCategories, Emotions } from '@/config/config'
+import { faces, faceGroupings, IFace, IFaceWithoutDefault } from '@/config/faces'
 import {
 	createComment,
 	sendComment,
@@ -458,12 +458,12 @@ interface FaceStat {
 interface IData {
 	faceGroupings: Array<[IFace, IFace, IFace]>
 	feelingList: { negative: Set<string>; positive: Set<string>; neutral: Set<string> }
-	activeEmotion: IFace
-	selectedEmotion: IFace
+	activeEmotion: IFaceWithoutDefault | null
+	selectedEmotion: IFaceWithoutDefault | null
 	comments: ICommentData[]
 	avatar: string
 	comment: string
-	emotion: string
+	emotion: Emotions | null
 	showEmotions: boolean
 	filter: string
 	showDropdown: boolean
@@ -476,7 +476,7 @@ interface IData {
 	userIsFollowed: boolean
 	faceStats: FaceStat[]
 	page: number
-	selectedEmotionColor: `positive` | `neutral` | `negative` | `neutralLightest`
+	selectedEmotionColor: EmotionCategories | `neutralLightest`
 	sendingComment: boolean
 	currentCommentsOffset: number
 	commentsLimit: number
@@ -525,13 +525,13 @@ export default Vue.extend({
 	data(): IData {
 		return {
 			faceGroupings,
-			feelingList: feelings,
+			feelingList: emotionCategories,
 			avatar: ``,
-			activeEmotion: { label: ``, light: null, dark: null },
-			selectedEmotion: { label: ``, light: null, dark: null },
+			activeEmotion: null,
+			selectedEmotion: null,
 			comment: ``,
 			comments: [],
-			emotion: ``,
+			emotion: null,
 			showEmotions: false,
 			filter: ``,
 			showDropdown: false,
@@ -555,7 +555,7 @@ export default Vue.extend({
 				positive: 0,
 				neutral: 0,
 				negative: 0,
-				faceStats: {},
+				faceStats: null,
 			},
 		}
 	},
@@ -608,7 +608,7 @@ export default Vue.extend({
 					continue
 				}
 				const f = faces[face]
-				stats[f.label] = { face: f, count: faceStats[face] }
+				stats[f.label] = { face: f, count: faceStats[face as Emotions] }
 			}
 			this.faceStats = sortBy(Object.values(stats), `count`)
 		},
@@ -631,34 +631,34 @@ export default Vue.extend({
 			this.addScrollHandler()
 			this.filterComments()
 		},
-		setEmotion(e: PointerEvent, r: { label: string; light: any; dark: any }) {
+		setEmotion(e: PointerEvent, r: IFaceWithoutDefault) {
 			if (!e.target) {
 				return
 			}
 			const target = e.target as HTMLElement
 			target.scrollIntoView({ behavior: `smooth`, block: `center` })
 			this.selectedEmotion = r
-			if (feelings.positive.has(r.label)) {
+			if (emotionCategories.positive.has(r.label)) {
 				this.selectedEmotionColor = `positive`
 				return
 			}
-			if (feelings.negative.has(r.label)) {
+			if (emotionCategories.negative.has(r.label)) {
 				this.selectedEmotionColor = `negative`
 				return
 			}
 
 			this.selectedEmotionColor = `neutral`
 		},
 		confirmEmotion() {
-			if (this.selectedEmotion.label === ``) {
+			if (!this.selectedEmotion) {
 				this.$toastWarning(`No face selected!`)
 				return
 			}
 			this.activeEmotion = this.selectedEmotion
 			this.showEmotions = false
 		},
 		async sendComment() {
-			if (this.activeEmotion.label === ``) {
+			if (!this.activeEmotion) {
 				this.$toastError(`You must select a reaction before posting`)
 				return
 			}
@@ -679,9 +679,9 @@ export default Vue.extend({
 				const _id = await sendComment(c, `comment`)
 				this.comments.unshift({ _id, ...c })
 				this.comment = ``
-				this.selectedEmotion = { label: ``, light: null, dark: null }
-				this.activeEmotion = { label: ``, light: null, dark: null }
-				this.emotion = ``
+				this.selectedEmotion = null
+				this.activeEmotion = null
+				this.emotion = null
 				this.filter = ``
 				this.selectedEmotionColor = `neutralLightest`
 				this.updateCommentsStats()
@@ -716,7 +716,7 @@ export default Vue.extend({
 						this.postCID,
 						this.currentCommentsOffset,
 						this.commentsLimit,
-						this.filter.charAt(0).toLowerCase() + this.filter.replace(/\s/g, ``).substring(1),
+						(this.filter.charAt(0).toLowerCase() + this.filter.replace(/\s/g, ``).substring(1)) as Emotions,
 					)
 				}
 			} catch (err) {
@@ -732,11 +732,11 @@ export default Vue.extend({
 				}
 			}
 		},
-		getStyle(emotionType: string): string {
-			if (feelings.positive.has(emotionType)) {
+		getStyle(emotionType: Emotions): string {
+			if (emotionCategories.positive.has(emotionType)) {
 				return `positive`
 			}
-			if (feelings.negative.has(emotionType)) {
+			if (emotionCategories.negative.has(emotionType)) {
 				return `negative`
 			}
 

src/components/post/Comment.vue

@@ -186,7 +186,7 @@ import More from '@/components/icons/More.vue'
 import BinIcon from '@/components/icons/Bin.vue'
 
 import { createDefaultProfile, getProfile, Profile } from '@/backend/profile'
-import { feelings } from '@/config/config'
+import { emotionCategories, Emotions } from '@/config/config'
 import { faces, IFace } from '@/config/faces'
 import { createComment, getComment, getCommentsOfPost, ICommentData, sendComment } from '@/backend/comment'
 import { getPhotoFromIPFS } from '@/backend/getPhoto'
@@ -200,7 +200,7 @@ interface IData {
 	avatar: string
 	name: string
 	emotion: IFace
-	emotionType: string
+	emotionType: Emotions | null
 	content: string
 	showLabel: boolean
 	commentDeleted: boolean
@@ -237,7 +237,7 @@ export default Vue.extend({
 			avatar: ``,
 			name: ``,
 			emotion: faces.default,
-			emotionType: ``,
+			emotionType: null,
 			content: ``,
 			showLabel: false,
 			commentDeleted: false,
@@ -296,9 +296,12 @@ export default Vue.extend({
 			} else if (prefix === `bg-`) {
 				res = `background-color: `
 			}
-			if (feelings.positive.has(this.emotionType)) {
+			if (!this.emotionType) {
+				return (res += `#F0B785`)
+			}
+			if (emotionCategories.positive.has(this.emotionType)) {
 				res += `#1F7DAD`
-			} else if (feelings.negative.has(this.emotionType)) {
+			} else if (emotionCategories.negative.has(this.emotionType)) {
 				res += `#EE1F63`
 			} else {
 				res += `#F0B785`

src/components/post/CommentFilter.vue

@@ -75,13 +75,13 @@
 import Vue from 'vue'
 import ChevronUp from '@/components/icons/ChevronUp.vue'
 import ChevronDown from '@/components/icons/ChevronDown.vue'
-import { feelings } from '@/config/config'
+import { emotionCategories, EmotionCategories } from '@/config/config'
 import { faces, IFace } from '@/config/faces'
 
 interface IData {
 	reactionList: Record<string, IFace>
-	feelingList: { positive: Set<string>; negative: Set<string>; neutral: Set<string> }
-	feeling: `positive` | `negative` | `neutral`
+	feelingList: typeof emotionCategories
+	feeling: EmotionCategories
 	showFilter: boolean
 }
 
@@ -100,7 +100,7 @@ export default Vue.extend({
 	data(): IData {
 		return {
 			reactionList: faces,
-			feelingList: feelings,
+			feelingList: emotionCategories,
 			feeling: `positive`,
 			showFilter: false,
 		}
@@ -124,7 +124,7 @@ export default Vue.extend({
 				this.showFilter = true
 			}
 		},
-		setCommentFilterFeeling(feeling: `positive` | `negative` | `neutral`) {
+		setCommentFilterFeeling(feeling: EmotionCategories) {
 			this.feeling = feeling
 			this.$emit(`clicked`, feeling)
 			this.showFilter = true