fix version select and update numbers

ForzaMods · Jan 1, 2025 · 2538b01 · 2538b01
1 parent 5e27c69
commit 2538b01
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 15 deletions.
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,12 +1,32 @@
+"use client"
+
 import { ArrowDownToLineIcon, ArrowRightIcon } from "lucide-react";
 import Link from "next/link";
+import { useEffect, useState } from "react";
 import { css } from "styled-system/css";
 import NumberTicker from "~/components/number-ticker";
 import { Button } from "~/components/ui/button";
 import { Heading } from "~/components/ui/heading";
 import { Text } from "~/components/ui/text";
 
 export default function Home() {
+  const [selectedValue, setSelectedValue] = useState<any | undefined>();
+
+  useEffect(() => {
+    const fetchTags = async () => {
+      try {
+        const url = "https://api.github.com/repos/ForzaMods/Forza-Mods-AIO/releases";
+        const response = await fetch(url);
+        const data = await response.json();
+
+        setSelectedValue(data[0].assets[0].browser_download_url);
+      } catch (error) {
+        console.error("Error fetching tags:", error);
+      }
+    };
+
+    fetchTags();
+  }, []);
   return (
     <>
       <div className={css({
@@ -25,7 +45,7 @@ export default function Home() {
           Forza Mods is a community enabling seamless modding and enhancements for an unparalleled Forza gaming experience.
         </Text>
         <div className={css({ display: "flex", gap: 4, marginTop: 4, flexDirection: { base: "row", mdDown: "column" } })}>
-          <Link href="https://github.com/ForzaMods/Forza-Mods-AIO/releases/latest/download/Forza-Mods-AIO.exe">
+          <Link href={selectedValue}>
             <Button variant="solid">
               Download Latest AIO 
               <ArrowDownToLineIcon />
@@ -43,21 +63,21 @@ export default function Home() {
         <div>
           <Text>Incredible</Text>
           <div className={css({ marginY: "5px" })}>
-            <NumberTicker from={0} to={1147833} durationInMs={2000} />
+            <NumberTicker from={0} to={1322784} durationInMs={2000} />
           </div>
           <Text>AIO downloads</Text>
         </div>
         <div>
           <Text>In excess of</Text>
           <div className={css({ marginY: "5px" })}>
-            <NumberTicker from={0} to={977} durationInMs={2000} />
+            <NumberTicker from={0} to={1020} durationInMs={2000} />
           </div>
           <Text>GitHub stars</Text>
         </div>
         <div>
           <Text>More than</Text>
           <div className={css({ marginY: "5px" })}>
-            <NumberTicker from={0} to={89358} durationInMs={2000} />
+            <NumberTicker from={0} to={93440} durationInMs={2000} />
           </div>
           <Text>Discord members</Text>
         </div>

diff --git a/src/components/aio-version-select.tsx b/src/components/aio-version-select.tsx
@@ -6,26 +6,29 @@ import { useEffect, useState } from "react";
 import Link from "next/link";
 import { IconButton } from "./ui/icon-button";
 import { css } from "styled-system/css";
+import { redirect } from "next/navigation";
 
 export default function AioVersionSelect() {
-  const [items, setItems] = useState([{ label: null, value: null }]);
+  const [items, setItems] = useState([{ label: null, value: null, url: null }]);
   const [selectedValue, setSelectedValue] = useState<any | undefined>();
 
   useEffect(() => {
     const fetchTags = async () => {
       try {
-        const url = "https://api.github.com/repos/ForzaMods/Forza-Mods-AIO/tags";
+        const url = "https://api.github.com/repos/ForzaMods/Forza-Mods-AIO/releases";
         const response = await fetch(url);
         const data = await response.json();
         const tagItems = data
           .filter((obj: any) => /^[0-9]/.test(obj.name))
           .map((obj: any, index: number) => ({
-            label: obj.name + (index === 0 ? " - Latest" : ""),
-            value: obj.name
+            label: obj.tag_name + (index === 0 ? " - Latest" : ""),
+            value: obj.tag_name,
+            url: obj.assets[0].browser_download_url,
           }));
         const itemsToSet = tagItems.slice(0, 9);
         setItems(itemsToSet);
         if (itemsToSet.length > 0) {
+          console.log(itemsToSet[0].value)
           setSelectedValue(itemsToSet[0].value);
         }
       } catch (error) {
@@ -39,10 +42,10 @@ export default function AioVersionSelect() {
 
   return (
     <>
-      <Select.Root positioning={{ sameWidth: true, flip: true, arrowPadding: 2 }} className={css({ width: { md: "2xs" }})} items={items} value={["2.4.0.1"]} onValueChange={(item: any) => setSelectedValue(item.value)} variant="outline">
+      <Select.Root positioning={{ sameWidth: true, flip: true, arrowPadding: 2 }} className={css({ width: { md: "2xs" }})} items={items} defaultValue={[selectedValue]} onValueChange={(item: any) => setSelectedValue(item.value)} variant="outline">
         <Select.Control>
           <Select.Trigger>
-            <Select.ValueText placeholder="Select a Version" />
+            <Select.ValueText placeholder={items.find((item) => item.value === selectedValue)?.label || ""} />
             <ChevronsUpDownIcon />
           </Select.Trigger>
         </Select.Control>
@@ -60,10 +63,8 @@ export default function AioVersionSelect() {
               </Select.Item>
             ))}
 
-              <Select.Item key="View all" item="View all">
-                <Link href="https://github.com/ForzaMods/Forza-Mods-AIO/tags">
-                  <Select.ItemText>View older versions</Select.ItemText>
-                </Link>
+              <Select.Item key="View all" item="View all" asChild>
+                <Select.ItemText onClick={() => redirect("https://github.com/ForzaMods/AIO/releases")}>View older versions</Select.ItemText>
               </Select.Item>
             </Select.ItemGroup>
           </Select.Content>
@@ -73,7 +74,7 @@ export default function AioVersionSelect() {
       <IconButton disabled aria-label="Download" variant="outline">
         <ArrowDownToLineIcon />
       </IconButton> : 
-      <Link href={`https://github.com/ForzaMods/Forza-Mods-AIO/releases/download/${selectedValue}/Forza-Mods-AIO.exe`}>
+      <Link href={items.find((item) => item.value == selectedValue)?.url || ""}>
         <IconButton aria-label="Download" variant="outline">
           <ArrowDownToLineIcon />
         </IconButton>