Make ReviewDB Look More Native (#256)
This commit is contained in:
		
							parent
							
								
									e7573382fe
								
							
						
					
					
						commit
						6210d3a597
					
				
					 2 changed files with 50 additions and 40 deletions
				
			
		| 
						 | 
				
			
			@ -71,34 +71,37 @@ export default LazyComponent(() => {
 | 
			
		|||
                body: "Do you really you want to report this review?",
 | 
			
		||||
                confirmText: "Report",
 | 
			
		||||
                cancelText: "Nevermind",
 | 
			
		||||
                confirmColor: "red",
 | 
			
		||||
                // confirmColor: "red", this just adds a class name and breaks the submit button guh
 | 
			
		||||
                onConfirm: () => reportReview(review.id)
 | 
			
		||||
            });
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        return (
 | 
			
		||||
            <div className={classes(cozyMessage, message, groupStart, wrapper, cozy)}>
 | 
			
		||||
            <div className={classes(cozyMessage, message, groupStart, wrapper, cozy, "user-review")}>
 | 
			
		||||
                <div className={contents}>
 | 
			
		||||
                    <img
 | 
			
		||||
                        className={classes(avatar, clickable)}
 | 
			
		||||
                        style={{ left: "8px" }}
 | 
			
		||||
                        onClick={openModal}
 | 
			
		||||
                        src={review.profile_photo || "/assets/1f0bfc0865d324c2587920a7d80c609b.png?size=128"}
 | 
			
		||||
                    />
 | 
			
		||||
                    <span
 | 
			
		||||
                        className={classes(username, clickable)}
 | 
			
		||||
                        style={{ color: "var(--text-muted)" }}
 | 
			
		||||
                        style={{ color: "var(--text-normal)", right: "8px" }}
 | 
			
		||||
                        onClick={() => openModal()}
 | 
			
		||||
                    >
 | 
			
		||||
                        {review.username}
 | 
			
		||||
                    </span>
 | 
			
		||||
                    <p
 | 
			
		||||
                        className={classes(messageContent, defaultColor)}
 | 
			
		||||
                        style={{ fontSize: 15, marginTop: 4 }}
 | 
			
		||||
                        style={{ fontSize: 15, marginTop: 4, right: "8px" }}
 | 
			
		||||
                    >
 | 
			
		||||
                        {review.comment}
 | 
			
		||||
                    </p>
 | 
			
		||||
                    <div className={classes(container, isHeader, buttons)}>
 | 
			
		||||
                        <div className={buttonClasses.wrapper}>
 | 
			
		||||
                    <div className={classes(container, isHeader, buttons)} style={{
 | 
			
		||||
                        padding: "0px",
 | 
			
		||||
                    }}>
 | 
			
		||||
                        <div className={buttonClasses.wrapper} >
 | 
			
		||||
                            <MessageButton type="report" callback={reportRev} />
 | 
			
		||||
                            {canDeleteReview(review, UserStore.getCurrentUser().id) && (
 | 
			
		||||
                                <MessageButton type="delete" callback={delReview} />
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -18,8 +18,8 @@
 | 
			
		|||
 | 
			
		||||
import type { KeyboardEvent } from "react";
 | 
			
		||||
 | 
			
		||||
import { lazyWebpack, useAwaiter } from "../../../utils/misc";
 | 
			
		||||
import { Forms, Text } from "../../../webpack/common";
 | 
			
		||||
import { classes, lazyWebpack, useAwaiter } from "../../../utils/misc";
 | 
			
		||||
import { Forms, Text, UserStore } from "../../../webpack/common";
 | 
			
		||||
import { addReview, getReviews } from "../Utils/ReviewDBAPI";
 | 
			
		||||
import ReviewComponent from "./ReviewComponent";
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			@ -46,38 +46,45 @@ export default function ReviewsView({ userId }: { userId: string; }) {
 | 
			
		|||
    }
 | 
			
		||||
 | 
			
		||||
    return (
 | 
			
		||||
        <>
 | 
			
		||||
            <Text
 | 
			
		||||
                tag="h2"
 | 
			
		||||
                variant="eyebrow"
 | 
			
		||||
                style={{
 | 
			
		||||
                    paddingLeft: "12px",
 | 
			
		||||
                    marginBottom: "12px",
 | 
			
		||||
                    color: "var(--header-primary)"
 | 
			
		||||
                }}
 | 
			
		||||
            >
 | 
			
		||||
                User Reviews
 | 
			
		||||
            </Text>
 | 
			
		||||
            {reviews?.map(review =>
 | 
			
		||||
                <ReviewComponent
 | 
			
		||||
                    key={review.id}
 | 
			
		||||
                    review={review}
 | 
			
		||||
                    refetch={refetch}
 | 
			
		||||
        <div className="ReviewDB">
 | 
			
		||||
            <>
 | 
			
		||||
                <Text
 | 
			
		||||
                    tag="h2"
 | 
			
		||||
                    variant="eyebrow"
 | 
			
		||||
                    style={{
 | 
			
		||||
                        paddingLeft: "0px",
 | 
			
		||||
                        marginBottom: "12px",
 | 
			
		||||
                        color: "var(--header-primary)"
 | 
			
		||||
                    }}
 | 
			
		||||
                >
 | 
			
		||||
                    User Reviews
 | 
			
		||||
                </Text>
 | 
			
		||||
                {reviews?.map(review =>
 | 
			
		||||
                    <ReviewComponent
 | 
			
		||||
                        key={review.id}
 | 
			
		||||
                        review={review}
 | 
			
		||||
                        refetch={refetch}
 | 
			
		||||
                    />
 | 
			
		||||
                )}
 | 
			
		||||
                {reviews?.length === 0 && (
 | 
			
		||||
                    <Forms.FormText style={{ paddingLeft: "0px", paddingRight: "12px", marginBottom: "12px" }}>
 | 
			
		||||
                        Looks like nobody reviewed this user yet. You could be the first!
 | 
			
		||||
                    </Forms.FormText>
 | 
			
		||||
                )}
 | 
			
		||||
                <textarea
 | 
			
		||||
                    className={classes(Classes.textarea, "enter-comment")}
 | 
			
		||||
                    placeholder={"Review @" + UserStore.getUser(userId)?.username ?? ""}
 | 
			
		||||
                    onKeyDown={onKeyPress}
 | 
			
		||||
                    style={{
 | 
			
		||||
                        padding: "12px",
 | 
			
		||||
                        marginBottom: "12px",
 | 
			
		||||
                        color: "var(--text-normal)",
 | 
			
		||||
                        border: "1px solid var(--profile-message-input-border-color)",
 | 
			
		||||
                        fontSize: "14px",
 | 
			
		||||
                        borderRadius: "3px",
 | 
			
		||||
                    }}
 | 
			
		||||
                />
 | 
			
		||||
            )}
 | 
			
		||||
            {reviews?.length === 0 && (
 | 
			
		||||
                <Forms.FormText style={{ paddingLeft: "12px", paddingRight: "12px" }}>
 | 
			
		||||
                    Looks like nobody reviewed this user yet. You could be the first!
 | 
			
		||||
                </Forms.FormText>
 | 
			
		||||
            )}
 | 
			
		||||
            <textarea
 | 
			
		||||
                className={Classes.textarea}
 | 
			
		||||
                placeholder="Enter a comment"
 | 
			
		||||
                onKeyDown={onKeyPress}
 | 
			
		||||
                style={{
 | 
			
		||||
                    padding: "12px",
 | 
			
		||||
                }}
 | 
			
		||||
            />
 | 
			
		||||
        </>
 | 
			
		||||
            </>
 | 
			
		||||
        </div>
 | 
			
		||||
    );
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue