Skip to content

Commit

Permalink
Merge branch 'develop' into feature/chat
Browse files Browse the repository at this point in the history
  • Loading branch information
@CyrilKymYE
CyrilKymYE committed Oct 29, 2023
2 parents ef4ce09 + a309444 commit 90b8362
Show file tree
Hide file tree
Showing 11 changed files with 300 additions and 84 deletions.
6 changes: 4 additions & 2 deletions packages/backend/src/main.ts
View file
Expand Up @@ -20,19 +20,21 @@ async function bootstrap() {
'http://localhost:8080',
'https://hay-baselhack-dev.vercel.app',
'https://hay-baselhack.vercel.app',
'https://baselhack-proxy.vercel.app',
],
methods: 'GET,HEAD,PUT,PATCH,POST,DELETE,OPTIONS',
allowedHeaders: 'Content-Type, Accept',
credentials: true,
});

const options = new DocumentBuilder()
.setTitle('HAY PI')
.setTitle('HAY API')
.setDescription('HAY API documentation')
.setVersion('1.0')
.addServer('http://localhost:3000/', 'Local environment')
.addServer('https://hay-backend-dev.vercel.app', 'Develpment')
.addServer('https://hay-backend.vercel.app/', 'Production')
// .addServer('https://hay-backend.vercel.app/', 'Production')
.addServer('https://baselhack-proxy.vercel.app/', 'Production')
.build();

const document = SwaggerModule.createDocument(app, options);
Expand Down
46 changes: 33 additions & 13 deletions packages/frontend/src/components/ui/header/Header.vue
View file
Expand Up @@ -3,40 +3,60 @@ import { useRouter } from 'vue-router'
import { ref, watch } from 'vue'
import {
ArrowSmallLeftIcon,
ArrowLeftOnRectangleIcon
ArrowLeftOnRectangleIcon
} from '@heroicons/vue/24/outline'
import axios from "axios";
import axios from 'axios'
const router = useRouter()
const pageName = ref()
watch(router.currentRoute, () => {
pageName.value = [
router.currentRoute.value.name,
router.currentRoute.value.params.id ?? ''
].join(' ')
watch(router.currentRoute, async () => {
pageName.value = /^\/circle/.test(router.currentRoute.value.path)
? (await getCircle()).name
: [
router.currentRoute.value.name,
router.currentRoute.value.params.id ?? ''
].join(' ')
})
const back = () => router.back();
const logout = () => {
axios.get(import.meta.env.VITE_BACKEND_HOST + '/user/logout').then(() => router.push('/login'));
const getCircle = async () => {
try {
const result = await axios.get(
`${import.meta.env.VITE_BACKEND_HOST}/circle/group/${
router.currentRoute.value.params.id
}`,
{
headers: {
'Content-Type': 'application/json'
},
withCredentials: true
}
)
return result.data
} catch (error) {}
}
const back = () => router.back()
const logout = () => {
axios
.get(import.meta.env.VITE_BACKEND_HOST + '/user/logout')
.then(() => router.push('/login'))
}
</script>

<template>
<header
class="shadow-top fixed flex z-50 w-full rounded-b-2xl border-2 border-white bg-white bg-opacity-70 p-4 text-center backdrop-blur-md"
class="shadow-top fixed z-50 flex w-full rounded-b-2xl border-2 border-white bg-white bg-opacity-70 p-4 text-center backdrop-blur-md"
>
<div class="w-1/5 flex align-center justify-center" @click="back">
<div class="align-center flex w-1/5 justify-center" @click="back">
<arrow-small-left-icon class="w-6"></arrow-small-left-icon>
</div>
<div class="w-3/5">
<h1 class="text-6 font-mentra">HAY</h1>
<h2 class="font-yeseva text-5">{{ pageName }}</h2>
</div>
<div class="w-1/5 flex align-center justify-center" @click="logout">
<div class="align-center flex w-1/5 justify-center" @click="logout">
<arrow-left-on-rectangle-icon class="w-6"></arrow-left-on-rectangle-icon>
</div>
</header>
Expand Down
134 changes: 98 additions & 36 deletions packages/frontend/src/components/ui/question-input/QuestionInput.vue
View file
@@ -1,75 +1,135 @@
<script setup lang="ts">
import { ref } from 'vue'
import router from '@/router'
import axios from 'axios'
const mood = ref('')
const color = ref('')
const mood = ref<{ title: string; color: string; value: string }>({
title: '',
value: '',
color: ''
})
const textareaValue = ref('')
const items: { title: string; color: string }[] = [
const items: { title: string; color: string; value: string }[] = [
{
title: 'Happy',
color: 'bg-happy'
color: 'bg-happy',
value: 'happy'
},
{
title: 'Surprised',
color: 'bg-surprised'
color: 'bg-surprised',
value: 'surprised'
},
{
title: 'Angry',
color: 'bg-angry'
color: 'bg-angry',
value: 'angry'
},
{
title: 'Sad',
color: 'bg-sad'
color: 'bg-sad',
value: 'sad'
},
{
title: 'Rejecting',
color: 'bg-rejecting'
color: 'bg-rejecting',
value: 'rejecting'
},
{
title: 'Scared',
color: 'bg-scared'
color: 'bg-scared',
value: 'scared'
}
]
function setMood(selectedMood: string, selectedColor: string) {
function setMood(selectedMood: {
title: string
color: string
value: string
}) {
mood.value = selectedMood
color.value = selectedColor
}
const postAnswer = async () => {
if (textareaValue.value.length > 0) {
try {
await axios.post(
`${import.meta.env.VITE_BACKEND_HOST}/circle/answer`,
{
answer: textareaValue.value,
userId: await getCurrentUserId(),
emotion: mood.value.value
},
{
headers: {
'Content-Type': 'application/json'
},
withCredentials: true
}
)
await router.push('innercircles')
} catch (error) {
console.log(error)
}
}
}
const getCurrentUserId = async () => {
try {
const result = await axios.get(
`${import.meta.env.VITE_BACKEND_HOST}/user/current`,
{
headers: {
'Content-Type': 'application/json'
},
withCredentials: true
}
)
return result.data
} catch (error) {}
}
</script>

<template>
<div class="flex h-fit w-full justify-center">
<div
class="font-poppins fixed bottom-0 mx-auto mb-[100px] flex h-fit w-11/12 justify-between rounded-full bg-white p-4 shadow-[0_3px_10px_rgb(0,0,0,0.2)]"
class="font-poppins fixed bottom-0 mx-auto mb-[100px] flex h-fit w-11/12 items-center justify-between gap-x-4 rounded-full bg-white px-4 shadow-[0_3px_10px_rgb(0,0,0,0.2)]"
>
<v-menu open-on-click location="top" class="h-fit w-fit">
<template v-slot:activator="{ props }">
<v-btn v-bind="props" style="box-shadow: none"
><svg
v-if="mood === '' && color === ''"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="h-6 w-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15.182 15.182a4.5 4.5 0 01-6.364 0M21 12a9 9 0 11-18 0 9 9 0 0118 0zM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75zm-.375 0h.008v.015h-.008V9.75zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75zm-.375 0h.008v.015h-.008V9.75z"
/>
</svg>
<div v-else :class="color + ' h-6 w-6 rounded-full'"></div>
<v-btn
v-bind="props"
style="box-shadow: none"
density="compact"
icon=""
>
<template v-slot:default>
<svg
v-if="mood.value === ''"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="h-6 w-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15.182 15.182a4.5 4.5 0 01-6.364 0M21 12a9 9 0 11-18 0 9 9 0 0118 0zM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75zm-.375 0h.008v.015h-.008V9.75zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75zm-.375 0h.008v.015h-.008V9.75z"
/>
</svg>
<div v-else :class="mood.color + ' h-6 w-6 rounded-full'"></div>
</template>
</v-btn>
</template>

<v-list>
<v-list-item class="p-0" v-for="(item, i) in items" :key="i"
><div
<v-list-item class="p-0" v-for="(item, i) in items" :key="i">
<div
class="flex min-w-[100px] items-center justify-between p-0"
@click="setMood(item.title, item.color)"
@click="setMood(item)"
>
<p>{{ item.title }}</p>
<div
Expand All @@ -80,11 +140,13 @@ function setMood(selectedMood: string, selectedColor: string) {
</v-list>
</v-menu>

<input
type="text"
class="w-4/5 appearance-none leading-5 focus:z-10 focus:outline-none sm:text-sm sm:leading-5"
<v-text-field
variant="underlined"
v-model="textareaValue"
label="Answer"
class="w-4/5"
/>
<button @click="router.push('/innercircles')">
<button @click="postAnswer">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
Expand Down
10 changes: 10 additions & 0 deletions packages/frontend/src/main.ts
View file
Expand Up @@ -9,6 +9,7 @@ import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import axios from "axios";

const vuetify = createVuetify({
components,
Expand All @@ -20,3 +21,12 @@ const app = createApp(App);
app.use(vuetify);
app.use(router);
app.mount('#app');

axios.interceptors.response.use((response) => {
return response
}, (error) => {
if (error.response.status === 403) {
router.push('/login');
}
return Promise.reject(error)
})
15 changes: 11 additions & 4 deletions packages/frontend/src/pages/Circle.vue
View file
Expand Up @@ -14,7 +14,14 @@ type Answer = {
username: string
answerId: number
answer: string
emotion: string
emotion:
| 'surprised'
| 'happy'
| 'scared'
| 'sad'
| 'angry'
| 'rejecting'
| undefined
}
const answers = ref<Answer[]>([])
Expand Down Expand Up @@ -92,10 +99,10 @@ const getAnswers = async () => {
)
answers.value.push({
userId: result.data.userId,
username: result.data.user.username,
username: user.username,
answer: result.data.answer,
answerId: result.data.answerId,
emotion: 'angry'
emotion: result.data.emotion
})
}
} catch (error) {}
Expand Down Expand Up @@ -132,7 +139,7 @@ const getCircle = async () => {
<CommunityCard
v-for="answer in answers"
:id="answer.answerId"
:title="answer.username + 's Answer'"
:title="answer.username + '\'s Answer'"
:content="answer.answer"
:variant="answer.emotion"
></CommunityCard>
Expand Down

0 comments on commit 90b8362

Please sign in to comment.