Skip to content

styling chatroom and chats #64

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.

Sign up for GitHub

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
ROXBOZ wants to merge 2 commits into
base: cobalt-kangaroos-integration
Choose a base branch
from
Open

styling chatroom and chats #64

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ad69839
styling chatroom and chats
ROXBOZ Jun 30, 2023
dcca00e
fixed navigation to main chat
ROXBOZ Jun 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions apps/codac-quasseln/src/components/main-layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,6 @@ import Auth from "./auth";

function MainLayout({ children }: { children: ReactNode }) {
return (


<DashboardLayout
navigation={
<GlobalNav
Expand Down
18 changes: 11 additions & 7 deletions apps/codac-quasseln/src/components/navigation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,22 @@ import { navigation } from "#/constants/navigation";

const Navigation = () => {
return (
<div className="space-y-10 text-white">
{navigation.map((section) => {
<div className="go-to-chat-container">
<Link className="go-to-chat" href="/main-chat">
<svg className="icon" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512">
<path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z" />
</svg>
<span>Go to main chat</span>
</Link>
{/* FOLLOWING NAVIGATION TOTALLY REDUNDANT AND UNNECESSARY ??? */}
{/* {navigation.map((section) => {
return (
<div key={section.name} className="space-y-5">
<div className="text-xs font-semibold uppercase tracking-wider text-gray-400">
{section.name}
</div>

<div
style={{ border: "5px solid green" }}
className="grid grid-cols-1 gap-5 lg:grid-cols-2"
>
<div className="grid grid-cols-1 gap-5 lg:grid-cols-2">
{section.items.map((item) => {
return (
<Link
Expand All @@ -39,7 +43,7 @@ const Navigation = () => {
</div>
</div>
);
})}
})} */}
</div>
);
};
Expand Down
577 changes: 196 additions & 381 deletions apps/codac-quasseln/src/pages/main-chat/[chatId].tsx
View file
Open in desktop

Large diffs are not rendered by default.

113 changes: 54 additions & 59 deletions apps/codac-quasseln/src/pages/main-chat/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,37 +1,36 @@
import { useAuth } from '#/contexts/authContext';
import { useAuth } from "#/contexts/authContext";

import React, { useEffect, useState } from 'react'
import React, { useEffect, useState } from "react";
import { gql, useQuery } from "@apollo/client";
import Link from 'next/link';
import { useSocket } from '#/contexts/socketContext';
import { Enum_Componentleadlifecycle_State } from 'codac-graphql-types';


import Link from "next/link";
import { useSocket } from "#/contexts/socketContext";
import { Enum_Componentleadlifecycle_State } from "codac-graphql-types";

const GetAllChats = gql`
query getAllChats {
chatrooms {
data {
id
attributes {
name
createdAt
users_permissions_users {
data {
id
attributes {
username
avatar {
data {
attributes {
url
query getAllChats {
chatrooms {
data {
id
attributes {
name
createdAt
users_permissions_users {
data {
id
attributes {
username
avatar {
data {
attributes {
url
}
}
}
}
role {
data {
attributes {
name
role {
data {
attributes {
name
}
}
}
}
Expand All @@ -41,15 +40,14 @@ query getAllChats {
}
}
}
}
`;

type Props = {}
type Props = {};

const ChrisChat = (props: Props) => {
const { data, error, loading } = useQuery(GetAllChats);
const { user } = useAuth();
console.log('user :>> ', user);
console.log("user :>> ", user);

// do I need this connected state???
const [connected, setConnected] = useState(false);
Expand All @@ -59,45 +57,42 @@ const ChrisChat = (props: Props) => {
if (socket) {
setConnected(true);
} else {
setConnected(false)
setConnected(false);
}
}, [socket]);
console.log('socket :>> ', socket);

console.log('user :>> ', user);
console.log('data from chris query :>> ', data);
console.log("socket :>> ", socket);
console.log("user :>> ", user);
console.log("data from chris query :>> ", data);

return (
<>
<div className='space-y-6' >
<div className='text-lg font-medium text-white'>Chat Rooms</div>
<div >index
<h1 style={{ color: "white" }}>Index For Alls Chatrooms... </h1>
</div>
<div>
{data && data?.chatrooms?.data.map((chat: any) => {
<h1>Chatrooms Access</h1>
<div className="chatroom-access-link-container" k>
{data &&
data?.chatrooms?.data.map((chat: any) => {
return (
<div key={chat.id}
style={{
color: "white",
margin: "6px",
border: "2px solid white",
borderRadius: "5px",
textAlign: "center"
}} >
<div key={chat.id}>
{/* se puede con el nombre?? sería mejor... */}
<Link href={`main-chat/${chat.id}`}>
<p>{chat.attributes.name}</p>
<Link className="chatroom-access-link" href={`main-chat/${chat.id}`}>
<>
<svg
className="icon"
xmlns="http://www.w3.org/2000/svg"
height="1em"
viewBox="0 0 640 512"
>
<path d="M72 88a56 56 0 1 1 112 0A56 56 0 1 1 72 88zM64 245.7C54 256.9 48 271.8 48 288s6 31.1 16 42.3V245.7zm144.4-49.3C178.7 222.7 160 261.2 160 304c0 34.3 12 65.8 32 90.5V416c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V389.2C26.2 371.2 0 332.7 0 288c0-61.9 50.1-112 112-112h32c24 0 46.2 7.5 64.4 20.3zM448 416V394.5c20-24.7 32-56.2 32-90.5c0-42.8-18.7-81.3-48.4-107.7C449.8 183.5 472 176 496 176h32c61.9 0 112 50.1 112 112c0 44.7-26.2 83.2-64 101.2V416c0 17.7-14.3 32-32 32H480c-17.7 0-32-14.3-32-32zm8-328a56 56 0 1 1 112 0A56 56 0 1 1 456 88zM576 245.7v84.7c10-11.3 16-26.1 16-42.3s-6-31.1-16-42.3zM320 32a64 64 0 1 1 0 128 64 64 0 1 1 0-128zM240 304c0 16.2 6 31 16 42.3V261.7c-10 11.3-16 26.1-16 42.3zm144-42.3v84.7c10-11.3 16-26.1 16-42.3s-6-31.1-16-42.3zM448 304c0 44.7-26.2 83.2-64 101.2V448c0 17.7-14.3 32-32 32H288c-17.7 0-32-14.3-32-32V405.2c-37.8-18-64-56.5-64-101.2c0-61.9 50.1-112 112-112h32c61.9 0 112 50.1 112 112z" />
</svg>
<span>{chat.attributes.name}</span>
</>
</Link>
</div>
)
);
})}

</div>

</div>
</>
)
}
);
};

export default ChrisChat
export default ChrisChat;
Loading