Skip to content

Commit

Permalink
✨ Implement episode order saving
Browse files Browse the repository at this point in the history
  • Loading branch information
Xen0Xys committed Oct 11, 2024
1 parent 4dd47c1 commit 1f7cabf
Show file tree
Hide file tree
Showing 2 changed files with 30 additions and 6 deletions.
17 changes: 11 additions & 6 deletions components/webtoons/episodes/EpisodeList.vue
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,20 @@ import EpisodeItem from "~/components/webtoons/episodes/EpisodeItem.vue";
import {Skeleton} from "~/components/ui/skeleton";
import EpisodeSkeleton from "~/components/webtoons/episodes/EpisodeSkeleton.vue";
import VisibilityObserver from "~/components/utils/VisibilityObserver.vue";
import {saveOrder} from "~/utils/storage";
useSeoMeta({
title: "OWR",
description: "Episodes page",
});
const id = useRoute().params.id as any as number;
const title = ref("");
const episodes = ref<any[]>([]);
const maxIndex = ref<number>(30);
const newFirst = ref<boolean>(true);
const order = ref<boolean>(getOrder(id));
const id = useRoute().params.id as any as number;
function loadEpisodes(){
const webtoonState: any = useState(`webtoon-${id}`);
Expand Down Expand Up @@ -45,11 +47,12 @@ function increaseMaxIndex(){
}
function toggleOrder(){
newFirst.value = !newFirst.value;
order.value = !order.value;
saveOrder(id, order.value);
}
const orderedEpisodes = computed(() => {
return newFirst.value ? episodes.value : [...episodes.value].reverse();
return order.value ? episodes.value : [...episodes.value].reverse();
});
onMounted(() => {
Expand All @@ -62,8 +65,10 @@ onMounted(() => {
<div class="h-full w-full md:w-3/4 lg:w-1/2 2xl:w-1/3 border-x-[1px]">
<div id="header" class="relative flex gap-4 py-4 px-10 justify-center items-center">
<Button variant="outline" class="absolute left-0 ml-4" @click="toggleOrder">
<Icon v-if="newFirst" name="iconoir:arrow-up"/>
<Icon v-else name="iconoir:arrow-down"/>
<ClientOnly>
<Icon v-if="order" name="iconoir:arrow-up"/>
<Icon v-else name="iconoir:arrow-down"/>
</ClientOnly>
</Button>
<h4 v-if="title">{{ title }}</h4>
<Skeleton v-else class="w-1/2 h-8"/>
Expand Down
19 changes: 19 additions & 0 deletions utils/storage.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@


export function saveOrder(webtoonId: number, order: boolean){
if(import.meta.server)
return;
localStorage.setItem("order", JSON.stringify({webtoonId, order}));
}

export function getOrder(webtoonId: number){
if(import.meta.server)
return;
const order = localStorage.getItem("order");
if(order){
const parsedOrder = JSON.parse(order);
if(parsedOrder.webtoonId === webtoonId)
return parsedOrder.order;
}
return true;
}

0 comments on commit 1f7cabf

Please sign in to comment.