Dev #31

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open

Smachy24 wants to merge 145 commits into main from dev

.env.example

Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		PORT=5000
		REACT_APP_API_BASE_URL=http://localhost:3000

.gitignore

-Original file line number
+Diff line change
@@ Expand Up / @@ -13,6 +13,7 @@ @@
     # misc
     .DS_Store
+    .env
     .env.local
     .env.development.local
     .env.test.local
@@ Expand All / @@ -21,3 +22,5 @@ @@
     npm-debug.log*
     yarn-debug.log*
     yarn-error.log*
+    .idea

package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

package.json

-Original file line number
+Diff line change
@@ Expand Up / @@ -10,12 +10,15 @@ @@
         "@types/node": "^16.18.119",
         "@types/react": "^18.3.12",
         "@types/react-dom": "^18.3.1",
+        "lucide-react": "^0.454.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-hook-form": "^7.53.1",
         "react-router-dom": "^6.27.0",
         "react-scripts": "5.0.1",
         "typescript": "^4.9.5",
-        "web-vitals": "^2.1.4"
+        "web-vitals": "^2.1.4",
+        "zustand": "^5.0.1"
       },
       "scripts": {
         "start": "react-scripts start",
@@ Expand Down @@

src/App.tsx

-Original file line number
+Diff line change
@@ -1,10 +1,14 @@
     import { Outlet } from "react-router-dom";
     import Navigation from "./components/navigation";
+    import Notifications from "./components/notifications/notifications.component";
     export default function App() {
       return (
-        <div>
-          <Navigation />
+        <div className="border w-full h-full flex flex-col justify-between">
           <Outlet />
+          <Notifications />
+          <Navigation />
         </div>
       );
     }

src/adapters/message.adapter.ts

-Original file line number
+Diff line change
@@ -0,0 +1,6 @@
+    import Message from "../types/message";
+    export interface MessageAdapter {
+      sendMessage: (message: Message) => Promise<void>;
+      fetchMessages: (receiverId: string) => Promise<Message[]>;
+    }

src/assets/images/block-cursor.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

src/assets/images/normal-cursor.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

src/assets/images/pointer-cursor.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

src/assets/images/text-cursor.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

src/common/error.common.ts

-Original file line number
+Diff line change
@@ -0,0 +1,23 @@
+    export class CommonError extends Error {
+      public statusCode: number;
+      public errorCode: string;
+      public details?: any;
+      constructor(statusCode: number, errorCode: string, message: string, details?: any) {
+        super(message);
+        this.statusCode = statusCode;
+        this.errorCode = errorCode;
+        this.details = details;
+        Object.setPrototypeOf(this, CommonError.prototype);
+      }
+      toJSON() {
+        return {
+          statusCode: this.statusCode,
+          errorCode: this.errorCode,
+          message: this.message,
+          details: this.details || null,
+        };
+      }
+    }

src/components/add-friend.component.tsx

-Original file line number
+Diff line change
@@ -0,0 +1,100 @@
+    import { useUserStore } from "../stores/user.store";
+    import { SubmitHandler, useForm } from "react-hook-form";
+    import { sendFriendRequest } from "../services/friend-request.service";
+    import ShareButton from "./send-invite-link.component";
+    import { useState } from "react";
+    import Button from "./buttons/button";
+    type FormInputs = {
+      content: string;
+    }
+    export default function AddFriend() {
+      const user = useUserStore();
+      const [error, setError] = useState<string | null>(null);
+      const { register, handleSubmit, reset } = useForm({
+        defaultValues: {
+          content: ""
+        }
+      });
+      const onSubmit: SubmitHandler<FormInputs> = async (input) => {
+        try {
+          await sendFriendRequest(input.content);
+          reset();
+        } catch (err) {
+          console.error(err);
+          setError((err as Error).message);
+        }
+      }
+      const sendFriendRequest = async (receiverId: string) => {
+        try {
+          const randomuuid = crypto.randomUUID();
+          const response = await fetch(`${process.env.REACT_APP_API_BASE_URL}/social/friend-request/${randomuuid}`, {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            credentials: 'include',
+            body: JSON.stringify({ receiverId: receiverId }),
+          });
+          if (!response.ok) {
+            const error = await response.json();
+            throw new Error(error.message);
+          }
+        } catch (error) {
+          console.error('Error sending friend request:', error);
+          throw error;
+        }
+      }
+      return (
+        <div>
+          <div>
+            <div className='adress-book-rim'>
+              <div className='adress-book'>
+                <h2 className='smiley'>&#9786;&#9787;</h2>
+                <h1>Adress Book</h1>
+                <div className='friend-code'>
+                  <p className='info-message'>This console's Wii number</p>
+                  <div className='flex items-center'>
+                    <p className=''>{user.id}</p>
+                  </div>
+                </div>
+                <div className="flex flex-row gap-4">
+                  <Button
+                    className="relative right-2 z-10"
+                    variant="primary"
+                    label="Copy"
+                    onClick={() => navigator.clipboard.writeText(user.id)}
+                  />
+                  <ShareButton />
+                </div>
+              </div>
+            </div>
+            <div className='add-friend-form'>
+              <div className='add-friend-form-header'>
+                <p>Wii Number</p>
+              </div>
+              <form onSubmit={handleSubmit(onSubmit)}>
+                <input type="text"
+                  placeholder="Enter a Wii Number" {...register('content', { required: true })} />
+                <Button
+                  className="relative right-2 z-10 mb-2"
+                  variant="primary"
+                  label="send"
+                  type="submit"
+                />
+              </form>
+              {error && <div className="text-red-500">{error}</div>}
+            </div>
+          </div>
+        </div>
+      );
+    }

src/components/buttons/button.tsx

-Original file line number
+Diff line change
@@ -0,0 +1,28 @@
+    interface ButtonProps {
+      label: string;
+      onClick?: (params?: any) => any;
+      type?: "submit" | "button";
+      disabled?: boolean;
+      variant?: "primary" | "secondary" | "tertiary";
+      className?: string;
+    }
+    export default function Button({
+      label,
+      onClick,
+      type = "button",
+      disabled,
+      variant = "primary",
+      className,
+    }: ButtonProps) {
+      return (
+        <button
+          className={`${variant}-btn ${className}`}
+          onClick={onClick}
+          disabled={disabled}
+          type={type}
+        >
+          {label}
+        </button>
+      );
+    }

src/components/buttons/icon.button.tsx

-Original file line number
+Diff line change
@@ -0,0 +1,17 @@
+    interface IconButtonProps {
+      children?: React.ReactNode;
+      onClick: (params?: any) => any;
+      className?: string;
+    }
+    export default function IconButton({
+      children,
+      onClick,
+      className,
+    }: IconButtonProps) {
+      return (
+        <button className={`icon-btn ${className}`} onClick={onClick}>
+          {children ?? children}
+        </button>
+      );
+    }

src/components/cards/friend-placeholder.card.css

-Original file line number
+Diff line change
@@ -0,0 +1,9 @@
+    .friend-card-placeholder {
+      @apply border-4 border-zinc-400 aspect-video rounded-[5%/40%] bg-slate-50 shadow-[inset_0px_-64px_32px_rgba(0,0,0,0.2)] cursor-not-allowed;
+      @apply bg-gradient-to-b from-zinc-300 via-zinc-300 to-zinc-300;
+      @apply bg-[length:7px_7px];
+    }
+    .friend-card-placeholder:hover {
+      cursor: url("../../assets/images/block-cursor.png"), not-allowed;
+    }

src/components/cards/friend-placeholder.card.tsx

-Original file line number
+Diff line change
@@ -0,0 +1,9 @@
+    import "./friend-placeholder.card.css";
+    export default function FriendCardPlaceholder() {
+      return (
+        <div className="friend-card-placeholder flex justify-center items-center text-5xl font-bold select-none">
+          <span className="opacity-10">Wii Chat</span>
+        </div>
+      );
+    }

src/components/cards/friend.card.style.css

-Original file line number
+Diff line change
@@ -0,0 +1,32 @@
+    @layer {
+      .friend-card {
+        @apply flex justify-center items-center font-bold text-2xl uppercase;
+        @apply cursor-pointer border-4 border-zinc-400 aspect-video rounded-[5%/40%] bg-slate-50 shadow-[inset_0px_-64px_32px_rgba(0,0,0,0.2)] hover:scale-105 transition-all duration-300;
+        @apply bg-[length:7px_7px];
+      }
+      .friend-card:hover {
+        cursor: url("../../assets/images/pointer-cursor.png"), not-allowed;
+      }
+    }
+    .friend-card-red {
+      @apply friend-card;
+      @apply text-red-400;
+      @apply border-4 border-red-300 bg-red-50 shadow-[inset_0px_-64px_32px_rgba(255,0,0,0.2)];
+      @apply bg-gradient-to-b from-red-100 via-red-200 to-red-200;
+    }
+    .friend-card-blue {
+      @apply friend-card;
+      @apply text-blue-500;
+      @apply border-4 border-blue-300 bg-blue-50 shadow-[inset_0px_-64px_32px_rgba(0,0,255,0.2)];
+      @apply bg-gradient-to-b from-blue-200 via-blue-200 to-blue-200;
+    }
+    .friend-card-green {
+      @apply friend-card;
+      @apply text-green-500;
+      @apply border-4 border-green-300 bg-green-50 shadow-[inset_0px_-64px_32px_rgba(0,255,0,0.2)];
+      @apply bg-gradient-to-b from-green-200 via-green-200 to-green-200;
+    }

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Dev #31

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!

Dev #31

Are you sure you want to change the base?

Uh oh!

Dev #31

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!