new sidebar and functionality to it, fixed problems with the style/cleanup #20

2024-01-03T08:44:41-05:00

catxrin commented

2024-01-03 08:44:41 -05:00

(Migrated from github.com)

No description provided.

GameBear64 (Migrated from github.com) requested changes

2024-01-03 09:21:32 -05:00

GameBear64 (Migrated from github.com) left a comment

I want some changes but most are general questions, please write your replies.

src/components/Form/FormInputs/MediaSelect.jsx

					
				@ -19,16 +20,12 @@ export default function MediaSelect({ name, rules = {}, styles, label, ...rest }

				                  alt=""

Edit does nothing, please comment out

src/components/Icon.jsx

					
				@ -0,0 +1,7 @@

				export default function Icon({ icon, styles, ...rest }) {

can you pass {...rest} here so we dont have action we can just pass it onClick, onHover and whatever else we could need? Also fix all icons like that

can you pass `{...rest}` here so we dont have action we can just pass it onClick, onHover and whatever else we could need? Also fix all icons like that

src/components/NavBar/NavBar.jsx

ignored

src/views/ChatList/ChatList.m.jsx

					
				@ -0,0 +76,4 @@

				          </progress>

				          {(image?.mimetype?.includes('image') || image?.mimetype?.includes('video')) && image?.key && (

				            <img src={`http://localhost:3030/recourse/${image?.key}?size=250`} />

				          )}

Have you checked the console? React sometimes throws errors when there is no alt element, even if its empty

src/views/Contacts/ContactsList.jsx

					
				@ -0,0 +20,4 @@

				        placeholder="Search"

				      />

				      {children}

Is there a way to avoid this?

src/views/Contacts/slice/Pending.jsx

					
				@ -0,0 +1,41 @@

				import { useState } from 'react';

Lets avoid inline ternaries and lets keep consistent with the rest of the code, see how its done at https://github.com/GameBear64/AmberCamp/pull/20/files#diff-85cac127b49b831531147573ef689fc5965cf32fa1dd9c2d1a5bed6d7c99f559R48-R52

    {pendingType === ContactType.Incoming && <ContactsList list={incoming} type="pending">{btns()}</ContactsList>}
   	{pendingType === ContactType.Outgoing && <ContactsList list={outgoing} type="pending">{btns()} </ContactsList>}

Lets avoid inline ternaries and lets keep consistent with the rest of the code, see how its done at https://github.com/GameBear64/AmberCamp/pull/20/files#diff-85cac127b49b831531147573ef689fc5965cf32fa1dd9c2d1a5bed6d7c99f559R48-R52 ```suggestion {pendingType === ContactType.Incoming && <ContactsList list={incoming} type="pending">{btns()}</ContactsList>} {pendingType === ContactType.Outgoing && <ContactsList list={outgoing} type="pending">{btns()} </ContactsList>} ```

src/views/Contacts/slice/Pending.jsx

					
				@ -0,0 +7,4 @@

				export default function Pending({ incoming, outgoing, type }) {

				  const [pendingType, setPendingType] = useState(type);

				  const btns = () => (

Lets take this out to a seperate component

src/views/Profile/Profile.jsx

					
				@ -0,0 +1,99 @@

				import { useEffect, useState } from 'react';

Where did "updateDescription" go? Well whatever you can put it back but inside the component since thats the only place its used

src/views/Profile/Profile.m.jsx

					
				@ -0,0 +75,4 @@

				            backgroundImage: userInfo?.background ? `url('http://localhost:3030/recourse/${userInfo?.background}')` : '',

				          }}>

				          <section className="relative mx-4 flex flex-row pt-28 ">

				            <div className="relative mx-2.5 inline-block h-44 overflow-hidden rounded-[50%] border-4 border-solid border-white shadow-md">

Does this return undefined or does it throw an error when userInfo?.createdAt is missing

Does this return undefined or does it throw an error when `userInfo?.createdAt` is missing

src/views/Profile/slices/FriendshipButtons.jsx

					
				@ -0,0 +61,4 @@

				      <div className="float-left mb-4 flex w-full flex-wrap gap-2 font-semibold ">

				        {userInfo.status == 'Strangers' && (

				          <button className="btn-blue" onClick={add}>

				            Add friend

Oh no.. I hope we dont end up with 27 duferent button color classes

src/views/Profile/slices/NotesSection.jsx

					
				@ -0,0 +12,4 @@

				import { getUser } from './endpoints';

				export default function NotesSection({ id, userInfo, setUserInfo }) {

				  const [editNote, setEditNote] = useState('');

refetch seemed ok, that way we dont pass around setUserInfo, also are we certain we only do setUserInfo after we get the user?

refetch seemed ok, that way we dont pass around `setUserInfo`, also are we certain we only do setUserInfo after we get the user?

catxrin (Migrated from github.com) reviewed

2024-01-03 09:27:47 -05:00

src/views/Profile/Profile.m.jsx

					
				@ -0,0 +75,4 @@

				            backgroundImage: userInfo?.background ? `url('http://localhost:3030/recourse/${userInfo?.background}')` : '',

				          }}>

				          <section className="relative mx-4 flex flex-row pt-28 ">

				            <div className="relative mx-2.5 inline-block h-44 overflow-hidden rounded-[50%] border-4 border-solid border-white shadow-md">

this will be fixed later, when i start to work on the mobile version. Please, ignore it for now.

catxrin (Migrated from github.com) reviewed

2024-01-03 09:28:41 -05:00

src/views/Profile/slices/NotesSection.jsx

					
				@ -0,0 +12,4 @@

				import { getUser } from './endpoints';

				export default function NotesSection({ id, userInfo, setUserInfo }) {

				  const [editNote, setEditNote] = useState('');

refetch didn't work, that's why i had to do it this way.

catxrin (Migrated from github.com) reviewed

2024-01-03 09:30:58 -05:00

src/views/ChatList/ChatList.m.jsx

					
				@ -0,0 +76,4 @@

				          </progress>

				          {(image?.mimetype?.includes('image') || image?.mimetype?.includes('video')) && image?.key && (

				            <img src={`http://localhost:3030/recourse/${image?.key}?size=250`} />

				          )}

No errors here, i'll put it back.

GameBear64 (Migrated from github.com) reviewed

2024-01-03 14:00:48 -05:00

src/views/ChatList/ChatList.m.jsx

					
				@ -0,0 +76,4 @@

				          </progress>

				          {(image?.mimetype?.includes('image') || image?.mimetype?.includes('video')) && image?.key && (

				            <img src={`http://localhost:3030/recourse/${image?.key}?size=250`} />

				          )}

if no errors, no neec to put it back, thanks for checking

GameBear64 (Migrated from github.com) approved these changes

2024-01-05 08:02:47 -05:00

GameBear64 (Migrated from github.com) left a comment

Good job

Sign in to join this conversation.

No reviewers

GameBear64

No labels

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

GamBar/AmberCamp!20

				`@ -19,16 +20,12 @@ export default function MediaSelect({ name, rules = {}, styles, label, ...rest }`
				`alt=""`

				`@ -0,0 +1,7 @@`
				`export default function Icon({ icon, styles, ...rest }) {`

				`@ -0,0 +1,99 @@`
				`import { useEffect, useState } from 'react';`

Rows
Columns