Skip to content

Commit

Permalink
Implement logic for spotify widget
Browse files Browse the repository at this point in the history
  • Loading branch information
@bartosz-skejcik
bartosz-skejcik committed Jan 9, 2024
1 parent dbcaf75 commit ff01e7f
Show file tree
Hide file tree
Showing 6 changed files with 581 additions and 67 deletions.
59 changes: 43 additions & 16 deletions components/modals/account/new-connection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,16 @@ import { FormEvent } from "react";
type Props = {
open: boolean;
setOpen: (open: boolean) => void;
provider: "github" | "atlassian";
provider: "github" | "atlassian" | "spotify";
};

export function NewConnectionModal({ open, setOpen, provider }: Props) {
const { toast } = useToast();

const addConnection = useUserPreferences((state) => state.addConnection);
const generateClientStateHash = useUserPreferences(
(state) => state.generateClientStateHash
);

function handleAddConnection(e: FormEvent<HTMLFormElement>) {
e.preventDefault();
Expand All @@ -36,21 +39,34 @@ export function NewConnectionModal({ open, setOpen, provider }: Props) {
// const organizationDomain = formData.get(
// "organization-domain"
// ) as string;

const email = e.currentTarget.email.value;
const apikey = e.currentTarget.apikey.value;
const organizationDomain = e.currentTarget["organization-domain"].value;

try {
if (email !== "" && apikey !== "") {
if (email !== "") {
if (provider === "github") {
const apikey = e.currentTarget.apikey.value;

if (apikey === "") {
throw new Error("Invalid data");
}

addConnection({
email,
apiKey: apikey,
name:
provider.charAt(0).toUpperCase() +
provider.slice(1),
});
} else if (provider === "atlassian" && organizationDomain) {
} else if (provider === "atlassian") {
const organizationDomain =
e.currentTarget["organization-domain"].value;
const apikey = e.currentTarget.apikey.value;

if (organizationDomain === "" || apikey === "") {
throw new Error("Invalid data");
}

addConnection({
email,
apiKey: apikey,
Expand All @@ -59,6 +75,15 @@ export function NewConnectionModal({ open, setOpen, provider }: Props) {
provider.slice(1),
organizationDomain,
});
} else if (provider === "spotify") {
const hash = generateClientStateHash();
addConnection({
email,
stateHash: hash,
name:
provider.charAt(0).toUpperCase() +
provider.slice(1),
});
} else {
throw new Error("Invalid provider");
}
Expand Down Expand Up @@ -133,17 +158,19 @@ export function NewConnectionModal({ open, setOpen, provider }: Props) {
className="col-span-3"
/>
</div>
<div className="grid items-center grid-cols-4 gap-4">
<Label htmlFor="apikey" className="text-right">
apiKey
</Label>
<Input
id="apikey"
type="text"
placeholder="sdSDFgshdo2134oheqfSfsfauhio13"
className="col-span-3"
/>
</div>
{provider !== "spotify" && (
<div className="grid items-center grid-cols-4 gap-4">
<Label htmlFor="apikey" className="text-right">
apiKey
</Label>
<Input
id="apikey"
type="text"
placeholder="sdSDFgshdo2134oheqfSfsfauhio13"
className="col-span-3"
/>
</div>
)}
<DialogFooter>
<Button type="submit">Add</Button>
</DialogFooter>
Expand Down
45 changes: 41 additions & 4 deletions components/modals/account/table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,15 @@ import {
TableRow,
} from "@/components/ui/table";
import { useUserPreferences } from "@/stores/user-preferences";
import { ChevronDown, Github, Trash, Trello } from "lucide-react";
import { ChevronDown, Github, Music, Trash, Trello } from "lucide-react";

import Image from "next/image";

type Props = {
table: any;
setNewConnectionModalOpen: (prov: "github" | "atlassian") => void;
setNewConnectionModalOpen: (
prov: "github" | "atlassian" | "spotify"
) => void;
};

function ConnectionsTable({ table, setNewConnectionModalOpen }: Props) {
Expand All @@ -49,21 +51,32 @@ function ConnectionsTable({ table, setNewConnectionModalOpen }: Props) {
size={24}
className="w-[1rem] h-[1rem] pt-1"
/>
) : (
) : row.name == "Atlassian" ? (
<Image
src="https://cdn4.iconfinder.com/data/icons/logos-and-brands/512/30_Atlassian_logo_logos-512.png"
width={14}
height={14}
alt="Atlassian"
/>
) : (
<Image
src="https://cdn0.iconfinder.com/data/icons/social-media-2474/128/spotify_interface_media_social_logo-256.png"
width={14}
height={14}
alt="Spotify"
/>
)}
<span>{row.name}</span>
</TableCell>
<TableCell className="pb-3">{row.email}</TableCell>
<TableCell className="flex items-center justify-end gap-5 text-right">
{/* show the apikey fist 4 characters and the rest are ...... */}
<span>
{row.apiKey.slice(0, 8) + " • • • • • • • •"}
{row.apiKey &&
row.apiKey.slice(0, 8) + " • • • • • • • •"}
{row.stateHash &&
row.stateHash.slice(0, 8) +
" • • • • • • • •"}
</span>
<Button
onClick={() => {
Expand Down Expand Up @@ -114,6 +127,30 @@ function ConnectionsTable({ table, setNewConnectionModalOpen }: Props) {
<p>Atlassian</p>
</button>
</DropdownMenuItem>
<DropdownMenuItem
asChild
disabled={
!!connections.find(
(connection) =>
connection.name === "Spotify"
)
}
>
<button
onClick={() => {
setNewConnectionModalOpen(
"spotify"
);
}}
className="flex items-center justify-start w-full gap-2 cursor-pointer text-start"
>
<Music
size={24}
className="w-[1rem] h-[1rem]"
/>
<p>Spotify</p>
</button>
</DropdownMenuItem>
<DropdownMenuItem
asChild
// disabled={
Expand Down
Loading

0 comments on commit ff01e7f

Please sign in to comment.