selimaj-dev/klayrion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

selectable platform

Browse Source
This commit is contained in:
selimaj-dev
2025-03-04 18:01:04 +01:00
parent 5735dc906d
commit 1f73da7be6
4 changed files with 123 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+56
View File
@@ -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",
package.json
+2
View File
@@ -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",
src/app/calendar/postDialog.tsx
+58 -4
View File
@@ -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,
{
src/lib/types.ts
+7 -1
View File
@@ -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';