Skip to content
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

Jump to bottom

Added Search Suggestions for repo-search #448

Closed
wants to merge 0 commits into from
Closed

Added Search Suggestions for repo-search #448

wants to merge 0 commits into from

Conversation

KartikChawla09
Copy link
Contributor

Linked Issue(s)

Closes #445 by adding animated search suggestions.

Acceptance Criteria fulfillment

  • try not to add any additional packages
  • theme must be kept similiar to the pre-existing UI
  • write optimized and efficient code

Proposed changes (including videos or screenshots)

Slide.mp4

jayantbh
jayantbh requested changes Jun 25, 2024
View reviewed changes
Copy link
Contributor

@jayantbh jayantbh left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you so much for your contribution! 🚀

There's a couple of things that need your attention. Not every comment needs a change to be made, some might just need some clarification. :)

web-server/src/components/AnimatedInputWrapper/AnimatedInputWrapper.tsx Outdated Show resolved Hide resolved
web-server/src/components/AnimatedInputWrapper/AnimatedInputWrapper.tsx Outdated Show resolved Hide resolved
web-server/src/components/AnimatedInputWrapper/AnimatedInputWrapper.tsx Outdated Show resolved Hide resolved
web-server/src/components/AnimatedInputWrapper/AnimatedInputWrapper.tsx Outdated Show resolved Hide resolved
web-server/src/components/AnimatedInputWrapper/AnimatedInputWrapper.tsx Outdated Show resolved Hide resolved
web-server/src/components/AnimatedInputWrapper/AnimatedInputWrapper.tsx Outdated Show resolved Hide resolved
web-server/src/components/AnimatedInputWrapper/AnimatedInputWrapper.tsx Outdated Show resolved Hide resolved
@KartikChawla09
Copy link
Contributor Author

Thank you so much for your contribution! 🚀

There's a couple of things that need your attention. Not every comment needs a change to be made, some might just need some clarification. :)

Hey! Thank you very much for your review! I took the AnimatedInputWrapper component from the codesandbox link provided in the issue (#445 (comment)) because I assumed it had to be used as is. Apologies for the misinterpretation. I will make the necessary changes or go back to my initial approach of using the Slide MUI Component if required.

@KartikChawla09 KartikChawla09 requested a review from jayantbh June 26, 2024 08:37
@KartikChawla09
Copy link
Contributor Author

@jayantbh Can you please review the updated code once ?

@jayantbh
Copy link
Contributor

Hey again @KartikChawla09, sorry about the delay on this.
I'm away from work this week so I didn't look at this PR again. But I will in a day or two. 👌

@jayantbh
Copy link
Contributor

jayantbh commented Jul 1, 2024

@KartikChawla09 this would be the command to run: yarn eslint --fix ./source/**/*.*

@KartikChawla09
Copy link
Contributor Author

@KartikChawla09 this would be the command to run: yarn eslint --fix ./source/**/*.*

I ran the command and it executed without any errors in both the directories.

@jayantbh
Copy link
Contributor

jayantbh commented Jul 1, 2024

Right, I guess it doesn't cover the CSS file at the moment.
We'll let this one pass, we'll deal with the linting issues shortly (but not block this PR over it).

jayantbh
jayantbh previously approved these changes Jul 1, 2024
View reviewed changes
e-for-eshaan
e-for-eshaan requested changes Jul 1, 2024
View reviewed changes
web-server/src/components/Teams/CreateTeams.tsx Outdated
@@ -161,6 +163,7 @@ const TeamRepos: FC<{ hideCardComponents?: boolean }> = ({
} = useTeamCRUD();

const searchQuery = useEasyState('');
const [searchFocus, setSearchFocus] = useState(false);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

const searchFocus = useBoolState(false) this is our own custom hook that we use in the codebase

now, you can utilize the values as follows:
searchFocus.value // to get the true/false value
searchFocus.true() // to set the value as true
searchFocus.false() // to set the value as false

web-server/src/components/Teams/CreateTeams.tsx Outdated
@@ -190,15 +193,21 @@ const TeamRepos: FC<{ hideCardComponents?: boolean }> = ({
getOptionLabel={(option) => `${option.parent}/${option.name}`}
renderInput={(params) => (
<TextField
onFocus={() => setSearchFocus(true)}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

after making the above changes, this simply becomes onFocus={searchFocus.true}

web-server/src/components/Teams/CreateTeams.tsx Outdated
: `Search repositories`
selectedRepos.length ? (
`${selectedRepos.length} selected`
) : !searchFocus ? (
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

and this becomes !searchFocus.value ? (

web-server/src/components/AnimatedInputWrapper/AnimatedInputWrapper.tsx Outdated
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Screen.Recording.2024-07-01.at.2.53.16.PM.mov

Repo names are getting cropped-up

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image
Looks fine can you recheck once

web-server/src/components/AnimatedInputWrapper/AnimatedInputWrapper.tsx Outdated
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

since we are already using abbreviations (repo for repository)
post-focus label should say Search for org/repo

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changed this in the latest commit.

e-for-eshaan
e-for-eshaan reviewed Jul 1, 2024
View reviewed changes
web-server/src/components/Teams/CreateTeams.tsx Outdated
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks like you tried to rebase, but incorrectly resolved the conflicts?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, I am trying to resolve them. If it doesn't go as expected I will open a new PR, is that okay?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah, works!

@KartikChawla09 KartikChawla09 force-pushed the KartikChawla09/SearchSlide branch from aad0c86 to d7f866b Compare July 1, 2024 11:46
@KartikChawla09 KartikChawla09 deleted the KartikChawla09/SearchSlide branch July 1, 2024 12:03
@e-for-eshaan e-for-eshaan mentioned this pull request Jul 3, 2024
Merged
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@e-for-eshaan e-for-eshaan e-for-eshaan requested changes

@jayantbh jayantbh jayantbh left review comments

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Add search suggestions for repo-search
3 participants
@KartikChawla09 @jayantbh @e-for-eshaan