Added twitch instead of facebook. User premium status improved

mohsen-ameli · Jun 11, 2023 · 706e2fa · 706e2fa · vercel · Jun 11, 2023
1 parent d5fbfa4
commit 706e2fa
Show file tree

Hide file tree

Showing 19 changed files with 154 additions and 77 deletions.
diff --git a/backend/users/migrations/0014_alter_customuser_provider.py b/backend/users/migrations/0014_alter_customuser_provider.py
@@ -0,0 +1,18 @@
+# Generated by Django 4.1.4 on 2023-06-11 00:39
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('users', '0013_alter_customuser_id'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='customuser',
+            name='provider',
+            field=models.CharField(blank=True, choices=[('credentials', 'credentials'), ('discord', 'discord'), ('google', 'google'), ('twitter', 'twitter')], default='credentials', max_length=11),
+        ),
+    ]
diff --git a/backend/users/migrations/0015_alter_customuser_provider.py b/backend/users/migrations/0015_alter_customuser_provider.py
@@ -0,0 +1,18 @@
+# Generated by Django 4.1.4 on 2023-06-11 20:49
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('users', '0014_alter_customuser_provider'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='customuser',
+            name='provider',
+            field=models.CharField(blank=True, choices=[('credentials', 'credentials'), ('discord', 'discord'), ('google', 'google'), ('twitch', 'twitch')], default='credentials', max_length=11),
+        ),
+    ]
diff --git a/backend/users/models.py b/backend/users/models.py
@@ -7,7 +7,9 @@
 
 PROVIDERS = [
     ("credentials", "credentials"),
-    ("discord", "discord")
+    ("discord", "discord"),
+    ("google", "google"),
+    ("twitch", "twitch")
 ]
 
 '''

diff --git a/frontend/.vscode/settings.json b/frontend/.vscode/settings.json
@@ -13,6 +13,33 @@
   "typescript.tsdk": "node_modules/typescript/lib",
   "typescript.enablePromptUseWorkspaceTsdk": true,
   "files.exclude": {
+    "**/.git": false,
+    "**/.svn": false,
+    "**/.hg": false,
+    "**/CVS": false,
+    "**/.DS_Store": false,
+    "**/Thumbs.db": false,
+    ".vscode": false,
+    ".next": false,
+    "node_modules": false,
+    "tsconfig.json": false,
+    "yarn.lock": false,
+    "sandbox.config.json": false,
+    "README.md": false,
+    "postcss.config.js": false,
+    "next-env.d.ts": false,
+    "LICENSE": false,
+    ".prettierrc": false,
+    ".prettierignore": false,
+    ".gitignore": false,
+    ".eslintrc": false,
+    ".eslintignore": false,
+    ".editorconfig": false,
+    "tailwind.config.js": false,
+    "towebp.sh": false,
+    "next.config.js": false
+  },
+  "explorerExclude.backup": {
     "**/.git": true,
     "**/.svn": true,
     "**/.hg": true,
@@ -39,7 +66,6 @@
     "towebp.sh": true,
     "next.config.js": true
   },
-  "explorerExclude.backup": {},
   "peacock.remoteColor": "#61dafb",
   "workbench.colorCustomizations": {
     "activityBar.activeBackground": "#93e6fc",

diff --git a/frontend/app/api/auth/[...nextauth]/route.ts b/frontend/app/api/auth/[...nextauth]/route.ts
@@ -1,5 +1,5 @@
 import NextAuth, { AuthOptions } from "next-auth"
-import FacebookProvider from "next-auth/providers/facebook"
+import TwitchProvider from "next-auth/providers/twitch"
 import DiscordProvider from "next-auth/providers/discord"
 import GoogleProvider from "next-auth/providers/google"
 import CredentialsProvider from "next-auth/providers/credentials"
@@ -20,9 +20,9 @@ const discordProvider = DiscordProvider({
   },
 })
 
-const facebookProvider = FacebookProvider({
-  clientId: process.env.FACEBOOK_CLIENT_ID!,
-  clientSecret: process.env.FACEBOOK_CLIENT_SECRET!,
+const twitterProvider = TwitchProvider({
+  clientId: process.env.TWITCH_CLIENT_ID!,
+  clientSecret: process.env.TWITCH_CLIENT_SECRET!,
 })
 
 const googleProvider = GoogleProvider({
@@ -64,7 +64,7 @@ const credentialsProvider = CredentialsProvider({
 })
 
 export const authOptions: AuthOptions = {
-  providers: [discordProvider, facebookProvider, googleProvider, credentialsProvider],
+  providers: [discordProvider, twitterProvider, googleProvider, credentialsProvider],
   pages: { signIn: "/signin", error: "/signin" },
   callbacks: {
     async signIn({ user, account }) {
@@ -103,7 +103,10 @@ export const authOptions: AuthOptions = {
 
       return data.valid
     },
-    async jwt({ token, user, account }) {
+    async jwt({ token, user, account, trigger, session }) {
+      if (trigger === "update") {
+        return { ...token, ...session.user, provider: account?.provider }
+      }
       return { ...token, ...user, provider: account?.provider }
     },
     async session({ session, token }) {

diff --git a/frontend/app/friends/chat/page.tsx b/frontend/app/friends/chat/page.tsx
@@ -70,7 +70,7 @@ export default function Chat() {
     else validateChat()
 
     const url = `${getServerUrl(false)}/ws/chat/${uuid}/`
-    setWs(new WebSocket(url))
+    setWs(() => new WebSocket(url))
   }, [session, ws, axiosInstance])
 
   // Web Socket listeners

diff --git a/frontend/app/game/[uuid]/page.tsx b/frontend/app/game/[uuid]/page.tsx
@@ -7,7 +7,7 @@ import getServerUrl from "@/components/utils/getServerUrl"
 import { useGameStore } from "@/game/store/useGameStore"
 import { GameDataTypes } from "@/game/types/Game.type"
 import switchPlayers from "@/game/utils/SwitchPlayers"
-import { useSession } from "next-auth/react"
+import { getSession } from "next-auth/react"
 import { useRouter } from "next/navigation"
 import { useEffect, useState } from "react"
 
@@ -26,7 +26,6 @@ export default function FriendGame({ params }: { params: { uuid: string } }) {
   )
 
   const router = useRouter()
-  const { data: session } = useSession()
   const [fetched, setFetched] = useState(false)
 
   // Setting websocket listeners
@@ -42,7 +41,7 @@ export default function FriendGame({ params }: { params: { uuid: string } }) {
 
   useEffect(() => {
     fetchStuff()
-  }, [session])
+  }, [])
 
   useEffect(() => {
     useGameStore.getState().resetOrbit?.("board", true)
@@ -58,7 +57,8 @@ export default function FriendGame({ params }: { params: { uuid: string } }) {
   }, [])
 
   // Backend has sent game updates
-  function onMessage(e: MessageEvent) {
+  async function onMessage(e: MessageEvent) {
+    const session = await getSession()
     const data: GameDataTypes = JSON.parse(e.data)
     const id = Number(session?.user.id)
 
@@ -194,9 +194,10 @@ export default function FriendGame({ params }: { params: { uuid: string } }) {
   }
 
   async function fetchStuff() {
-    if (!session || fetched) return
+    if (fetched) return
 
-    const axiosInstance = AxiosInstance(session)
+    const session = await getSession()
+    const axiosInstance = AxiosInstance(session!)
     const { data }: DataType = await axiosInstance.get(`/api/game/valid-match/${params.uuid}/`)
 
     if (!data.valid) {

diff --git a/frontend/app/signin/page.tsx b/frontend/app/signin/page.tsx
@@ -37,7 +37,7 @@ export default function SigninPage() {
         <div className="flex justify-between gap-x-4">
           <ProviderIcon name="discord" iconOnly={true} />
           <ProviderIcon name="google" iconOnly={true} />
-          <ProviderIcon name="facebook" iconOnly={true} />
+          <ProviderIcon name="twitch" iconOnly={true} />
         </div>
       </div>
     </>

diff --git a/frontend/app/signup/page.tsx b/frontend/app/signup/page.tsx
@@ -22,7 +22,7 @@ export default function Signup() {
         <div className="flex flex-col gap-4 pb-4">
           <ProviderIcon name="discord" />
           <ProviderIcon name="google" />
-          <ProviderIcon name="facebook" />
+          <ProviderIcon name="twitch" />
         </div>
       </div>
     </>

diff --git a/frontend/next.config.js b/frontend/next.config.js
@@ -34,6 +34,10 @@ const nextConfig = {
         protocol: "https",
         hostname: "lh3.googleusercontent.com",
       },
+      {
+        protocol: "https",
+        hostname: "static-cdn.jtvnw.net",
+      },
     ],
   },
   webpack(config, { isServer }) {

diff --git a/frontend/src/components/hooks/useStatus.ts b/frontend/src/components/hooks/useStatus.ts
@@ -4,10 +4,11 @@ import { BaseUser } from "@/types/User.type"
 import { useEffect, useRef, useState } from "react"
 import notification from "../utils/Notification"
 import AxiosInstance from "../utils/AxiosInstance"
-import { useSession } from "next-auth/react"
+import { getSession, useSession } from "next-auth/react"
 import { useRouter } from "next/navigation"
 import { useGameStore } from "@/game/store/useGameStore"
 import getServerUrl from "../utils/getServerUrl"
+import axios from "axios"
 
 type DataType = {
   live_game?: string
@@ -16,9 +17,8 @@ type DataType = {
 
 export default function useStatus() {
   const inGame = useGameStore(state => state.inGame)
-
   const router = useRouter()
-  const { data: session } = useSession()
+  const { data: session, update } = useSession()
   const axiosInstance = AxiosInstance(session!)
 
   const [ws, setWs] = useState<WebSocket | null>(null)
@@ -27,13 +27,15 @@ export default function useStatus() {
   const showReqNotif = useRef(true)
   const showRejNotif = useRef(true)
 
+  // Starting a websocket connection
   useEffect(() => {
     if (!session || ws) return
 
     const url = `${getServerUrl(false)}/ws/status/${session.user.id}/`
     setWs(() => new WebSocket(url))
   }, [session])
 
+  // Setting up websocket event listeners
   useEffect(() => {
     if (!ws || inGame) return
 
@@ -49,6 +51,18 @@ export default function useStatus() {
     }
   }, [ws, inGame])
 
+  useEffect(() => {
+    isUserPremium()
+  }, [])
+
+  // Updating the premium status of the current user
+  async function isUserPremium() {
+    const session = await getSession()
+    if (!session) return
+    const { data }: { data: boolean } = await axios.get("/api/stripe")
+    await update({ ...session, user: { ...session?.user, premium: data } })
+  }
+
   // Accepting a game request
   async function accept(id: number) {
     const res = await axiosInstance.put("/api/game/handle-match-request/", {
@@ -64,7 +78,7 @@ export default function useStatus() {
     router.push(`/game/${data.game_id}`)
   }
 
-  // Rejecting the game request
+  // Rejecting a game request
   async function reject(id: number) {
     const res = await axiosInstance.put("/api/game/handle-match-request/", {
       action: "reject",
@@ -78,7 +92,7 @@ export default function useStatus() {
     showReqNotif.current = true
   }
 
-  // Handling updates coming from the backend
+  // Handling incoming updates from the backend
   function onMessage(e: MessageEvent) {
     const data: DataType = JSON.parse(e.data)
 

diff --git a/frontend/src/components/ui/Button.tsx b/frontend/src/components/ui/Button.tsx
@@ -3,22 +3,33 @@
 import { ButtonHTMLAttributes, useState } from "react"
 import { twMerge } from "tailwind-merge"
 
-type InputProps = ButtonHTMLAttributes<HTMLButtonElement>
+type InputProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  filled?: boolean
+}
 
 /**
  * A button that has a somewhat cool hover effect
  */
 const clickAudio = typeof Audio !== "undefined" ? new Audio("/sounds/button-click.mp3") : null
 
 export default function Button(props: InputProps) {
-  const { className, onClick, children, disabled, ...rest } = props
+  const { className, onClick, children, disabled, filled, ...rest } = props
 
-  const c = twMerge(
+  const buttonClassName = twMerge(
     `group relative h-10 rounded-lg border-2 border-orange-800 px-4 outline-none ${
       disabled && "cursor-not-allowed"
     } ${className}`,
   )
 
+  let bgClassName
+
+  if (!filled) {
+    bgClassName = twMerge(`absolute inset-0 z-10 rounded-md bg-gradient-to-b from-red-500 to-orange-500 opacity-0 transition duration-75 ${disabled ? "" : "group-hover:opacity-100"}`)
+  } else {
+    bgClassName = twMerge(`absolute inset-0 z-10 rounded-md bg-gradient-to-b from-red-500 to-orange-500 transition duration-75 ${disabled ? "" : "group-hover:ease-in-out group-hover:from-red-700 group-hover:to-orange-700"}`)
+  }
+
+
   const [click] = useState(() => clickAudio)
 
   function handleClick(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
@@ -28,14 +39,9 @@ export default function Button(props: InputProps) {
   }
 
   return (
-    <button type="submit" className={c} onClick={handleClick} {...rest}>
+    <button type="submit" className={buttonClassName} onClick={handleClick} {...rest}>
       <div className="relative z-20">{children}</div>
-      <div
-        className={`absolute inset-0 z-10 rounded-md bg-gradient-to-b from-red-500 to-orange-500 opacity-0 transition duration-200 ${
-          disabled ? "" : "group-hover:opacity-100"
-        }
-      `}
-      ></div>
+      <div className={bgClassName} />
     </button>
   )
 }

diff --git a/frontend/src/components/ui/ProviderButton.tsx b/frontend/src/components/ui/ProviderButton.tsx
@@ -2,8 +2,7 @@
 
 import toCapitalize from "@/components/utils/ToCapitalize"
 import { ProvidersType } from "@/types/User.type"
-import { IconProp } from "@fortawesome/fontawesome-svg-core"
-import { faFacebook, faGoogle } from "@fortawesome/free-brands-svg-icons"
+import { faTwitch, faGoogle } from "@fortawesome/free-brands-svg-icons"
 import { faDiscord } from "@fortawesome/free-brands-svg-icons/faDiscord"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { signIn } from "next-auth/react"
@@ -15,14 +14,14 @@ export default function ProviderIcon({ name, iconOnly = false }: { name: Provide
 
   let className =
     "w-full group relative h-10 rounded-lg border-2 px-4 outline-none duration-100 hover:text-white hover:ease-in-out "
-  let icon = faFacebook
+  let icon = faTwitch
 
   if (name === "discord") {
     className += "border-[#7289da] hover:bg-[#7289da]"
     icon = faDiscord
-  } else if (name === "facebook") {
-    className += "border-[#3b5998] hover:bg-[#3b5998]"
-    icon = faFacebook
+  } else if (name === "twitch") {
+    className += "border-[#6441a5] hover:bg-[#6441a5]"
+    icon = faTwitch
   } else if (name === "google") {
     className += "border-[#4285F4] hover:bg-[#4285F4]"
     icon = faGoogle