Skip to content

feat: added who To Follow #309

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
AliAlaa88 merged 1 commit into from
Dec 15, 2025
Merged

feat: added who To Follow #309

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 24 additions & 7 deletions app/modules/auth/components/CompleteAccount.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,17 @@
<Interests
v-if="showInterests"
v-model:selectedInterests="profileData.interests"
@finish="onInterestsFinish"
@next="onInterestsNext"
@skip="onInterestsSkip"
@back="onInterestsBack"
@close="onClose"
/>
<WhoToFollow
v-if="showWhoToFollow"
@finish="onWhoToFollowFinish"
@back="onWhoToFollowBack"
@close="onClose"
/>
<!-- Loading screen while fetching user data -->
<div
v-if="showLoading"
Expand All @@ -47,6 +53,7 @@ import ProfilePicture from './subComponents/CompleteAccountComponents/ProfilePic
import Username from './subComponents/CompleteAccountComponents/Username.vue'
import Language from './subComponents/CompleteAccountComponents/Language.vue'
import Interests from './subComponents/CompleteAccountComponents/Interests.vue'
import WhoToFollow from './subComponents/CompleteAccountComponents/WhoToFollow.vue'
import Logo from '~/modules/Common/components/Logo'
import { useRouter } from 'vue-router'
import { useGetUserQuery } from '../queries/useGetuserQuery'
Expand All @@ -57,6 +64,7 @@ const showProfilePicture = ref(false)
const showUsername = ref(false)
const showLanguage = ref(false)
const showInterests = ref(false)
const showWhoToFollow = ref(false)
const showLoading = ref(false)
const enableUserQuery = ref(false)
import { useI18n } from 'vue-i18n'
Expand Down Expand Up @@ -165,26 +173,35 @@ const getUserQuery = useGetUserQuery(
)

// Interests handlers
const onInterestsFinish = (interests: string[]) => {
const onInterestsNext = (interests: string[]) => {
profileData.interests = interests
showInterests.value = false
showLoading.value = true

enableUserQuery.value = true
showWhoToFollow.value = true
}

const onInterestsSkip = () => {
profileData.interests = []
showInterests.value = false
showLoading.value = true
enableUserQuery.value = true
showWhoToFollow.value = true
}

const onInterestsBack = () => {
showInterests.value = false
showLanguage.value = true
}

// Who to Follow handlers
const onWhoToFollowFinish = (followedUsers: string[]) => {
showWhoToFollow.value = false
showLoading.value = true
enableUserQuery.value = true
}

const onWhoToFollowBack = () => {
showWhoToFollow.value = false
showInterests.value = true
}

const onClose = () => {
router.push('/')
}
Expand Down
97 changes: 49 additions & 48 deletions app/modules/auth/components/subComponents/CompleteAccountComponents/Interests.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,33 +3,39 @@
:isOpen="true"
@close="$emit('close')"
:hasCloseButton="false"
contentClass="sm:max-w-xl w-full"
contentClass="sm:max-w-2xl w-full"
:headerClass="isArabic ? 'absolute top-4 right-4 z-10 bg-transparent p-0' : 'absolute top-4 left-4 z-10 bg-transparent p-0'"
slotClass="py-2 px-10 sm:px-10 md:px-12 lg:px-14"
slotClass="pt-4 px-8 pb-8 sm:pt-6 sm:px-10 sm:pb-10"
@back="$emit('back')"
:hasBackButton="true"
>
<!-- Back Button -->

<!-- Logo -->
<Logo imgClass="relative z-10 w-8 lg:w-10 mb-6" div-class="flex justify-center mb-6" />
<!-- Logo at top -->
<div class="flex justify-center mb-6">
<Logo imgClass="w-8 lg:w-10" />
</div>

<!-- Title -->
<h2 class="text-3xl font-bold mb-6" :class="isArabic ? 'text-right' : 'text-left'">{{ $t('auth.interests.title') }}</h2>
<p class="text-muted mb-6">{{ $t('auth.interests.info') }}</p>
<h2 class="text-2xl font-bold mb-2" :class="isArabic ? 'text-right' : 'text-left'">{{ $t('auth.interests.title') }}</h2>
<p class="text-muted text-sm mb-6" :class="isArabic ? 'text-right' : 'text-left'">{{ $t('auth.interests.info') }}</p>

<!-- Error Message -->
<div v-if="errorMessage" class="bg-red-500/10 border border-red-500 text-red-500 px-4 py-3 rounded-lg mb-4">
{{ errorMessage }}
</div>

<!-- Interests Grid -->
<div class="max-h-64 overflow-y-auto mb-6 custom-scrollbar">
<div class="grid grid-cols-2 gap-3">
<div class="max-h-80 overflow-y-auto mb-4 custom-scrollbar">
<div class="grid grid-cols-3 gap-3">
<button
v-for="interest in interests"
:key="interest.id"
:id="`button-interest-${interest.id}`"
:class="[
'px-4 py-3 rounded-full text-sm font-medium transition shadow-sm',
'aspect-square rounded-xl text-sm font-medium transition border flex items-end p-4',
selectedInterests.includes(interest.id)
? 'bg-alternate text-alternate border border-transparent'
: 'border border-primary text-primary hover:bg-hover',
? 'bg-alternate text-alternate border-alternate'
: 'border-primary text-primary hover:border-blue hover:text-blue',
isArabic ? 'justify-end text-right' : 'justify-start text-left'
]"
@click="toggleInterest(interest.id)"
>
Expand All @@ -38,39 +44,30 @@
</div>
</div>

<!-- Selection Counter -->
<p class="text-center text-muted text-sm mb-6">
{{ selectedInterests.length }} {{ $t('auth.common.selectedSuffix') }}
<span v-if="selectedInterests.length < 3" class="text-red-400">
({{ 3 - selectedInterests.length }} {{ $t('auth.common.neededMoreSuffix') }})
</span>
</p>

<!-- Next Button -->
<Button
id="button-next-interests"
:disabled="selectedInterests.length < 3"
buttonClass="w-full font-semibold rounded-full py-2 transition mb-3"
:class="[
selectedInterests.length >= 3
? 'bg-alternate hover:bg-hover-alternate text-alternate'
: 'bg-alternate text-alternate',
]"
:loading-text="$t('auth.common.loading')"
:is-loading="loading"
@click="onNext"
>
{{ $t('auth.common.next') }}
</Button>

<!-- Skip Button -->
<Button
id="button-skip-interests"
class="w-full text-primary hover:text-blue transition duration-200"
@click="onSkip"
>
{{ $t('auth.common.skip') }}
</Button>
<!-- Footer with selection counter and next button -->
<div class="flex items-center justify-between mt-6 pt-4 border-t border-primary">
<!-- Selection Counter -->
<p class="text-muted text-sm">
{{ selectedInterests.length }} {{ $t('auth.interests.selected') || 'of 1 selected' }}
</p>

<!-- Next Button -->
<Button
id="button-next-interests"
:disabled="selectedInterests.length < 1"
buttonClass="px-8 py-2 font-semibold rounded-full transition"
:class="[
selectedInterests.length >= 1
? 'bg-alternate hover:bg-hover-alternate text-alternate'
: 'bg-muted text-muted opacity-50 cursor-not-allowed',
]"
:loading-text="$t('auth.common.loading')"
:is-loading="loading"
@click="onNext"
>
{{ $t('auth.common.next') }}
</Button>
</div>
</Popup>
</template>

Expand Down Expand Up @@ -132,10 +129,11 @@ const toggleInterest = (id: string) => {

const interestsMutation = useUpdateInterestsMutation(
(data) => {
console.log('Interests update success:', data)
isSubmitting.value = false
loading.value = false
errorMessage.value = ''
emit('finish', selectedInterests.value)
emit('next', selectedInterests.value)
},
(error) => {
console.error('Interests update error:', error)
Expand All @@ -147,11 +145,14 @@ const interestsMutation = useUpdateInterestsMutation(
)

const onNext = () => {
if (selectedInterests.value.length >= 3 && !isSubmitting.value) {
if (selectedInterests.value.length >= 1 && !isSubmitting.value) {
console.log('Submitting interests:', selectedInterests.value)
isSubmitting.value = true
loading.value = true
errorMessage.value = '' // Clear previous errors
// categoryIds are the selected interest ids
const categoryIds = selectedInterests.value.map(id => parseInt(id))
console.log('Category IDs:', categoryIds)
interestsMutation.mutate({ categoryIds })
}
}
Expand Down
86 changes: 47 additions & 39 deletions app/modules/auth/components/subComponents/CompleteAccountComponents/Language.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,74 +7,73 @@
:hasBackButton="true"
contentClass="max-w-lg sm:max-w-xl w-full"
headerClass=""
slotClass="p-8 sm:p-10 md:p-14 lg:p-20"
slotClass="pt-4 px-8 pb-8 sm:pt-6 sm:px-10 sm:pb-10"
>
<!-- Back Button -->

<!-- Logo -->
<Logo imgClass="relative z-10 w-8 lg:w-10 mb-6" div-class="flex justify-center mb-6" />
<!-- Logo at top -->
<div class="flex justify-center mb-6">
<Logo imgClass="w-8 lg:w-10" />
</div>

<!-- Title -->
<h2 class="text-3xl font-bold mb-6" :class="isArabic ? 'text-right' : 'text-left'">
<h2 class="text-2xl font-bold mb-2" :class="isArabic ? 'text-right' : 'text-left'">
{{ $t('auth.language.title') }}
</h2>
<p class="text-muted mb-6">{{ $t('auth.language.info') }}</p>
<p class="text-muted text-sm mb-6" :class="isArabic ? 'text-right' : 'text-left'">{{ $t('auth.language.info') }}</p>

<!-- Language List -->
<div class="mb-6">
<button
v-for="lang in languages"
<div
v-for="lang in displayedLanguages"
:key="lang.code"
:id="`button-language-${lang.code}`"
:class="[
'w-full text-left px-4 py-3 rounded-lg transition duration-200 flex items-center justify-between',
selectedLanguage === lang.code
? 'bg-alternate text-alternate'
: 'text-primary hover:bg-hover',
]"
class="flex items-center justify-between py-4 border-b border-primary cursor-pointer"
@click="selectLanguage(lang.code)"
>
<span>{{ lang.name }} ({{ lang.nativeName }})</span>
<svg
v-if="selectedLanguage === lang.code"
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
<span class="text-primary">{{ lang.nativeName }} - {{ lang.name }}</span>
<div
class="w-5 h-5 border-2 rounded flex items-center justify-center transition"
:class="selectedLanguage === lang.code ? 'bg-blue border-blue' : 'border-muted'"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
/>
</svg>
<svg
v-if="selectedLanguage === lang.code"
class="w-3 h-3 text-white"
fill="currentColor"
viewBox="0 0 20 20"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
/>
</svg>
</div>
</div>
<!-- Show More button -->
<button
v-if="!showAllLanguages && languages.length > languagesToShow"
@click="showAllLanguages = true"
class="mt-4 text-blue hover:text-blue-light transition duration-200 text-sm w-full text-center"
>
{{ $t('auth.language.showMore') || 'Show more' }}
</button>
</div>

<!-- Next Button -->
<Button
id="button-next-language"
:disabled="!selectedLanguage"
buttonClass="w-full font-semibold rounded-full py-2 transition mb-3"
buttonClass="w-full font-semibold rounded-full py-3 transition"
:class="[
selectedLanguage
? 'bg-alternate hover:bg-hover-alternate text-alternate'
: 'bg-alternate text-alternate',
: 'bg-muted text-muted opacity-50 cursor-not-allowed',
]"
:loading-text="$t('auth.common.loading')"
:is-loading="loading"
@click="onNext"
>
{{ $t('auth.common.next') }}
</Button>

<!-- Skip Button -->
<Button
id="button-skip-language"
class="w-full text-primary hover:text-blue transition duration-200"
@click="onSkip"
>
{{ $t('auth.common.skip') }}
</Button>
</Popup>
</template>

Expand All @@ -94,6 +93,8 @@ const isArabic = computed(() => locale.value === 'ar')
const errorMessage = ref('')
const isSubmitting = ref(false)
const loading = ref(false)
const showAllLanguages = ref(false)
const languagesToShow = 2

interface Language {
code: string
Expand All @@ -102,10 +103,17 @@ interface Language {
}

const languages: Language[] = [
{ code: 'en', name: 'English', nativeName: 'English' },
{ code: 'ar', name: 'Arabic', nativeName: 'العربية' },
{ code: 'en', name: 'English', nativeName: 'English' },
]

const displayedLanguages = computed(() => {
if (showAllLanguages.value) {
return languages
}
return languages.slice(0, languagesToShow)
})

// Use v-model for selected language
const selectedLanguage = defineModel<string | null>('selectedLanguage', { default: null })

Expand Down
12 changes: 7 additions & 5 deletions app/modules/auth/components/subComponents/CompleteAccountComponents/ProfilePicture.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,16 +9,18 @@
? 'absolute top-4 right-4 z-10 bg-transparent p-0'
: 'absolute top-4 left-4 z-10 bg-transparent p-0'
"
slotClass="p-8 sm:p-10 md:p-14 lg:p-20"
slotClass="pt-4 px-8 pb-8 sm:pt-6 sm:px-10 sm:pb-10"
>
<!-- Logo -->
<Logo imgClass="relative z-10 w-8 lg:w-10 mb-6" div-class="flex justify-center mb-6" />
<!-- Logo at top -->
<div class="flex justify-center mb-6">
<Logo imgClass="w-8 lg:w-10" />
</div>

<!-- Title -->
<h2 class="text-3xl font-bold mb-6" :class="isArabic ? 'text-right' : 'text-left'">
<h2 class="text-2xl font-bold mb-2" :class="isArabic ? 'text-right' : 'text-left'">
{{ $t('auth.profilePicture.title') }}
</h2>
<p class="text-muted mb-6" :class="isArabic ? 'text-right' : 'text-left'">
<p class="text-muted text-sm mb-6" :class="isArabic ? 'text-right' : 'text-left'">
{{ $t('auth.profilePicture.info') }}
</p>

Expand Down
Loading
Loading