Skip to content

Commit

Permalink
Merge pull request #167 from datagrove/reviewsUpdates
Browse files Browse the repository at this point in the history 
Reviews updates
  • Loading branch information
@r-southworth
r-southworth authored Nov 21, 2024
2 parents 4985440 + fd57263 commit cbdd852
Show file tree
Hide file tree
Showing 18 changed files with 477 additions and 196 deletions.
2 changes: 2 additions & 0 deletions src/assets/person-svgrepo-com.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/components/common/notices/modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ const Modal: Component<ModalProps> = (props) => {
/>
<section
role="dialog"
class="modal min-h-100vh w-100vw md:min-h-auto fixed inset-0 z-[60] overflow-y-auto bg-background1 p-4 dark:bg-background1-DM md:left-1/2 md:top-1/2 md:max-h-[calc(100vh-4rem)] md:w-[calc(100vw-4rem)] md:max-w-[768px] md:-translate-x-1/2 md:-translate-y-1/2 md:rounded-xl"
class="modal min-h-100vh w-100vw md:min-h-auto fixed inset-0 z-[60] overflow-y-auto overflow-x-hidden bg-background1 p-4 dark:bg-background1-DM md:left-1/2 md:top-1/2 md:max-h-[calc(100vh-4rem)] md:w-[calc(100vw-4rem)] md:max-w-[768px] md:-translate-x-1/2 md:-translate-y-1/2 md:rounded-xl"
ref={setModal}
>
<header class="sticky flex flex-row flex-nowrap items-center justify-between gap-[2rem] border-b-[1px]">
Expand Down
20 changes: 15 additions & 5 deletions src/components/posts/AverageRatingStars.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,8 +65,14 @@ export const AverageRatingStars: Component<Props> = (props) => {
});

return (
<div>
<Show when={props.page === "home" || props.page === "mobileFullDetails" || props.page === "viewCard"}>
<div class="">
<Show
when={
props.page === "home" ||
props.page === "mobileFullDetails" ||
props.page === "viewCard"
}
>
<div class="flex items-center justify-start">
<svg
id="star1"
Expand Down Expand Up @@ -242,9 +248,13 @@ export const AverageRatingStars: Component<Props> = (props) => {
<path d="M 30.335938 12.546875 L 20.164063 11.472656 L 16 2.132813 L 11.835938 11.472656 L 1.664063 12.546875 L 9.261719 19.394531 L 7.140625 29.398438 L 16 24.289063 L 24.859375 29.398438 L 22.738281 19.394531 Z" />
</svg>
</Show>
<div class="flex ml-1">
<p class="mr-1 text-xs md:text-lg font-bold">{averageRating()}</p>
<p class="text-xs md:text-lg font-light">({totalRatings()}) {t("postLabels.reviews")}</p>
<div class="ml-1 flex">
<p class="mr-1 text-xs font-bold md:text-lg">
{averageRating()}
</p>
<p class="text-xs font-light md:text-lg">
({totalRatings()}) {t("postLabels.reviews")}
</p>
</div>
</div>
</Show>
Expand Down
75 changes: 49 additions & 26 deletions src/components/posts/FullPostView.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import type { Component } from "solid-js";
import type { Post } from "@lib/types";
import type { Review } from "@lib/types";
import { createSignal, createEffect, Show } from "solid-js";
import supabase from "../../lib/supabaseClient";
import { getLangFromUrl, useTranslations } from "../../i18n/utils";
Expand All @@ -12,6 +13,7 @@ import type { AuthSession } from "@supabase/supabase-js";
import type { FilterPostsParams } from "@lib/types";
import { ReportResource } from "./ReportResource";
import { AverageRatingStars } from "../posts/AverageRatingStars";
import { ViewPostReviews } from "./ViewPostReviews";

const lang = getLangFromUrl(new URL(window.location.href));
const t = useTranslations(lang);
Expand Down Expand Up @@ -41,6 +43,30 @@ async function fetchPosts({
return data;
}

async function fetchReviews({
created_at,
resource_id,
reviewer_id,
review_title,
review_text,
overall_rating,
}: Review) {
const response = await fetch("/api/getRatings", {
method: "POST",
body: JSON.stringify({
created_at: created_at,
resource_id: resource_id,
reviewer_id: reviewer_id,
review_title: review_title,
review_text: review_text,
overall_rating: overall_rating,
}),
});
const data = await response.json();

return data;
}

const { data: User, error: UserError } = await supabase.auth.getSession();

export const ViewFullPost: Component<Props> = (props) => {
Expand All @@ -50,10 +76,9 @@ export const ViewFullPost: Component<Props> = (props) => {
{ webpUrl: string; jpegUrl: string }[]
>([]);
const [quantity, setQuantity] = createSignal<number>(1);

const [session, setSession] = createSignal<AuthSession | null>(null);

const [editRender, setEditRender] = createSignal<boolean>(false);
const [review, setReview] = createSignal<Review>();

if (UserError) {
console.log("User Error: " + UserError.message);
Expand Down Expand Up @@ -99,15 +124,13 @@ export const ViewFullPost: Component<Props> = (props) => {
} else {
setPost(userRes.body[0]);
setPostImages(userRes.body[0].image_signedUrls);
console.log(post());
}
} else if (res.body.length < 1 && User.session === null) {
alert(t("messages.noPost"));
location.href = `/${lang}/resources`;
} else {
setPost(res.body[0]);
setPostImages(res.body[0].image_signedUrls);
console.log(post());
}
} catch (error) {
console.log(error);
Expand Down Expand Up @@ -148,7 +171,6 @@ export const ViewFullPost: Component<Props> = (props) => {
function showSlide(n: number) {
let i;
const slides = document.getElementsByClassName("slide");
// console.log(slides)
const dots = document.getElementsByClassName("dot");

if (n > slides.length) {
Expand Down Expand Up @@ -388,7 +410,6 @@ export const ViewFullPost: Component<Props> = (props) => {
qa.classList.add("hidden");
}
}
// console.log(postImages());

return (
<div class="flex w-full justify-center">
Expand Down Expand Up @@ -896,23 +917,24 @@ export const ViewFullPost: Component<Props> = (props) => {
>
<p class="text-xl">{t("menus.description")}</p>
</a>
{/* TODO : Add back for reviews and Q&A
<a
href="#reviewsLg"
id="reviewsLgLink"
class="tabLinkLg mr-10"
onClick={lgTabLinkClick}
>
<p class="text-xl">{t("menus.reviews")}</p>
</a>
<a
href="#qaLg"
id="qaLgLink"
class="tabLinkLg mr-10"
onClick={lgTabLinkClick}
>
<p class="text-xl">{t("menus.qA")}</p>
</a> */}

<a
href="#reviewsLg"
id="reviewsLgLink"
class="tabLinkLg mr-10"
onClick={lgTabLinkClick}
>
<p class="text-xl">{t("menus.reviews")}</p>
</a>
{/* TODO: Add Q&A section */}
{/* <a
href="#qaLg"
id="qaLgLink"
class="tabLinkLg mr-10"
onClick={lgTabLinkClick}
>
<p class="text-xl">{t("menus.qA")}</p>
</a> */}
</div>

<div id="lg-details-div" class="inline">
Expand Down Expand Up @@ -998,9 +1020,10 @@ export const ViewFullPost: Component<Props> = (props) => {
{/* TODO: Language file in mobile component merge is updated, delete hardcoding upon merging */}
{/* <p class="text-lg">{t("menus.reviews")}Reviews</p> */}
</div>
<p id="" class="italic">
{t("messages.comingSoon")}
</p>

<Show when={post()}>
<ViewPostReviews resourceID={post()!.id} />
</Show>
</div>

<div id="lg-qa-div" class="hidden">
Expand Down
90 changes: 47 additions & 43 deletions src/components/posts/MobileFullPostView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import type { AuthSession } from "@supabase/supabase-js";
import { ReportResource } from "./ReportResource";
import { CreateEditPost } from "@components/posts/CreateEditPost";
import { AverageRatingStars } from "./AverageRatingStars";
import { ViewPostReviews } from "./ViewPostReviews";

const lang = getLangFromUrl(new URL(window.location.href));
const t = useTranslations(lang);
Expand Down Expand Up @@ -395,10 +396,7 @@ export const MobileViewFullPost: Component<Props> = (props) => {
</a>
</div>

<div
id="creator-follower-text-div"
class="border-red- ml-1 w-4/6"
>
<div id="creator-follower-text-div" class="ml-1 w-4/6">
<div>
<a
href={`/${lang}/creator/${post()?.seller_id}`}
Expand Down Expand Up @@ -691,17 +689,18 @@ export const MobileViewFullPost: Component<Props> = (props) => {
{t("menus.description")}
</p>
</a>
{/* TODO: Add back for reviews and Q&A
<a
href="#reviews"
id="reviewsLink"
class="tabLink mr-6"
onClick={tabLinkClick}
>
<p id="reviews-text" class="">
{t("menus.reviews")}
</p>
</a>
<a
href="#reviews"
id="reviewsLink"
class="tabLink mr-6"
onClick={tabLinkClick}
>
<p id="reviews-text" class="">
{t("menus.reviews")}
</p>
</a>
{/* TODO: Add back for Q&A
<a
href="#qa"
id="qaLink"
Expand Down Expand Up @@ -829,35 +828,40 @@ export const MobileViewFullPost: Component<Props> = (props) => {
></div>
</div>

{/* TODO: Add back for Reviews
<div
id="reviews"
class="mb-2 border-t border-border1 dark:border-border1-DM"
>
<div class="flex justify-between">
<p class="text-lg">{t("menus.reviews")}</p>
<button onClick={changeReviews}>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="none"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
id="reviews-arrow"
class="stroke-icon1 dark:stroke-icon1-DM"
>
<polyline points="19 12 12 19 5 12" />
</svg>
</button>
</div>
<div
id="reviews"
class="mb-2 border-t border-border1 dark:border-border1-DM"
>
<div class="flex justify-between">
<p class="text-lg">{t("menus.reviews")}</p>
<button onClick={changeReviews}>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="none"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
id="reviews-arrow"
class="stroke-icon1 dark:stroke-icon1-DM"
>
<polyline points="19 12 12 19 5 12" />
</svg>
</button>
</div>
{/* <p>{ post()?.grade.join(", ") }</p> */}

<p id="post-reviews-div" class="hidden italic">
{t("messages.comingSoon")}
</p>
</div> */}
<div
id="post-reviews-div"
class="prose hidden dark:prose-invert"
>
<Show when={post()}>
<ViewPostReviews resourceID={post()!.id} />
</Show>
</div>
</div>

{/* TODO: Add back for Q&A
<div
Expand Down
Loading

0 comments on commit cbdd852

Please sign in to comment.