From 1f73da7be6bcdec835572f7dd5ed98d234c744b4 Mon Sep 17 00:00:00 2001
From: Leo dev <klesti.selimay@icloud.com>
Date: Tue, 4 Mar 2025 18:01:04 +0100
Subject: [PATCH] selectable platform

---
 package-lock.json               | 56 +++++++++++++++++++++++++++++
 package.json                    |  2 ++
 src/app/calendar/postDialog.tsx | 62 ++++++++++++++++++++++++++++++---
 src/lib/types.ts                |  8 ++++-
 4 files changed, 123 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 92246c0..c814edd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,8 @@
                 "@radix-ui/react-slot": "^1.1.2",
                 "@radix-ui/react-tabs": "^1.1.3",
                 "@radix-ui/react-toast": "^1.2.6",
+                "@radix-ui/react-toggle": "^1.1.2",
+                "@radix-ui/react-toggle-group": "^1.1.2",
                 "@radix-ui/react-tooltip": "^1.1.8",
                 "@schedule-x/drag-and-drop": "^2.19.0",
                 "@schedule-x/events-service": "^2.19.0",
@@ -1496,6 +1498,60 @@
                 }
             }
         },
+        "node_modules/@radix-ui/react-toggle": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle/-/react-toggle-1.1.2.tgz",
+            "integrity": "sha512-lntKchNWx3aCHuWKiDY+8WudiegQvBpDRAYL8dKLRvKEH8VOpl0XX6SSU/bUBqIRJbcTy4+MW06Wv8vgp10rzQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/primitive": "1.1.1",
+                "@radix-ui/react-primitive": "2.0.2",
+                "@radix-ui/react-use-controllable-state": "1.1.0"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-toggle-group": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle-group/-/react-toggle-group-1.1.2.tgz",
+            "integrity": "sha512-JBm6s6aVG/nwuY5eadhU2zDi/IwYS0sDM5ZWb4nymv/hn3hZdkw+gENn0LP4iY1yCd7+bgJaCwueMYJIU3vk4A==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/primitive": "1.1.1",
+                "@radix-ui/react-context": "1.1.1",
+                "@radix-ui/react-direction": "1.1.0",
+                "@radix-ui/react-primitive": "2.0.2",
+                "@radix-ui/react-roving-focus": "1.1.2",
+                "@radix-ui/react-toggle": "1.1.2",
+                "@radix-ui/react-use-controllable-state": "1.1.0"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/@radix-ui/react-tooltip": {
             "version": "1.1.8",
             "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.1.8.tgz",
diff --git a/package.json b/package.json
index 47c9fc4..3da4ae9 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,8 @@
         "@radix-ui/react-slot": "^1.1.2",
         "@radix-ui/react-tabs": "^1.1.3",
         "@radix-ui/react-toast": "^1.2.6",
+        "@radix-ui/react-toggle": "^1.1.2",
+        "@radix-ui/react-toggle-group": "^1.1.2",
         "@radix-ui/react-tooltip": "^1.1.8",
         "@schedule-x/drag-and-drop": "^2.19.0",
         "@schedule-x/events-service": "^2.19.0",
diff --git a/src/app/calendar/postDialog.tsx b/src/app/calendar/postDialog.tsx
index 6fe573f..17ce63f 100644
--- a/src/app/calendar/postDialog.tsx
+++ b/src/app/calendar/postDialog.tsx
@@ -23,10 +23,17 @@ import TimeSelect from './timeSelect';
 import { CalendarEventExternal } from '@schedule-x/calendar';
 import { Textarea } from '@/components/ui/textarea';
 import { Label } from '@/components/ui/label';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import axios from 'axios';
-import { DATE_FORMAT, PostRequest, ScheduleRequest } from '@/lib/types';
+import {
+    DATE_FORMAT,
+    PlatformKind,
+    PostRequest,
+    ScheduleRequest,
+    UserPlatforms,
+} from '@/lib/types';
 import { CalendarSchedule, Event } from './calendar';
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
 
 type PostDialogProps = {
     newPostDialogOpen: boolean;
@@ -47,6 +54,21 @@ export default function PostDialog({
     addEvents: addEvent,
 }: PostDialogProps) {
     const [content, setContent] = useState('');
+    const [platforms, setPlatforms] = useState<UserPlatforms>({});
+
+    const [selectedPlatforms, setSelectedPlatforms] = useState<Set<string>>(
+        new Set()
+    );
+
+    useEffect(() => {
+        axios
+            .get('/api/platforms', {
+                withCredentials: true,
+            })
+            .then((res) => {
+                setPlatforms(res.data.platforms);
+            });
+    }, []);
 
     return (
         <Dialog open={newPostDialogOpen} onOpenChange={setNewPostDialogOpen}>
@@ -103,6 +125,38 @@ export default function PostDialog({
                     />
                 </div>
 
+                <div className="grid w-full gap-1.5">
+                    <Label htmlFor="message">Platforms</Label>
+                    <ToggleGroup
+                        type="multiple"
+                        className="flex flex-wrap gap-2"
+                    >
+                        {Object.entries(platforms).map(([name, platform]) => (
+                            <ToggleGroupItem
+                                key={platform.platform + platform.icon}
+                                value={platform.icon + platform.platform}
+                                className="w-14 h-12"
+                                onClick={() => {
+                                    setSelectedPlatforms((prev) => {
+                                        const newSet = new Set(prev);
+                                        if (newSet.has(name)) {
+                                            newSet.delete(name); // Toggle off
+                                        } else {
+                                            newSet.add(name); // Toggle on
+                                        }
+                                        return newSet;
+                                    });
+                                }}
+                            >
+                                <img
+                                    src={platform.icon}
+                                    className="w-10 h-10 rounded-full"
+                                />
+                            </ToggleGroupItem>
+                        ))}
+                    </ToggleGroup>
+                </div>
+
                 <div className="grid w-full gap-1.5">
                     <Label htmlFor="message">Content</Label>
                     <Textarea
@@ -125,7 +179,7 @@ export default function PostDialog({
                             axios.post(
                                 '/api/posts',
                                 {
-                                    platforms: ['andjksds'],
+                                    platforms: Array.from(selectedPlatforms),
                                     content,
                                 } satisfies PostRequest,
                                 {
@@ -144,7 +198,7 @@ export default function PostDialog({
                                 '/api/posts',
                                 {
                                     scheduled: format(date, DATE_FORMAT),
-                                    platforms: ['andjksds'],
+                                    platforms: Array.from(selectedPlatforms),
                                     content,
                                 } satisfies ScheduleRequest,
                                 {
diff --git a/src/lib/types.ts b/src/lib/types.ts
index db9e1ad..2603f34 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -27,7 +27,9 @@ export interface Platform {
     secret: string;
 }
 
-export type Platforms = { [key: string]: Platform };
+export interface Platforms {
+    [key: string]: Platform;
+}
 
 export interface User {
     name: string;
@@ -48,4 +50,8 @@ export interface Schedule extends Post {
 
 export type Session = { user: string };
 
+export interface UserPlatforms {
+    [key: string]: Platform & { icon: string };
+}
+
 export const DATE_FORMAT = 'y-MM-dd hh:mm';