cops-iitbhu / hackalog-frontend Goto Github PK

View Code? Open in Web Editor NEW

17.0 4.0 51.0 3.25 MB

The home for hackathons organized under COPS IIT(BHU).

Home Page: https://hackalog.copsiitbhu.co.in

JavaScript 0.88% CSS 1.83% TypeScript 97.26% Shell 0.03%

reactjs javascript hacktoberfest nextjs vercel react-bootstrap

hackalog-frontend's Introduction

COPS Hackalog

The home for hackathons organized under COPS IIT (BHU), built on Next.js.

Getting Started

For setting up the development environment, follow the steps given below.

For making changes to the project, fork this repository using the green button on this page.
Clone your fork or this repository, as applicable.

git clone https://github.com/<username>/hackalog-frontend.git
# OR
# git clone https://github.com/COPS-IITBHU/hackalog-frontend.git
cd hackalog-frontend

Install the required packages using yarn. If yarn isn't installed, refer here.

yarn

Run the development server.

yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying the project as required. The page auto-updates as you edit the file.

Contributing

For first-time contributors, be sure to read the contribution guidelines here.

hackalog-frontend's People

Contributors

Stargazers

Watchers

Forkers

subodhk01 m-e-l-u-h-a-n davidgarg20 shubhanshu02 yashmittal21 chethana233 atpug22 96radhikajadhav king-11 humblenginr shubham1710 sdiazbarraza majesty-12 somesh202 sunnykrsinghiitbhu sjellen ujju20 garimavs iamezio soumyo123-prog shukapurv puneetdabral petie86 shubhangi013 atharvabhatt200 sakshi-2412 tarun-arora chirayumit001 jeeveshgarg sahilsaini1107 hitansh-shah manan-rathi devansh-gaur-1611 anks321 pratham1103 philippfr kannananil cleferman pravithaop ajayprabur ankur12-1610 aayushsrivastava9760 shubhrajyoti-dey-frostik try-catch-stack nerdylucifer divyansh013 mohitsharma-21 prakhar-agarwal-byte partik03 shivansh-bhatnagar18 varun-kolanu

hackalog-frontend's Issues

Page Not Found After Refresh

Steps to Reproduce

Go to the home page.
Select the Hackathon tab.
Open any hackathon detail page.
Refresh the page.
See the error

Invalid Thumbnail link for DebugIt

Bug

The card for DebugIt is not showing any image. This points that the thumbnail link is now invalid.

Details

Page: https://hackalog.copsiitbhu.co.in/hackathons
Browser: Chrome 90. (though bug visible on other browsers as well)

No effect while hovering over 'view more' and 'see more' buttons

The 'view more' and 'see more' buttons are not showing any effect such as change in color while hovering over them

For the 'see more' buttons, the file to be worked on is components/HackathonCard/HackathonCard.tsx.

Pagination in Hackathon Detail Page

Description

The "Participants" tab on the hackathon details page requires pagination to improve on the participants' list load time. This requires some changes in the backend as well as the frontend. On frontend side, this can be achieved by using some packages like react-pagination or by creating custom pagination components.

Details

File: pages/hackathon/slug/index.js (E.g. slug = "debug-it-2021")
Tab: Participants
Example Link: https://hackalog.copsiitbhu.co.in/hackathon/debug-it-2021

Menu does not collapse after clicking on a link on smaller devices

On small-screen devices, the menu in the Header does not collapse after clicking on a link, which obstructs the view of loaded pages and has to be closed manually.

I would like to work on it, please assign me this issue. Thanks!

Join hackathon button should redirect to login

Join hackathon button on hackathon page redirects to team registration.

no changes while hovering in navbar

while hovering over the buttons on navbar there is no changes in color or details, so i would like to add some finer details to it to make it more appealing

Responsive Navbar

The structure of the NavBar gets destroyed on small screens. To avoid this, it should be made responsive.

Remove Unnecessary Console Loggings

Description

Remove all console.log() statements from the repository.

Occurrences

components/Profile/EditProfileModal.js
pages/hackathons.js
context/auth.js
pages/hackathon/[slug]/register.js
pages/hackathon/[slug]/teams/[team_id]/index.js
pages/submission/[id].js

Fix Lint Warnings in the Repository

Description

This issue deals with fixing the lint errors in the Components throughout the repository.

Output

The following errors can be seen in the output of npm run lint on the repository;

/hackalog-frontend/components/Profile/EditProfileModal.tsx
  85:25  warning  'e' is defined but never used  no-unused-vars

/hackalog-frontend/context/auth.tsx
   11:21  warning  Caution: `React` also has a named export `createContext`. Check if you meant to write `import {createContext} from 'react'` instead  import/no-named-as-default-member
   34:45  warning  Caution: `React` also has a named export `useState`. Check if you meant to write `import {useState} from 'react'` instead            import/no-named-as-default-member
   35:31  warning  Caution: `React` also has a named export `useState`. Check if you meant to write `import {useState} from 'react'` instead            import/no-named-as-default-member
   36:35  warning  Caution: `React` also has a named export `useState`. Check if you meant to write `import {useState} from 'react'` instead            import/no-named-as-default-member
   37:35  warning  Caution: `React` also has a named export `useState`. Check if you meant to write `import {useState} from 'react'` instead            import/no-named-as-default-member
   48:21  warning  'error' is defined but never used                                                                                                    no-unused-vars
   64:21  warning  'err' is defined but never used                                                                                                      no-unused-vars
   80:30  warning  'err' is defined but never used                                                                                                      no-unused-vars
  102:37  warning  'error' is defined but never used                                                                                                    no-unused-vars
  106:29  warning  'error' is defined but never used                                                                                                    no-unused-vars
  113:5   warning  Caution: `React` also has a named export `useEffect`. Check if you meant to write `import {useEffect} from 'react'` instead          import/no-named-as-default-member
  115:8   warning  React Hook React.useEffect has a missing dependency: 'checkAuth'. Either include it or remove the dependency array                   react-hooks/exhaustive-deps
  136:30  warning  Caution: `React` also has a named export `useContext`. Check if you meant to write `import {useContext} from 'react'` instead        import/no-named-as-default-member

/hackalog-frontend/context/firebase.ts
   2:8   warning  '/hackalog-frontend/node_modules/firebase/empty-import.d.ts' imported multiple times                       import/no-duplicates
   3:8   warning  '/hackalog-frontend/node_modules/firebase/empty-import.d.ts' imported multiple times                       import/no-duplicates
  20:10  warning  Caution: `firebase` also has a named export `apps`. Check if you meant to write `import {apps} from 'firebase/app'` instead                    import/no-named-as-default-member
  21:9   warning  Caution: `firebase` also has a named export `initializeApp`. Check if you meant to write `import {initializeApp} from 'firebase/app'` instead  import/no-named-as-default-member
  22:9   warning  Caution: `firebase` also has a named export `analytics`. Check if you meant to write `import {analytics} from 'firebase/app'` instead          import/no-named-as-default-member
  30:9   warning  Caution: `firebase` also has a named export `auth`. Check if you meant to write `import {auth} from 'firebase/app'` instead                    import/no-named-as-default-member
  36:21  warning  'err' is defined but never used                                                                                                                no-unused-vars

/hackalog-frontend/pages/contributors.tsx
  123:8   warning  React Hook useEffect has a missing dependency: 'fullname'. Either include it or remove the dependency array. You can also do a functional update 'setFullName(f => ...)' if you only need 'fullname' in the 'setFullName' call  react-hooks/exhaustive-deps
  165:58  warning  'index' is defined but never used                                                                                                                                                                                               no-unused-vars

/hackalog-frontend/pages/hackathon/[slug]/index.tsx
   83:25  warning  'err' is defined but never used                                                                                                                                                                                                                                                                                                                                          no-unused-vars
   88:8   warning  React Hook useEffect has a missing dependency: 'hackathon'. Either include it or remove the dependency array                                                                                                                                                                                                                                                             react-hooks/exhaustive-deps
  560:25  warning  'err' is defined but never used                                                                                                                                                                                                                                                                                                                                          no-unused-vars

/hackalog-frontend/pages/hackathon/[slug]/register.tsx
  11:32  warning  'TeamSerializer' is defined but never used  no-unused-vars

/hackalog-frontend/pages/hackathon/[slug]/teams/[team_id]/index.js
  4:8  warning  Using exported name 'Router' as identifier for default export  import/no-named-as-default

/hackalog-frontend/pages/hackathon/[slug]/teams/[team_id]/submit.tsx
    9:5   warning  'FormControlProps' is defined but never used                                                                                                                                                                                                                                                                                                                             no-unused-vars
   12:10  warning  'ChangeEvent' is defined but never used                                                                                                                                                                                                                                                                                                                                  no-unused-vars
   23:10  warning  'AxiosError' is defined but never used                                                                                                                                                                                                                                                                                                                                   no-unused-vars
   64:21  warning  Unexpected console statement                                                                                                                                                                                                                                                                                                                                             no-console
   69:8   warning  React Hook useEffect has a missing dependency: 'token'. Either include it or remove the dependency array                                                                                                                                                                                                                                                                 react-hooks/exhaustive-deps

/hackalog-frontend/pages/hackathons.tsx
  30:21  warning  'err' is defined but never used  no-unused-vars
  43:21  warning  'err' is defined but never used  no-unused-vars
  53:21  warning  'err' is defined but never used  no-unused-vars

/hackalog-frontend/pages/index.tsx
    2:8   warning  'Header' is defined but never used                                                                                           no-unused-vars
   25:41  warning  Caution: `React` also has a named export `useState`. Check if you meant to write `import {useState} from 'react'` instead    import/no-named-as-default-member
   28:35  warning  Caution: `React` also has a named export `useState`. Check if you meant to write `import {useState} from 'react'` instead    import/no-named-as-default-member
   29:5   warning  Caution: `React` also has a named export `useEffect`. Check if you meant to write `import {useEffect} from 'react'` instead  import/no-named-as-default-member
   37:17  warning  Unexpected console statement                                                                                                 no-console

/hackalog-frontend/pages/profile/[username].tsx
  85:21  warning  Unexpected console statement  no-console

Contribution

New contributors are welcome to put up pull requests. To avoid multiple people working on the same file, please comment below and get yourself assigned your choice from the below.

Note: For completing the firebase related part of this issue, you may refer to HacktoBoard Repository's Context Folder

General Files and Profile Page: (#133)
- /hackalog-frontend/pages/index.tsx
- /hackalog-frontend/pages/hackathons.tsx
- /hackalog-frontend/pages/contributors.tsx
- /hackalog-frontend/pages/profile/[username].tsx
- /hackalog-frontend/components/Profile/EditProfileModal.tsx
Authentication Context (#143)
- /hackalog-frontend/context/auth.tsx
- /hackalog-frontend/context/firebase.ts
Hackathon Specific Pages (#140)
- /hackalog-frontend/pages/hackathon/[slug]/index.tsx
- /hackalog-frontend/pages/hackathon/[slug]/register.tsx
- /hackalog-frontend/pages/hackathon/[slug]/teams/[team_id]/submit.tsx
- /hackalog-frontend/pages/hackathon/[slug]/teams/[team_id]/index.js

PS: In order to accommodate more new contributors, we are limiting the count to one choice per contributor.

List View

A List View page - That contains all the past, presently going and upcoming hackathons.

Projects Tab on Profile Page

Currently the profile page shows the users's teams in Projects pane and links to the team page. Instead it should show the submissions for the user.
Note: This issue needs discussion.

Add Submissions Detail Page

As of now there is no page to show the submissions in detail view.

URL: /submission/[id]
The following fields should be on the submission details page:

id
time
score (if hackathon is completed)
description
team
hackathon

Profile page

Profile Page - Profile info, Past Participation

Add Alternative Texts to Image elements

Details

Currently, most images on the frontend don't have alternative texts to display in case the image can't be loaded. To improve accessibility, we need to add the alt attributes to the <Image /> and <img /> tags.

Occurrences

The following files have occurrences to be corrected as mentioned above:

components/Profile/TeamCard.js
pages/hackathon/[slug]/index.js
pages/profile/[username].js
pages/submission/[id].js

Github handles are converted to lowercase

The github handle provided by user are displayed in lowercase in user profile. Though "https://github.com/username" will take to correct github profile even by randomly changing the case of any letter in the username string, I guess it will be more appropriate if we show the exact github username provided by user.

pages/index.js

Transition Links to Use Slugs

The following pages are to be transitioned to use slug as the key to access it instead of id, after the transition of the APIs in the backend.

/pages/hackathon/[slug]/index.js
/pages/hackathon/[slug]/register.js
/pages/hackathon/[slug]/teams/[team_id].js

Layout issue of footer on small devices.

Footer is not responsive enough and squeezes the content on small devices which may look really odd.
The layout can be made better to look good even on smaller devices.
Attaching the screenshot of the same.

Font-sizes of Footer and Sub-Header rescaling on deployment

On deployment the Size of Text in the common Element below the Header and the Footer are taking time to load correctly which resolves automatically after reloading the site from a page other than Home Page. Problem not present in local version.

Upgrade React and NextJS to their latest version

Current Situation

We are currently using React v16 in our project. The same goes with ReactDOM and NextJS which are not on their latest.

Desired Situation

It is in the best interest of the project that we upgrade to React v17 along with upgrading ReactDOM and NextJS to their latest.

Fix Lint Errors in the React Components

Description

In order to merge #127, several lint errors need to be fixed. This issue deals with fixing these errors.

Output

The following errors can be seen in the output of npm run lint on the repository;

/hackalog-frontend/components/HackathonCard/HackathonCard.tsx
  52:33  error  The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid

/hackalog-frontend/pages/hackathon/[slug]/index.tsx
  107:25  error    Emojis should be wrapped in <span>, have role="img", and have an accessible description with aria-label or aria-labelledby                                                                                                                                                                                                                                               jsx-a11y/accessible-emoji
  242:65  error    The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
  255:65  error    The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
  280:65  error    The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
  293:69  error    The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
  300:69  error    The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
  328:65  error    The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
  347:65  error    The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
  406:61  error    The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
  418:61  error    The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
  629:49  error    The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
  654:57  error    The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
  704:25  error    The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
  802:57  error    Emojis should be wrapped in <span>, have role="img", and have an accessible description with aria-label or aria-labelledby                                                                                                                                                                                                                                               jsx-a11y/accessible-emoji

/hackalog-frontend/pages/hackathon/[slug]/teams/[team_id]/submit.tsx
  250:41  error    The autoFocus prop should not be used, as it can reduce usability and accessibility for users                                                                                                                                                                                                                                                                            jsx-a11y/no-autofocus
  261:41  error    The autoFocus prop should not be used, as it can reduce usability and accessibility for users                                                                                                                                                                                                                                                                            jsx-a11y/no-autofocus
  273:41  error    The autoFocus prop should not be used, as it can reduce usability and accessibility for users                                                                                                                                                                                                                                                                            jsx-a11y/no-autofocus
  320:25  error    The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid

/hackalog-frontend/pages/index.tsx
  149:37  error    img elements must have an alt prop, either with meaningful text, or an empty string for decorative images                    jsx-a11y/alt-text
  164:37  error    img elements must have an alt prop, either with meaningful text, or an empty string for decorative images                    jsx-a11y/alt-text
  179:37  error    img elements must have an alt prop, either with meaningful text, or an empty string for decorative images                    jsx-a11y/alt-text

/hackalog-frontend/pages/submission/[id].tsx
  191:61  error  The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
  210:69  error  The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
  331:25  error  The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid

Contribution

New contributors are welcome to put up pull requests. To avoid multiple people working on the same file, please comment below and get yourself assigned a file of your choice from the below.

/components/HackathonCard/HackathonCard.tsx (#142)
/pages/hackathon/[slug]/index.tsx (#139)
/pages/hackathon/[slug]/teams/[team_id]/submit.tsx (#149)
/pages/index.tsx (#132)
/pages/submission/[id].tsx (#146)

Rename 'Projects' tab to 'Teams' in Profile Page

Currently, the 'Projects' tab on the profile page shows the teams the user is a part of, regardless of whether the team actually submitted a project or not. So, the name 'Projects' is a bit confusing since it doesn't serve the purpose.

Task

Rename 'Projects' tab to 'Teams' in Profile Page

Damaged Footer

In the production as per the given link https://hackalog.copsiitbhu.co.in/ the footer section is broken as shown in the pics below

Moreover the mobile view is also not responsive as per the production website

I want to fix this. Can I please get the chance to do so ?

External Anchor should include 'noopener' as rel attribute

Details

According to this, anchor tags containing external links with target="_blank" and the link is external to the origin. This helps prevent malicious attacks and reduce page jank in Chromium browsers.

Occurrences

pages/submission/[id].js
pages/profile/[username].js
components/Footer/Footer.js

Fix Steps

Add rel="noopener noreferrer" as an attribute to the anchor tags in each such occurrence.

Contributors Page

Description

A page to display a list of all contributors to the repository, directly fetched from the GitHub API.

Contributors Page: Possible Recursive Loop in useEffect

Description

Have a look at the following code snippet from pages/contributors.tsx:

hackalog-frontend/pages/contributors.tsx

Lines 107 to 123 in 2ea02ec

    
           useEffect(() => { 
        
               if (contributors) { 
        
                   let arr: Contributor[] = contributors 
        
                   for (let x of arr) { 
        
                       let url: string = x.handle_url 
        
                       axios 
        
                           .get<{ login: string; name: string }>(url) 
        
                           .then((res) => 
        
                               setFullName([ 
        
                                   ...fullname, 
        
                                   (fullname[0][res.data.login] = res.data.name), 
        
                               ]) 
        
                           ) 
        
                           .catch(() => setError(true)) 
        
                   } 
        
               } 
        
           }, [contributors])

Problem

It shows an ESLint warning as follows:

React Hook useEffect has a missing dependency: 'fullname'. Either include it or remove the dependency array. You can also do a functional update 'setFullName(f => ...)' if you only need 'fullname' in the 'setFullName' call. eslintreact-hooks/exhaustive-deps

If we correct this problem by adding the fullname dependency to the useEffect hook, we get stuck in a never-ending loop since the hook will be triggered by a change in fullname where this hook is again changing the fullName.

Possible Solutions

Ignore the warning and add a comment there to avoid fixing the dependencies in the future.
Refactor the code to avoid this extra hook - Instead of using a separate useEffect hook for this purpose, we can transfer the code to the same hook which sets the contributors.

pages/contributors.js

Faulty logout button

While the handleLogout function signs out the user, there is no function redirecting the user to the homepage. As a result, the profile of the user is still visible after clicking on Logout. Is this a bug or is intentionally done?

Add Projects tab to the Profile page

After #89 is completed, we can add a "Projects" tab to the Profile page. The main purpose of this tab will be to show the submissions done by all the teams the user is a part of. Currently, this is not shown; instead, we can only see the user teams on the profile page.

Tasks

Investigate if submissions can be extracted from the existing data on the Profile page. Possible sources of this data are:
- Profile data stored in the Context in context/auth.js
- Data fetched on the profile page from the backend API /profile/{username}.
- Other APIs in the backend can be explored.
If no such sources are found, or the sources are computationally expensive, file an issue on the backend repository, mentioning this issue, for a new API to get the submission data of the user.
Make a card for showing Projects. (If a component is already there, skip this step)
Fetch the submission data from this source and show the data in cards.

Missing Dependencies of useEffect Hooks

Description

In some files, the useEffect has missing dependencies. The issue proposes including such unmet dependencies in the dependencies array of the useEffect hook.

Occurrences

File: pages/hackathon/[slug]/teams/[team_id]/submit.js
Line: 57
Missing Dependency: token

File: pages/hackathon/[slug]/index.js
Line: 77
Missing Dependency: hackathon

Hackhthon page

Hackathon Page - Info, Timings, Location, Problem Statement, Leaderboard, Participants, Submissions (it completed), Judging Criteria, Updates (During or before hackathon) etc

Remove Unused Variables from Modules

Occurrences

components/Date/Date.js
Line 1: 'parse' is defined but never used no-unused-vars
components/HackathonCard/HackathonCard.js
Line 1; 'Image' is defined but never used
components/Profile/ProfileTabs.js
Line 44: 'id' is defined but never used
pages/hackathon/[slug]/teams/[team_id]/index.js
Line 5: 'ListGroup' is defined but never used
Line 12: 'execOnce' is defined but never used
pages/index.js
Line 2: 'Sorry' is defined but never used
pages/profile/[username].js
Line 7: 'GrMail' is defined but never used

Work Required

Remove all the occurrences of these variables from the given files.

Failed to compile

Submission Detail Page showing wrong Start and End dates for hackathon

In the submission details page for any submission, in the last part, where Hackathon Details are shown, the start and the end date is showing as the current date and time but it should display the time when the hackathon started and ended so it is wrongly displayed there.

The same start and end date is correctly displayed on Hackathon detail page but is wrong on any submissions detail page.

problems in backend.ts

Serializers need to be fixed

Migrate Frontend Components to TypeScript

Migrate the JavaScript modules to TypeScript.

Files

Steps to follow

Rename the file to .tsx or .ts extension as required.
Look for the source of props in the component, if required.
If the data was obtained from the backend, look for the response type in the backend, using the below list. The response types of each serializer have been added to the /types/backend.ts.
Migrate to TypeScript.

Backend: https://cops-hackalog.herokuapp.com/
Serializer List and Types for the Backend: https://hackalog-docs.vercel.app/#/serializers

Note: An example of one such migration is in fbbad4c.

Points to be noted

Some files only store data and functions, so interfaces are to be made accordingly.
Add the types to the folder /types/ to a new file as required. If the same types were already created, prefer reusing them.
You may need to check the backend API for getting the object types for responses.

Some Links that may be useful

https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/basic_type_example/
https://www.typescriptlang.org/docs/handbook/intro.html

Hackathon Cards should have equal heights

Currently, the height of hackathon cards increases as the length of description increases. Instead, it should clip some part of the description to show on the cards. The rest of the description can be viewed on the Hackathon detail page anyway.

Home page

HomePage - Containing basic description of the website and other sections like past Hackathons, upcoming Hackathons.

Card updation bug

Card in the debugIt event page is not updating as soon as logout is pressed.

Profile Page Edit Modal: Add validation to text fields.

Currently, in the edit profile modal on the Profile page, the usernames such as “ABC DEF” are allowed while trimming is done only on either end. Due to this, the URLs are changed to something like https://hackalog.copsiitbhu.co.in/profile/ABC%20DEF.

Though everything works fine, this should be avoided when possible.

Tasks

Add validation to the username field
Add validation to GitHub username field.

Possible Solutions

Show an invalid username warning.
Trim all the whitespaces in the middle of such fields before sending them to the backend

Upcoming events and hackathons shows completed hackathons

Upcoming events and hackathons on the Home page should show only upcoming events.

Add pre-commit hooks for lint and formatting check

Current Situation

We do not have a pre-commit hook set up, because of this, if someone is not using prettier and eslint as formatter and linter respectively, then, we will lose consistency in the codebase.

Desired Situation

We use husky to configure pre-commit hooks for lint and formatting check so that we ensure that the code that is being pushed is adhered to the rules that we enforce and hence maintain consistency.

References

Husky docs

Title + Meta Description and Hackathon List Page Shallow Routing

When a webpage is rendered (Let's say a hackathon detail page). It renders with the title hackathon - after the data is fetched from the backend, the hackathon slug is added to this string. Also, the description in meta is showed as undefined.

Update

This issue now deals with the following points:

The meta description can be made to vary with the hackathon details like "Register for {hackathon name} at COPS Hackalog, {hackathon tagline}" on hackathon/[slug].
On the /submission/[id] page, description meta can be the submission's description and some placeholder while loading.
On the /hackathons page, we can change the title as the tabs change. So maybe like "Ongoing Hackathons" instead of "Hackathons" when the ongoing tab is opened.
On the /profile page, we can use the "About Me" of the user as the meta description; the current {User's Name}'s Profile on COPS Hackalog, a platform for organising hackathons looks kinda irrelevant.
Change the url as the tabs change. Ex - /hackathons/?tab=ongoing. For this, we need a controlled tab component. (ref: here)

To access the url parameters, we'd need router.query, which is already used in some dynamic pages (for reference). Below are the links for documentation:

Dynamic Routes: https://nextjs.org/docs/routing/dynamic-routes
Shallow Routing (to update the route) https://nextjs.org/docs/routing/shallow-routing

Giving a dark mode to the website

I want to work on this one. Kindly assign it to me.

Profile Page: Invalid Text in Teams panel when no teams are available

When clicked on the Teams option on the logged in user's profile page, the message displayed is "No projects to show" instead of "No teams to Show".
While the handleLogout function signs out the user, there is no function redirecting the user to the homepage. As a result, the profile of the user is still visible after clicking on Logout. Is this a bug or is intentionally done?

	useEffect(() => {
	if (contributors) {
	let arr: Contributor[] = contributors
	for (let x of arr) {
	let url: string = x.handle_url
	axios
	.get<{ login: string; name: string }>(url)
	.then((res) =>
	setFullName([
	...fullname,
	(fullname[0][res.data.login] = res.data.name),
	])
	)
	.catch(() => setError(true))
	}
	}
	}, [contributors])

cops-iitbhu / hackalog-frontend Goto Github PK

hackalog-frontend's Introduction

COPS Hackalog

Getting Started

Contributing

hackalog-frontend's People

Contributors

Stargazers

Watchers

Forkers

hackalog-frontend's Issues

Steps to Reproduce

Bug

Details

Description

Details

Description

Occurrences

Description

Output

Contribution

Details

Occurrences

Description

Output

Contribution

Task

Details

Occurrences

Fix Steps

Description

Description

Problem

Possible Solutions

Tasks

Description

Occurrences

Occurrences

Work Required

Files

Steps to follow

Points to be noted

Some Links that may be useful

Tasks

Possible Solutions

Update

Recommend Projects

Recommend Topics

Recommend Org