Skip to content

Commit

Permalink
️🎀💠 ↝ [SGV2-10 SGV2-14]: Fix bug/user issue when authenticating, atte…
Browse files Browse the repository at this point in the history
…mpting to add mission inbox to user account
  • Loading branch information
Gizmotronn committed Apr 18, 2024
1 parent 12f9002 commit 14a7b05
Show file tree
Hide file tree
Showing 7 changed files with 200 additions and 96 deletions.
Binary file modified .DS_Store
Binary file not shown.
45 changes: 32 additions & 13 deletions components/Content/Inventory/UserOwnedItems.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
import { useSupabaseClient, useSession } from "@supabase/auth-helpers-react";
import Link from "next/link";

const OwnedItemsList: React.FC = () => {
const OwnedItemsList: React.FC = () => {
const supabase = useSupabaseClient();
const session = useSession();

Expand Down Expand Up @@ -94,29 +94,37 @@ interface InventoryItem {

export const ItemsVerticalList: React.FC = () => {
const session = useSession();
const [itemDetails, setItemDetails] = useState<InventoryItem[]>([]);
const supabase = useSupabaseClient();
const [ownedItems, setOwnedItems] = useState([]);
const [itemDetails, setItemDetails] = useState([]);

useEffect(() => {
const fetchOwnedItems = async () => {
const fetchOwnedItemsAndDetails = async () => {
if (!session) return;

try {
if (!session) return;
const userId = session.user.id;

const user = session.user.id;
// Fetch owned items from the database
const { data: ownedItemsData, error: ownedItemsError } = await supabase
.from('inventoryUSERS')
.select('*')
.eq('owner', user)
.gt('id', 20);
.eq('owner', userId)
.gt('id', 20)
.limit(6)
.order('id', { ascending: false});

if (ownedItemsError) {
throw ownedItemsError;
}

if (ownedItemsData) {
setOwnedItems(ownedItemsData);

// Extract item IDs from owned items
const itemIds = ownedItemsData.map(item => item.item);
// Fetch details of owned items

// Fetch details of owned items based on item IDs
const { data: itemDetailsData, error: itemDetailsError } = await supabase
.from('inventoryITEMS')
.select('*')
Expand All @@ -131,16 +139,27 @@ export const ItemsVerticalList: React.FC = () => {
}
}
} catch (error) {
console.error('Error fetching owned items:', error.message);
console.error('Error fetching owned items and details:', error);
}
};

fetchOwnedItems();
}, [session]);
fetchOwnedItemsAndDetails();
}, [session, supabase]);

// Combine owned items with their details
const combinedItems = ownedItems.map(ownedItem => {
// Find the matching item detail based on item ID
const itemDetail = itemDetails.find(detail => detail.id === ownedItem.item);

return {
...ownedItem,
...itemDetail,
};
});

return (
<div className="w-full">
{itemDetails.map(item => (
{combinedItems.map(item => (
<div key={item.id} className="flex items-center justify-between mb-2">
<div className="flex items-center space-x-2">
<div className="w-10 h-10 rounded-full overflow-hidden">
Expand Down Expand Up @@ -224,7 +243,7 @@ export const SectorStructureOwned: React.FC<{ sectorid: string }> = ({ sectorid
<img src={item.icon_url} alt={item.name} className="w-full h-auto" />
</div>
<p className="text-gray-600">Quantity: {ownedItem?.quantity}</p>
<p className="text-gray-600">On planet: {ownedItem?.sector}</p>
<p className="text-gray-600">On planet (id): {ownedItem?.sector}</p>
</li>
);
})}
Expand Down
92 changes: 11 additions & 81 deletions components/Content/Visuals/Bento.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
import { motion } from "framer-motion";
import Image from "next/image";
import { ItemsVerticalList } from "../Inventory/UserOwnedItems";
import { MissionList } from "../../Gameplay/mission-list";

export function BentoGridThirdDemo() {
return (
Expand Down Expand Up @@ -186,57 +187,7 @@ const SkeletonFour = () => {
whileHover="hover"
className="flex flex-1 w-full h-full min-h-[6rem] dark:bg-dot-white/[0.2] bg-dot-black/[0.2] flex-row space-x-2"
>
<motion.div
variants={first}
className="h-full w-1/3 rounded-2xl bg-white p-4 dark:bg-black dark:border-white/[0.1] border border-neutral-200 flex flex-col items-center justify-center"
>
<Image
src="https://pbs.twimg.com/profile_images/1417752099488636931/cs2R59eW_400x400.jpg"
alt="avatar"
height="100"
width="100"
className="rounded-full h-10 w-10"
/>
<p className="sm:text-sm text-xs text-center font-semibold text-neutral-500 mt-4">
Just code in Vanilla Javascript
</p>
<p className="border border-red-500 bg-red-100 dark:bg-red-900/20 text-red-600 text-xs rounded-full px-2 py-0.5 mt-4">
Delusional
</p>
</motion.div>
<motion.div className="h-full relative z-20 w-1/3 rounded-2xl bg-white p-4 dark:bg-black dark:border-white/[0.1] border border-neutral-200 flex flex-col items-center justify-center">
<Image
src="https://pbs.twimg.com/profile_images/1417752099488636931/cs2R59eW_400x400.jpg"
alt="avatar"
height="100"
width="100"
className="rounded-full h-10 w-10"
/>
<p className="sm:text-sm text-xs text-center font-semibold text-neutral-500 mt-4">
Tailwind CSS is cool, you know
</p>
<p className="border border-green-500 bg-green-100 dark:bg-green-900/20 text-green-600 text-xs rounded-full px-2 py-0.5 mt-4">
Sensible
</p>
</motion.div>
<motion.div
variants={second}
className="h-full w-1/3 rounded-2xl bg-white p-4 dark:bg-black dark:border-white/[0.1] border border-neutral-200 flex flex-col items-center justify-center"
>
<Image
src="https://pbs.twimg.com/profile_images/1417752099488636931/cs2R59eW_400x400.jpg"
alt="avatar"
height="100"
width="100"
className="rounded-full h-10 w-10"
/>
<p className="sm:text-sm text-xs text-center font-semibold text-neutral-500 mt-4">
I love angular, RSC, and Redux.
</p>
<p className="border border-orange-500 bg-orange-100 dark:bg-orange-900/20 text-orange-600 text-xs rounded-full px-2 py-0.5 mt-4">
Helpless
</p>
</motion.div>
<MissionList />
</motion.div>
);
};
Expand All @@ -246,8 +197,8 @@ const SkeletonFive = () => {
x: 0,
},
animate: {
x: 10,
rotate: 5,
x: 2,
rotate: 1.3,
transition: {
duration: 0.2,
},
Expand Down Expand Up @@ -276,24 +227,7 @@ const SkeletonFive = () => {
variants={variants}
className="flex flex-row rounded-2xl border border-neutral-100 dark:border-white/[0.2] p-2 items-start space-x-2 bg-white dark:bg-black"
>
<Image
src="https://pbs.twimg.com/profile_images/1417752099488636931/cs2R59eW_400x400.jpg"
alt="avatar"
height="100"
width="100"
className="rounded-full h-10 w-10"
/>
<p className="text-xs text-neutral-500">
There are a lot of cool framerworks out there like React, Angular,
Vue, Svelte that can make your life ....
</p>
</motion.div>
<motion.div
variants={variantsSecond}
className="flex flex-row rounded-full border border-neutral-100 dark:border-white/[0.2] p-2 items-center justify-end space-x-2 w-3/4 ml-auto bg-white dark:bg-black"
>
<p className="text-xs text-neutral-500">Use PHP.</p>
<div className="h-6 w-6 rounded-full bg-gradient-to-r from-pink-500 to-violet-500 flex-shrink-0" />
<ItemsVerticalList />
</motion.div>
</motion.div>
);
Expand Down Expand Up @@ -333,27 +267,23 @@ const items = [
icon: <IconSignature className="h-4 w-4 text-neutral-500" />,
},
{
title: "Sentiment Analysis",
title: "",
description: (
<span className="text-sm">
Understand the sentiment of your text with AI analysis.
</span>
null
),
header: <SkeletonFour />,
className: "md:col-span-2",
icon: <IconTableColumn className="h-4 w-4 text-neutral-500" />,
},

{
title: "Text Summarization",
title: "",
description: (
<span className="text-sm">
Summarize your lengthy documents with AI technology.
</span>
null
),
header: <ItemsVerticalList />,
header: <SkeletonFive />,
className: "md:col-span-1",
icon: <IconBoxAlignRightFilled className="h-4 w-4 text-neutral-500" />,
// icon: <IconBoxAlignRightFilled className="h-4 w-4 text-neutral-500" />,
},
];

Expand Down
79 changes: 79 additions & 0 deletions components/Gameplay/mission-list.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
import { CardTitle, CardDescription, CardHeader, CardContent, CardFooter, Card } from "../ui/card";
import Link from "next/link";
import { Button } from "../ui/button";

export function MissionList() {
return (
<>
<CardHeader>
<CardTitle>To-Do List</CardTitle>
<CardDescription>Manage your daily tasks</CardDescription>
</CardHeader>
<CardContent className="space-y-4 overflow-y-auto max-h-[480px] pr-4">
<div className="flex items-center justify-between">
<div className="flex items-center space-x-3">
<Link href="#">
<LinkIcon className="w-5 h-5 text-gray-500 hover:text-gray-900 dark:hover:text-gray-50" />
</Link>
<p className="line-through text-gray-500 dark:text-gray-400">Finish the design mockups</p>
</div>
</div>
<div className="flex items-center justify-between">
<div className="flex items-center space-x-3">
<Link href="#">
<LinkIcon className="w-5 h-5 text-gray-500 hover:text-gray-900 dark:hover:text-gray-50" />
</Link>
<p>Attend the team meeting</p>
</div>
</div>
<div className="flex items-center justify-between">
<div className="flex items-center space-x-3">
<Link href="#">
<LinkIcon className="w-5 h-5 text-gray-500 hover:text-gray-900 dark:hover:text-gray-50" />
</Link>
<p>Buy groceries</p>
</div>
</div>
<div className="flex items-center justify-between">
<div className="flex items-center space-x-3">
<Link href="#">
<LinkIcon className="w-5 h-5 text-gray-500 hover:text-gray-900 dark:hover:text-gray-50" />
</Link>
<p>Call mom</p>
</div>
</div>
<div className="flex items-center justify-between">
<div className="flex items-center space-x-3">
<Link href="#">
<LinkIcon className="w-5 h-5 text-gray-500 hover:text-gray-900 dark:hover:text-gray-50" />
</Link>
<p>Clean the house</p>
</div>
</div>
</CardContent>
{/* <CardFooter className="flex justify-end">
<Button size="sm">Add Task</Button>
</CardFooter> */}
</>
)
}

function LinkIcon(props) {
return (
<svg
{...props}
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
</svg>
)
}
76 changes: 76 additions & 0 deletions components/ui/card.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
import * as React from "react"

import { cn } from "../../lib/uitls"

const Card = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn(
"rounded-xl border bg-card text-card-foreground shadow",
className
)}
{...props}
/>
))
Card.displayName = "Card"

const CardHeader = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("flex flex-col space-y-1.5 p-6", className)}
{...props}
/>
))
CardHeader.displayName = "CardHeader"

const CardTitle = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLHeadingElement>
>(({ className, ...props }, ref) => (
<h3
ref={ref}
className={cn("font-semibold leading-none tracking-tight", className)}
{...props}
/>
))
CardTitle.displayName = "CardTitle"

const CardDescription = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => (
<p
ref={ref}
className={cn("text-sm text-muted-foreground", className)}
{...props}
/>
))
CardDescription.displayName = "CardDescription"

const CardContent = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
))
CardContent.displayName = "CardContent"

const CardFooter = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("flex items-center p-6 pt-0", className)}
{...props}
/>
))
CardFooter.displayName = "CardFooter"

export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
2 changes: 1 addition & 1 deletion pages/login/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const Login = () => {
useEffect(() => {
// Check if the user is logged in and then redirect
if (session) {
router.push('/feed');
router.push('/');
}
}, [session, router]);

Expand Down
Loading

0 comments on commit 14a7b05

Please sign in to comment.