Commit 364ae224 authored by erlendoeien's avatar erlendoeien
Browse files

Cleanup + Add redirect

parent 41db7ef2
......@@ -8,32 +8,27 @@ import { computed } from "vue";
export default function useFilteredMovies(
movies: Ref<IMovie[]>,
wishlist: Ref<IWishlist>,
wishlist: Ref<IWishlist>, //Ref<Record<string, number>[]>,
isWishlist: boolean
) {
//TODO: Implement loading state
const filteredMovies = ref<IMovie[]>();
const filteredMovies = ref<IMovie[]>(movies.value);
const listeners: IListeners = { wishlist: () => {} };
console.log(movies.value, wishlist.value);
// const { value: wishIds } = computed(() => Object.values(wishlist.value));
// const excWishlist = ({ id }: IMovie) => !wishIds.includes(id);
// const incWishlist = ({ id }: IMovie) => wishIds.includes(id);
// const includesId = (id: number) => wishlist.value.map((wish) => Object.values(wish)[0]).includes(id);
const includesId = (id: number) => Object.values(wishlist.value).includes(id);
const includesId = (id: number) => {
// if (Array.isArray(wishlist.value))
// return wishlist.value.map((wish) => Object.values(wish)[0]).includes(id);
return Object.values(wishlist.value).includes(id);
};
const excWishlist = ({ id }: IMovie) => !includesId(id);
const incWishlist = ({ id }: IMovie) => includesId(id);
// Object.values(wishlist.value).includes(id);
const filterMovies = () => {
console.log("wishlist", wishlist.value);
if (!wishlist.value || wishlist.value.length === 0) {
console.log("nothing to filter");
return;
return console.log("nothing to filter");
}
filteredMovies.value = movies.value.filter(
isWishlist ? incWishlist : excWishlist
);
......
......@@ -27,6 +27,6 @@ export default function useMovies() {
onMounted(fetchMovies);
onBeforeUnmount(() => unsubscibeListeners(listeners));
// watch(movies, () => console.log("movies", movies.value));
return { movies };
}
......@@ -33,24 +33,21 @@ export default function useWishlist() {
const fetchWishlist = () => {
listeners.wishlist = onValue(wishlistRef, (snapshot) => {
if (snapshot.exists()) {
// wishlist.value = Object.entries(snapshot.val()).map(([key, value]) => ({
// [key]: value as number,
// }));
wishlist.value = snapshot.val();
// wishlist.value = Object.values(snapshot.val());
console.log(`New wishlist`, wishlist.value);
// console.log(snapshot.val());
}
});
};
// const wishIds = watch(wishlist, () => Object.values(wishlist.value) as number[]);
// console.log({wishIds: wishIds.value})
onMounted(fetchWishlist);
onBeforeUnmount(() => unsubscibeListeners(listeners));
// const isEmpty = computed(() => wishlist.value.length === 0);
const isEmpty = computed(() => Object.keys(wishlist.value).length === 0);
const addWish = (id: number) => {
console.log("ADDED TO WISHLIST", id);
push(wishlistRef, id);
};
......@@ -60,15 +57,15 @@ export default function useWishlist() {
//TODO: Lookinto if all mounting/unmounting can happen in the views for better loading?
const deleteWish = (deleteId: number) => {
if (Object.values(wishlist).length === 0) {
console.log("No wishlist, shoult not be able to delete anything");
return console.log("No wishlist, shoult not be able to delete anything");
}
// const newList = wishlist.value.filter(({ id }) => deleteId !== id);
const newList = Object.fromEntries(
Object.entries(wishlist.value).filter(
([_, movieId]) => movieId !== deleteId
)
);
console.log("newlist:", newList);
set(wishlistRef, newList);
};
return { wishlist, isEmpty, addWish, deleteWish };
......
......@@ -13,14 +13,7 @@ export function getCurrentUser(): Promise<User | null> {
});
}
// export async function getUsername(): Promise<string | null | undefined> {
// return (await getCurrentUser())?.displayName
// ?.toLowerCase()
// .split(" ")
// .join("_");
// }
export function getUsername(user: User | null) {
if (!user) return ""
return user.displayName!.toLowerCase().split(" ").join("_")
if (!user) return "";
return user.displayName!.toLowerCase().split(" ").join("_");
}
......@@ -2,6 +2,7 @@
<h1>Favorites</h1>
<div v-if="isEmpty">
<h3>No movies in wishlist</h3>
<button @click="redirect">Add new movies</button>
</div>
<table v-else>
<thead>
......@@ -19,10 +20,14 @@
</table>
</template>
<script setup lang="ts">
import { useRouter } from "vue-router";
import { useFilteredMovies, useMovies, useWishlist } from "../hooks";
const { movies } = useMovies();
const { wishlist, deleteWish, isEmpty } = useWishlist();
const { filteredMovies } = useFilteredMovies(movies, wishlist, true);
console.log("No wishes", isEmpty.value);
const router = useRouter();
const redirect = () => router.push({ name: "movies" });
// console.log("No wishes", isEmpty.value);
</script>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment