Skip to content

Commit

Permalink
Voting State, Part 1 (#81)
Browse files Browse the repository at this point in the history 
* added voting to replies

* created hidden state

* made voting buttons a component

* added new voting component to pages

* reverted useState

* halfway there

* tweaks

* thank god for chatGPT

* added patch routes

* moved voting hook call inside vote container

* added votes for comments

* hive voting content working

* removed useState

* content content container voting working

* fixed conditional styling

* commented out voting container in replies to deploy

---------

Co-authored-by: Tom Slanda <[email protected]>
  • Loading branch information
@slandath
slandath and Tom Slanda authored Aug 14, 2024
1 parent 1230705 commit eaf54d1
Show file tree
Hide file tree
Showing 13 changed files with 283 additions and 285 deletions.
48 changes: 6 additions & 42 deletions src/components/CommentContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,25 @@ import { useState } from "react";
import { useParams } from "react-router-dom";
import { useForm } from "@tanstack/react-form";
import getIso from "../utils/tokenTools/getIso";
import useShowVotes from "../hooks/useShowVotes";
import useGetVotes from "../hooks/useGetVotes";
import VoteContainer from "./VoteContainer";
import { TComment } from "../types";
import ReplyContainer from "./ReplyContainer";
import CommentIcon from "../assets/CommentIcon";
import UpvoteIcon from "../assets/UpvoteIcon";
import DownvoteIcon from "../assets/DownvoteIcon";

const CommentContainer = (props: any) => {
// URL Variables
const baseURL = import.meta.env.VITE_BASEURL;
const params = useParams();
const votingState = useShowVotes(props.Uuid);
const voteURL = baseURL + "/comment/uuid/" + props.Uuid;

// State
const [replyTextareaShow, setReplyTextareaShow] = useState<boolean>(false);
const [replyButtonShow, setReplyButtonShow] = useState<boolean>(false);
const [replyButtonText, setReplyButtonText] = useState<string>("Add Reply");

useGetVotes(baseURL + "/content/votes");

// ----- Reply Start ----- //
const form = useForm({
defaultValues: {
Expand Down Expand Up @@ -97,44 +98,7 @@ const CommentContainer = (props: any) => {
{/* Horizontal Vote Container */}
<div className="flex gap-2">
<div className="flex w-max p-2 justify-evenly rounded-md text-sm hover:bg-gray-200">
{votingState.upvote === true ? (
<>
<button className="block hover:cursor-pointer">
<UpvoteIcon
fill="rgba(251, 191, 36, 1)"
stroke="rgba(0, 0, 0, 1)"
/>
</button>
<p className="p-2">{props.Upvote}</p>
</>
) : votingState.downvote === false &&
votingState.upvote === false ? (
<>
<button className="block hover:cursor-pointer">
<UpvoteIcon />
</button>
<p className="p-2">{props.Upvote}</p>
</>
) : null}
{votingState.downvote === true ? (
<>
<button className="block hover:cursor-pointer">
<DownvoteIcon
fill="rgba(251, 191, 36, 1)"
stroke="rgba(0, 0, 0, 1)"
/>
</button>
<p className="p-2">{props.Downvote}</p>
</>
) : votingState.downvote === false &&
votingState.upvote === false ? (
<>
<button className="block hover:cursor-pointer">
<DownvoteIcon />
</button>
<p className="p-2">{props.Downvote}</p>
</>
) : null}
<VoteContainer {...props} voteURL={voteURL} />
{/* Comment Container */}
<button
className="flex w-max p-2 justify-evenly rounded-md text-sm hover:bg-gray-200"
Expand Down
104 changes: 23 additions & 81 deletions src/components/ContentContentContainer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,18 @@
import getIso from "../utils/tokenTools/getIso";
import useGetVotes from "../hooks/useGetVotes";
import { Link } from "react-router-dom";
import { TContent } from "../types";
import useShowVotes from "../hooks/useShowVotes";
import VoteContainer from "./VoteContainer";
import CommentIcon from "../assets/CommentIcon";
import UpvoteIcon from "../assets/UpvoteIcon";
import DownvoteIcon from "../assets/DownvoteIcon";

const ContentContentContainer = (props: TContent) => {
const votingState = useShowVotes(props.Uuid);
const baseURL = import.meta.env.VITE_BASEURL;
const voteURL = baseURL + "/content/uuid/" + props.Uuid;
const { data, isLoading, isFetching, isError } = useGetVotes(
baseURL + "/content/votes"
);
console.log(data);
console.log(props);
return (
<div
className="p-3 mx-auto my-2 max-w-xl bg-gray-300 xs:rounded-none sm:rounded-md"
Expand All @@ -16,45 +21,13 @@ const ContentContentContainer = (props: TContent) => {
<div className="flex gap-2">
{/* Vertical Vote Container */}
<div className="hidden md:flex flex-col p-2 h-max rounded-md text-sm">
{votingState.upvote === true ? (
<>
<button
className="block hover:cursor-pointer"
onClick={() => (votingState.upvote = false)}
>
<UpvoteIcon
fill="rgba(251, 191, 36, 1)"
stroke="rgba(0, 0, 0, 1)"
/>
</button>
<p className="p-2">{props.Upvote}</p>
</>
) : votingState.downvote === false && votingState.upvote === false ? (
<>
<button className="block hover:cursor-pointer">
<UpvoteIcon />
</button>
<p className="p-2">{props.Upvote}</p>
</>
) : null}
{votingState.downvote === true ? (
<>
<button className="block hover:cursor-pointer">
<DownvoteIcon
fill="rgba(251, 191, 36, 1)"
stroke="rgba(0, 0, 0, 1)"
/>
</button>
<p className="p-2">{props.Downvote}</p>
</>
) : votingState.downvote === false && votingState.upvote === false ? (
<>
<button className="block hover:cursor-pointer">
<DownvoteIcon />
</button>
<p className="p-2">{props.Downvote}</p>
</>
) : null}
{isLoading || isFetching ? (
"..."
) : isError ? (
"Error"
) : (
<VoteContainer {...props} voteData={data} voteURL={voteURL} />
)}
</div>
<div>
{/* User & Time Container */}
Expand All @@ -76,44 +49,13 @@ const ContentContentContainer = (props: TContent) => {
{/* Horizontal Vote Container */}
<div className="flex gap-2">
<div className="flex w-max p-2 justify-evenly rounded-md text-sm md:hidden">
{votingState.upvote === true ? (
<>
<button className="block hover:cursor-pointer">
<UpvoteIcon
fill="rgba(251, 191, 36, 1)"
stroke="rgba(0, 0, 0, 1)"
/>
</button>
<p className="p-2">{props.Upvote}</p>
</>
) : votingState.downvote === false &&
votingState.upvote === false ? (
<>
<button className="block hover:cursor-pointer">
<UpvoteIcon />
</button>
<p className="p-2">{props.Upvote}</p>
</>
) : null}
{votingState.downvote === true ? (
<>
<button className="block hover:cursor-pointer">
<DownvoteIcon
fill="rgba(251, 191, 36, 1)"
stroke="rgba(0, 0, 0, 1)"
/>
</button>
<p className="p-2">{props.Downvote}</p>
</>
) : votingState.downvote === false &&
votingState.upvote === false ? (
<>
<button className="block hover:cursor-pointer">
<DownvoteIcon />
</button>
<p className="p-2">{props.Downvote}</p>
</>
) : null}
{isLoading || isFetching ? (
"..."
) : isError ? (
"Error"
) : (
<VoteContainer {...props} voteData={data} voteURL={voteURL} />
)}
</div>
{/* Comment Container */}
<div className="flex w-max p-2 justify-evenly rounded-md text-sm">
Expand Down
103 changes: 21 additions & 82 deletions src/components/HiveContentContainer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
import { Link } from "react-router-dom";
import getIso from "../utils/tokenTools/getIso";
import useShowVotes from "../hooks/useShowVotes";
import useGetVotes from "../hooks/useGetVotes";
import { TContent } from "../types";
import UpvoteIcon from "../assets/UpvoteIcon";
import DownvoteIcon from "../assets/DownvoteIcon";
import CommentIcon from "../assets/CommentIcon";
import VoteContainer from "./VoteContainer";

const HiveContentContainer = ({ item }: { item: TContent }) => {
const votingState = useShowVotes(item.Uuid);

const baseURL = import.meta.env.VITE_BASEURL;
const voteURL = baseURL + "/content/uuid/" + item.Uuid;
const { data, isLoading, isFetching, isError } = useGetVotes(
baseURL + "/content/votes"
);
return (
<div
className="p-3 mx-auto my-2 max-w-xl bg-gray-300 xs:rounded-none sm:rounded-md"
Expand All @@ -17,45 +19,13 @@ const HiveContentContainer = ({ item }: { item: TContent }) => {
<div className="flex gap-2">
{/* Vertical Vote Container */}
<div className="hidden md:flex flex-col p-2 h-max rounded-md text-sm">
{votingState.upvote === true ? (
<>
<button
className="block hover:cursor-pointer"
onClick={() => (votingState.upvote = false)}
>
<UpvoteIcon
fill="rgba(251, 191, 36, 1)"
stroke="rgba(0, 0, 0, 1)"
/>
</button>
<p className="p-2">{item.Upvote}</p>
</>
) : votingState.downvote === false && votingState.upvote === false ? (
<>
<button className="block hover:cursor-pointer">
<UpvoteIcon />
</button>
<p className="p-2">{item.Upvote}</p>
</>
) : null}
{votingState.downvote === true ? (
<>
<button className="block hover:cursor-pointer">
<DownvoteIcon
fill="rgba(251, 191, 36, 1)"
stroke="rgba(0, 0, 0, 1)"
/>
</button>
<p className="p-2">{item.Downvote}</p>
</>
) : votingState.downvote === false && votingState.upvote === false ? (
<>
<button className="block hover:cursor-pointer">
<DownvoteIcon />
</button>
<p className="p-2">{item.Downvote}</p>
</>
) : null}
{isLoading || isFetching ? (
"..."
) : isError ? (
"Error"
) : (
<VoteContainer {...item} voteData={data} voteURL={voteURL} />
)}
</div>
<div>
{/* User & Time Container */}
Expand All @@ -77,44 +47,13 @@ const HiveContentContainer = ({ item }: { item: TContent }) => {
{/* Horizontal Vote Container */}
<div className="flex gap-2">
<div className="flex w-max p-2 justify-evenly rounded-md text-sm md:hidden">
{votingState.upvote === true ? (
<>
<button className="block hover:cursor-pointer">
<UpvoteIcon
fill="rgba(251, 191, 36, 1)"
stroke="rgba(0, 0, 0, 1)"
/>
</button>
<p className="p-2">{item.Upvote}</p>
</>
) : votingState.downvote === false &&
votingState.upvote === false ? (
<>
<button className="block hover:cursor-pointer">
<UpvoteIcon />
</button>
<p className="p-2">{item.Upvote}</p>
</>
) : null}
{votingState.downvote === true ? (
<>
<button className="block hover:cursor-pointer">
<DownvoteIcon
fill="rgba(251, 191, 36, 1)"
stroke="rgba(0, 0, 0, 1)"
/>
</button>
<p className="p-2">{item.Downvote}</p>
</>
) : votingState.downvote === false &&
votingState.upvote === false ? (
<>
<button className="block hover:cursor-pointer">
<DownvoteIcon />
</button>
<p className="p-2">{item.Downvote}</p>
</>
) : null}
{isLoading || isFetching ? (
"..."
) : isError ? (
"Error"
) : (
<VoteContainer {...item} voteData={data} voteURL={voteURL} />
)}
</div>
{/* Comment Container */}
<div className="flex w-max p-2 justify-evenly rounded-md text-sm">
Expand Down
25 changes: 12 additions & 13 deletions src/components/HomeContentContainer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,20 @@
import { Link } from "react-router-dom";


const HomeContentContainer = ({ item }: { item: any }) => {
return (
<>
<div
className="p-3 mx-auto my-2 max-w-xl bg-gray-300 xs:rounded-none sm:rounded-md hover:bg-gray-200"
id={item.Id}
>
<Link to={`/hive/uuid/${item.Uuid}/content`}>
<div className="p-2 mt-2 hover:cursor-pointer ">
<p className="text-xl">{item.Name}</p>
</div>
</Link>
</div>
</>
)
<div
className="p-3 mx-auto my-2 max-w-xl bg-gray-300 xs:rounded-none sm:rounded-md hover:bg-gray-200"
id={item.Id}
>
<Link to={`/hive/uuid/${item.Uuid}/content`}>
<div className="p-2 mt-2 hover:cursor-pointer ">
<p className="text-xl">{item.Name}</p>
</div>
</Link>
</div>
</>
);
};

export default HomeContentContainer;
7 changes: 3 additions & 4 deletions src/components/LoginForm.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,17 @@
import { useForm } from "@tanstack/react-form";
import { useState} from "react";
import { useState } from "react";
import { Link } from "react-router-dom";
import { useNavigate } from "react-router-dom";
import validateEmail from "../utils/formValidation/validateEmail";
import setStorage from "../utils/setStorage";


type LoginCredentials = {
email: string;
password: string;
};

const LoginForm: React.FC = () => {
const [buttonText, setButtonText] = useState<string>("Submit")
const [buttonText, setButtonText] = useState<string>("Submit");
const baseURL = import.meta.env.VITE_BASEURL;
const navigate = useNavigate();

Expand Down Expand Up @@ -46,8 +45,8 @@ const LoginForm: React.FC = () => {
}
const results = await response.json();
setStorage(results.Token, results.RefreshToken);

navigate("/");
location.reload();
} catch (error) {
console.error("Login Failed", error);
}
Expand Down
Loading

0 comments on commit eaf54d1

Please sign in to comment.