Skip to content

Commit

Permalink
fix: ssr errors (#379)
Browse files Browse the repository at this point in the history 
* fix: invalid prop type check failed

* prevent ssr memory leak on setInterval

* remove unused import

* fix: hydration error

* wip
  • Loading branch information
@andreiio
andreiio authored Jun 24, 2024
1 parent d7562f1 commit 652e92a
Show file tree
Hide file tree
Showing 13 changed files with 242 additions and 329 deletions.
3 changes: 2 additions & 1 deletion app/Http/Controllers/Dashboard/DonationController.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,8 @@ public function index(Request $request): Response
$dates = $donations
->pluck('created_at')
->map(fn ($date) => $date->format('Y-m'))
->unique();
->unique()
->values();

return Inertia::render('AdminOng/Donations/Index', [
'filter' => $request->query('filter'),
Expand Down
8 changes: 2 additions & 6 deletions resources/js/Components/Footer.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
<div class="md:grid md:grid-cols-2 md:gap-4">
<div>
<h3 class="text-sm font-semibold leading-5 text-gray-400">{{ $t('util_links') }}</h3>
<ul role="list" class="mt-6 space-y-4">
<ul class="mt-6 space-y-4">
<li>
<Link
:href="route('page', { slug: 'about' })"
Expand Down Expand Up @@ -58,7 +58,7 @@
<div class="md:grid md:grid-cols-2 md:gap-4">
<div>
<h3 class="text-sm font-semibold leading-5 text-gray-400" v-text="$t('navigate')" />
<ul role="list" class="mt-6 space-y-4">
<ul class="mt-6 space-y-4">
<li>
<Link
:href="route('login')"
Expand Down Expand Up @@ -108,10 +108,6 @@
<Icon name="social/facebook" class="w-6 h-6" />
</a>

<!-- <a href="#" class="text-gray-500 hover:text-gray-400">-->
<!-- <Icon name="social/instagram" class="w-6 h-6" />-->
<!-- </a>-->

<a
href="https://github.com/code4romania/bursa-binelui"
class="text-gray-500 hover:text-gray-400"
Expand Down
66 changes: 0 additions & 66 deletions resources/js/Components/LanguageSwitcher.vue
View file

This file was deleted.

140 changes: 63 additions & 77 deletions resources/js/Components/Navbar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
</Link>

<!-- Desktop main links -->
<div class="hidden lg:flex lg:items-center sm:space-x-4 xl:space-x-8">
<div class="items-center hidden lg:flex gap-x-4 lg:gap-x-8 xl:gap-x-12">
<!-- Explore menu -->
<FlyoutMenu :name="$t('explore_navbar_menu')" :links="explore" />

Expand Down Expand Up @@ -66,13 +66,15 @@
>
{{ $t('my_donations') }}
</NavLink>

<NavLink
v-if="['admin', 'manager'].includes($page.props.auth.user.role)"
class="w-full px-3 py-2 text-base"
:href="route('dashboard.main')"
:active="route().current('dashboard.main')"
v-text="$t('administrate_link')"
/>
>
{{ $t('administrate_link') }}
</NavLink>

<!-- Account settings -->
<NavLink
Expand Down Expand Up @@ -111,8 +113,6 @@
{{ $t('register_link') }}
</Link>
</template>

<LanguageSwitcher />
</div>

<DisclosureButton
Expand Down Expand Up @@ -212,82 +212,68 @@
{{ $t('register_link') }}
</NavLink>
</div>

<LanguageSwitcher class="py-2" />
</div>
</DisclosurePanel>
</Disclosure>
</template>

<script setup>
import { computed } from 'vue';
import { usePage } from '@inertiajs/vue3';
import route from '@/Helpers/useRoute';
import { Disclosure, DisclosureButton, DisclosurePanel, Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue';
import { MenuIcon, XIcon } from '@heroicons/vue/outline';
import { UserCircleIcon } from '@heroicons/vue/solid';
import Icon from '@/Components/Icon.vue';
import NavLink from '@/Components/links/NavLink.vue';
import FlyoutMenu from '@/Components/dropdowns/FlyoutMenu.vue';
import LanguageSwitcher from '@/Components/LanguageSwitcher.vue';
/** Explore menu links. */
const explore = [
{
name: 'Proiecte',
description: 'Descoperă proiectele înscrise la Bursa Binelui și susține proiectul pe care îl îndrăgești.',
href: route('projects.index'),
},
{
name: 'Organizații',
description: 'Descoperă toate organizațiile înscrise pe Bursa Binelui și alege cauza pe care vrei să o susții.',
href: route('organizations.index'),
},
{
name: 'BCR pentru comunitate',
description: 'Descoperă proiectele organizate de BCR.',
href: route('bcr.index'),
},
// {
// name: 'Campionatul de Bine',
// description: 'O competiție a faptelor bune. Alătură-te!',
// href: route('championship'),
// },
// {
// name: 'Gale bursa binelui',
// description: 'Proiectele cu cel mai mare impact, pe regiuni. Vezi participanții!',
// href: route('regional'),
// },
];
/** About menu links. */
const about = [
{
name: 'Despre Bursa Binelui',
description:
'Află mai multe despre inițiativa noastră și cum poți să te alături, atât ca organizație, cât și ca donator sau voluntar.',
href: route('page', 'about'),
},
{
name: 'Evolutia faptelor bune',
description: 'Vezi evoluția faptelor bune pe Bursa Binelui în timp, cu ajutorul unor grafice.',
href: route('evolution'),
},
{
name: 'Întrebări frecvente',
description: 'Ai o neclaritate? Găsește răspunsul aici.',
href: route('page', 'faqs'),
},
];
const page = usePage();
const languages = computed(() =>
page.props.locales.available.map((locale) => ({
name: locale,
id: locale,
}))
);
import { computed } from 'vue';
import route from '@/Helpers/useRoute';
import { Disclosure, DisclosureButton, DisclosurePanel, Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue';
import { MenuIcon, XIcon, UserCircleIcon } from '@heroicons/vue/solid';
import Icon from '@/Components/Icon.vue';
import NavLink from '@/Components/links/NavLink.vue';
import FlyoutMenu from '@/Components/dropdowns/FlyoutMenu.vue';
/** Explore menu links. */
const explore = computed(() => [
{
name: 'Proiecte',
description: 'Descoperă proiectele înscrise la Bursa Binelui și susține proiectul pe care îl îndrăgești.',
href: route('projects.index'),
},
{
name: 'Organizații',
description: 'Descoperă toate organizațiile înscrise pe Bursa Binelui și alege cauza pe care vrei să o susții.',
href: route('organizations.index'),
},
{
name: 'BCR pentru comunitate',
description: 'Descoperă proiectele organizate de BCR.',
href: route('bcr.index'),
},
// {
// name: 'Campionatul de Bine',
// description: 'O competiție a faptelor bune. Alătură-te!',
// href: route('championship'),
// },
// {
// name: 'Gale bursa binelui',
// description: 'Proiectele cu cel mai mare impact, pe regiuni. Vezi participanții!',
// href: route('regional'),
// },
]);
/** About menu links. */
const about = computed(() => [
{
name: 'Despre Bursa Binelui',
description:
'Află mai multe despre inițiativa noastră și cum poți să te alături, atât ca organizație, cât și ca donator sau voluntar.',
href: route('page', 'about'),
},
{
name: 'Evolutia faptelor bune',
description: 'Vezi evoluția faptelor bune pe Bursa Binelui în timp, cu ajutorul unor grafice.',
href: route('evolution'),
},
{
name: 'Întrebări frecvente',
description: 'Ai o neclaritate? Găsește răspunsul aici.',
href: route('page', 'faqs'),
},
]);
</script>
6 changes: 3 additions & 3 deletions resources/js/Components/PontBanner.vue
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<template>
<div class="bg-primary-300">
<div class="container flex items-center py-3 text-white">
<span class="">Partener de implementare</span>
<Icon class="inline-block max-w-24 max-h-6 ms-2" name="pont" />
<div class="container flex items-center gap-2 py-3 text-white">
<span>Partener de implementare</span>
<Icon class="inline-block max-w-24 max-h-6" name="pont" />
</div>
</div>
</template>
Expand Down
68 changes: 28 additions & 40 deletions resources/js/Components/dropdowns/FlyoutMenu.vue
View file
Original file line number Diff line number Diff line change
@@ -1,49 +1,46 @@
<template>
<Popover class="relative">
<PopoverButton
:class="[
'flex w-full lg:w-auto justify-between p-3 lg:p-0 lg:inline-flex items-center text-base font-medium leading-5 focus:outline-none',
`${
setActive(route().current())
? 'bg-primary-50 lg:bg-transparent text-primary-500 lg:hover:text-primary-400'
: 'text-gray-500 lg:hover:text-primary-500'
}`,
]"
class="flex items-center justify-between w-full p-3 text-base font-medium leading-5 lg:w-auto lg:p-0 lg:inline-flex focus:outline-none gap-x-1"
:class="{
'bg-primary-50 lg:bg-transparent text-primary-500 lg:hover:text-primary-400': isActive,
'text-gray-500 lg:hover:text-primary-500': !isActive,
}"
>
{{ name }}
<span v-text="name" />
<ChevronDownIcon class="w-5 h-5" aria-hidden="true" />
</PopoverButton>

<transition
enter-active-class="transition duration-200 ease-out"
enter-from-class="translate-y-1 opacity-0"
enter-to-class="translate-y-0 opacity-100"
leave-active-class="transition duration-150 ease-in"
leave-from-class="translate-y-0 opacity-100"
leave-to-class="translate-y-1 opacity-0"
<TransitionRoot
enter="transition duration-200 ease-out"
enter-from="translate-y-1 opacity-0"
enter-to="translate-y-0 opacity-100"
leave="transition duration-150 ease-in"
leave-from="translate-y-0 opacity-100"
leave-to="translate-y-1 opacity-0"
>
<PopoverPanel class="absolute z-50 flex w-screen px-4 -translate-x-1/2 left-1/2 lg:mt-5 max-w-max">
<PopoverPanel class="absolute z-50 flex px-4 -translate-x-1/2 left-1/2 lg:mt-5">
<div
class="grid flex-auto w-screen max-w-sm gap-1 p-4 text-sm leading-6 bg-white shadow-lg rounded-3xl ring-1 ring-gray-900/5"
class="grid flex-auto w-screen max-w-sm p-4 text-sm leading-6 bg-white rounded-lg drop-shadow ring-1 ring-gray-200"
>
<div v-for="link in links" :key="link.name" class="relative">
<NavLink
:href="link.href"
class="flex-col items-start justify-start block w-full gap-1 p-4 rounded-lg hover:bg-gray-50"
>
<p class="block w-full text-base font-medium text-left text-gray-900">{{ link.name }}</p>
<p v-if="link.description" class="text-sm text-gray-500" v-text="link.description" />
</NavLink>
</div>
<NavLink
v-for="(link, index) in links"
:key="index"
:href="link.href"
class="flex-col items-start justify-start block w-full gap-1 p-4 rounded-lg hover:bg-gray-50"
>
<p class="font-semibold text-gray-900" v-text="link.name" />
<p v-if="link.description" class="text-sm text-gray-600" v-text="link.description" />
</NavLink>
</div>
</PopoverPanel>
</transition>
</TransitionRoot>
</Popover>
</template>

<script setup>
/** Import plugins. */
import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue';
import { computed } from 'vue';
import { Popover, PopoverButton, PopoverPanel, TransitionRoot } from '@headlessui/vue';
import { ChevronDownIcon } from '@heroicons/vue/solid';
import route from '@/Helpers/useRoute';
Expand All @@ -56,14 +53,5 @@
links: Array,
});
/**
* Determines if a navigation item should be active based on the current route.
*
* @param {Object} item The navigation item to check.
*
* @returns {Boolean} Whether or not the navigation item should be active.
*/
const setActive = (currentRoute) => {
return props.links.some((link) => route().current(link.href));
};
const isActive = computed(() => props.links.some((link) => route().current(link.href)));
</script>
Loading

0 comments on commit 652e92a

Please sign in to comment.