Skip to content
This repository has been archived by the owner on Mar 23, 2024. It is now read-only.

Commit

Permalink
feat: project done (#149)
Browse files Browse the repository at this point in the history
* fix: 🚑 ci (#102)

* docs: update README.md

* docs: update README.md

* fix: 🚑 fix ci don't work in develop and master branches

---------

Co-authored-by: Nikita Mashchenko <52038455+nmashchenko@users.noreply.github.com>

* feature: ✨ storybook pallete icons docs (#106)

* feat: add colors story

* feat: add loading story

* feat: add iconography stories and change stories settings

* feat: ✨ shared flex icon wrapper (#107)

* feat: ✨ add flex component

* feat: ✨ add flex component and docs

* docs: 📝 add docs for Flex component

* fix: in flex width auto -> 100%

* fix: in flex width auto -> 100% in storybook

* docs: 📝 add .md doc for how to use storybook (#108)

* feature: ✨ add util - get-elapsed-time (#111)

* feature: ✨ add util - get-past-time

* refactor: ♻️ rename get-past-time => get-elapsed-time. And add docs

* feat: ✨ add useGetScreenWidth hook (#112)

* feature: ✨ add useGetScreenWidth hook

* fix: 🐛 get window width in server-side

* test: ✅ init jest, and add 1 test, add to ci (#113)

* test: init jest, and add 1 test, add to ci

* test: init jest, and add 1 test, add to ci

* fix: tests for get elapsed time

* feat: ✨ add skeleton (#117)

* feat: ✨ add skeleton

* docs: 📝 add docs for skeleton

* docs: 📝 add more story cases for storybook

* fix: 🩹 fix tests for get elapsed time

* fix: shared components

* docs: updated skeleton

* feat: added teameights-types

* feat: added loader

* feat: added drawer, sonner

* feat: settings are added (#123)

* feat: settings are added

* fix: props are renamed

* feat: added select-autocomplete & debounce

* feat: new badge component and updated iconwrapper (#125)

* feat: new badge component and updated iconwrapper

* fix: stories

* fix: badge type added

* fix: styles/logic

---------

Co-authored-by: Nikita Mashchenko <mashchenko1@icloud.com>

* refactor: added new backend (#101)

* feat: added new server version

* refactor: remove client

* ci: added ci for backend

* feat: added github auth / removed others

* refactor: ♻️ absolute paths (#98)

* refactor: ♻️ rename absolute paths

* fix: 🚑 fix storybook alias paths

* fix: delete .idea directory

* refactor: removed all server

* docs: update core info

* docs: fixed auth

* fix: gtihub return entity

* ci: fixed tests

* ci: added api in docker

* ci: fixed backend tests

* fix: crlf disabled

* ci: disabled api for local

* feat: extended user schema, tests, dtos, etc

* ci: fixed tests runner

* feature: backend architecture (#120)

* fix: refactor arch signature for actual Module struct

* fix: connect docker & upload container structs

* upload: reload references by migration

* upd: fix docker

* upload: production docker without nodeEnd, should fix it

* feature: docker works

* fix docs

* ci: added backend branch

* ci: fix branch name

* fix: tests command

* fix: added .env copying step

* fix: doc & docker reference

* fix: tests & docs

---------

Co-authored-by: Nikita Mashchenko <mashchenko1@icloud.com>

* fix: issues, password, username updates

* fix: tests, ci, env-example

* ci: temporary yarnpath fix for tests

* feat: added universityData

* fix: linter

* fix: fixed docs & nested validation

* feat: added all required relations for base user

* feature: backend api docker (#122)

* fix: autobuild project gun

* fix: docs & workflow

* fix: gitflow

* fix: test gitflow

* fix: test gitflow

* fix: test gitflow

* fix: test gitflow

* fix: test gitflow

* fix: logs

* fix: sed

* fix: sed

* fix: compose postgres

* v3.6.3

* v3.6.4

* fix: yarn

* fix: postgres volumes

* fix: production condinion toggle

* docs: fixed descriptions

* feat: merged refactor/backend

* docs: fixed local setup

* fix: removed old files

* fix: merge test

* fix: docker-compose dev virtual volume

* fix: default starter prepare

* fix: db-prepare env point

* fix: sed checker

* fix: docs & code

---------

Co-authored-by: Nikita Mashchenko <mashchenko1@icloud.com>

* feat: added filters query for users

---------

Co-authored-by: Nikita Mashchenko <52038455+exortme1ster@users.noreply.github.com>
Co-authored-by: Pikj [JReydman] Reyderman <58705342+jreydman@users.noreply.github.com>

* fix: port for server

* feat: updated auth based on new design

* fix: design issues

* feat: updated experience type

* feat: added @teameights/types

* feature: reusable modals (#121)

* feat: added initial info-modal

* fix: cleanup & useless styles

* fix: fixed some styles, returned action modal

* fix: changed the approach to using styles

* fix: flex issue

* fix: test version teameights-types

* fix: types

* fix: added type

* fix: lib issues, reusability

* fix: added new modal window

* fix: badges and modals

* fix: added logic for mobile user

* fix: added new phone action modal

* fix: added new phone action modal

* fix: code issues

* fix: changed folder location

* fix: some styles

* fix: added storybook for modal

* fix: added storybook for modal

* Revert "fix: added storybook for modal"

This reverts commit c5e7773.

* fix: added for test new function

* fix: added new modal for a test

* fix: changed mock data

* fix: changed mock data

* fix: fixed new error

* fix: previous issues and code

* fix: namings

* fix: namings

* fix: added new modal that fixes freezes

* feat: added image loader, fix issues with modals

* feat: added flags & fixed issues

---------

Co-authored-by: Nikita Mashchenko <mashchenko1@icloud.com>

* fix: add events for flex component (#128)

Co-authored-by: “merankori” <skiselev@team.amocrm.com>

* fix: 🐛 flex (#130)

* fix: add events for flex component

* fix: add rest props for Flex component

---------

Co-authored-by: “merankori” <skiselev@team.amocrm.com>

* refactor(mocks): ✨ enhance user mock data generation with notificatfications (#129)

* refactor(mocks): ✨  enhance user mock data generation with notifications and team

* refactor(mocks): ♻️ convert functions to arrow functions

* test

* fix(eslint)

* save changes

* fix: refactor

* fix: date type

* fix: upgrade types

---------

Co-authored-by: Nikita Mashchenko <mashchenko1@icloud.com>

* feat: new search bar (#133) 🤟🏻

* feat: add border disable for ui select

* feat: add filter-select draft functionality

* fix: closing select menu and codestyle

* fix: conflicts with develop

* fix: removed server actions

* fix: imports

* fix: select and input border

* fix: filter-select

* fix: some fixes for select

* fix: interfaces of searchbar

* feat: add draft search-input functionality

* fix: filter type in filter select

* fix: some fixes for selects

* feat: add draft functionality for tags-list

* feat: add placeholders and tags-list for searchbar

* feat: add outside click closing for multiple-tag

* fix: fix text-filter clearing

* fix: some tag fixes

* feat: add clear all button in tags list

* fix: change file structure

* feat: add select indicator toggle

* fix: fix search-bar styles

* feat: add api request handler for search-input

* fix: move tag in entities

* fix: move tag in features

* feat: add some filters for search-bar on page

* fix: tags-list filtersArr typization

* feat: replace react hook form functionality from search bar with native react

* fix: checkbox-list functionality typization

* fix: codestyle fixes

* feat: add query string functionality for search-bar

* fix: replace flex divs with Flex component

* feat: add search-bar in storybook

* feat: add multiple value filter functionality

* fix: add multiple filter in stories / fix timer of search-bar

* fix: codestyle fix in tag-menu

* fix: destructurize fix

* fix: state changing in search-bar

* feat: add custom styles support in shared select

* fix: margins and paddings of search-bar

* fix: design fixes

* fix: class naming fixes

* fix: menu columns in search-bar input-select

* fix: style fixes

* fix: clear logs and fix naming of callbacks

* fix: codereview fixes

---------

Co-authored-by: Nikita Mashchenko <mashchenko1@icloud.com>
Co-authored-by: skiselev <skiselev@team.amocrm.com>

* feat: added new icons/skills (#132)

* feat: added new icons/files

* feat: changed concentration to speciality

* feat: added support for specialities

* fix: import

* fix: server support for updates

* fix: docker

* fix: prettier

* feat: added isActive for badge

* fix: added todos for backend

* fix: final adjustments

* fix: mocks, user entity, etc

* fix: fallback

* feat: transfer old react-query hooks (#109)

* feat: added initial setup

* fix: style

* feat: added auth queries

* feat: added password reset hooks

* feat: folders refactor

* fix: added server fixes

* fix: removed bugged test

* feat: changed hooks, consts & logout

* fix: error handling

* feat: fix merge issues

* fix: deployment issue

* fix: other issues

* docs: update pull_request_template.md

* fix: server cleanup (#136)

* feat: new filters approach

* fix: old issues

* feat: new jwt approach to hash

* fix: small issues on frontend

* fix: lint errors

* feat: added base layout for registration; refactored and added some s… (#134)

* feat: added base layout for registration; refactored and added some shared component

* fix: resolved tsc issue

* fix: revert

* fix: resolved conflicts

* Revert "fix: revert"

This reverts commit a2f4c00.

* fix: inline styles

---------

Co-authored-by: Nikita Mashchenko <mashchenko1@icloud.com>

* fix: icons cleanup (#137)

* fix: added new branch

* fix: arrows

* fix: cleaned up the icons on the new branch

* fix: new names for icons and illustrations

* Revert "fix: new names for icons and illustrations"

This reverts commit 4464738.

* fix: changed the names of icons and illustrations

* fix: some small issues

* fix: lint

---------

Co-authored-by: Nikita Mashchenko <mashchenko1@icloud.com>

* feature: transfer user card functionality (#110)

* feat(user-card): move user-card component from previuos branch

* fix(docs): change .MD to .md

* feat(and-more): add new component

* feat(and-more): add counter

* feat(and-more): {finaly} add counting of languages

* fix(user-card): names of files

* fix(user-card & and-more): delete comments

* fix(user-card): move inline styles to separate file

* fix(user-card): change props using + minor changes

* feat(user-card): move 'and-more' feature to badge-framework component

* feat(user-card): move 'and-more' feature to badge-languages component

* fix(user-card): and-more button size in badge-framework component

* fix(user-card): displaying of 2 languages

* fix(and-more): delete unused component

* fix(user-card): use css variables

* fix(user-card): delete inline styles and move to scss file

* fix(badge-framework): replace img tag with Image

* refactor(user-card): new polymorphic function to use render badges

* fix(user-card): all problems

* fix(user-card): delete unused part of code

* fix(user-card): linter

* fix(user-card): fix placement of elements

* feat(user-card): crown for leaders

* feat: add new logic for render langs and frameworks

* refactor: refactor

* refactor: refactor

* refactor: refactor

* refactor: refactor

* refactor: refactor scss

* refactor: refactor

* refactor: refactor

* feat: ✨ add animation for crown

* feat: ✨ add animation for card

* feat: ✨ add types

* feat: ✨ add types

* feat: ✨ add @teameights/types

* Delete node_modules directory

* fix: save changes

* fix: fix css

* refactor: refactor

* refactor: refactor

* fix(user-card): crown

* feat(user-card): hover effect

* feat(user-card): use entities instead of widgets

* feat(user-card): add controller for storybook

* feat(user-card): storybook params

* feat(user-card): add onClick param for useCallback hooks

* save changes

* feat(user-card): adjust badgeFrameworkLayoutConfig and Image component in card module

* feat(user-card): add hover effect and cursor pointer to user card component

* feat(user-card): add hover effect and cursor pointer to user card component

* feat(user-card): update UserCard component to display user's date of birth and role name

* feat(user-card): use generateMockUser function for default user in UserCardPreview story

* feat(user-card): update generateMockFileEntity to include random query parameter for image path 🚀

* feat(user-card): calculate and display user's age in UserCard component 🎂

* feat(user-card): add new mock data generation functions and update Home component to use them 🚀

* feat(user-card): update file paths and import styles to use consistent naming convention 🔄📦

* feat(user-card): add new logic for render langs and frameworks 🌐✨

* fix

* fix

* feat(user-card): restyle badge-language

* fix: adjust code to changes from merge

* fix(user-card): update user for storybook to match user type

* feat(user-card): add country flag icon

---------

Co-authored-by: Berezhnev Vladimir <vova21473@gmail.com>
Co-authored-by: Sivritkin Dmitriy <dmitriysivritkin@gmail.com>
Co-authored-by: Romas Bitinas <93491714+pupixipup@users.noreply.github.com>

* feat: mobile search (#139)

* feat: add context for search-bar props

* feat: add draft functionality of mobile-search

* fix: refactor

* feat: add portaling for search select

* fix: icons naming

* fix: style fixes

* feat: add useGetUsers hook

* feat: add drawer in modal and optimize modal button

* fix: getting data and modal button fixes

* fix: drawer class types

* fix: codestyle fixes

* feat: move search-bar in shared

* fix: refactor and codestyle fixes

* fix: small issue

* fix: use client

---------

Co-authored-by: “merankori” <skiselev@team.amocrm.com>
Co-authored-by: Nikita Mashchenko <mashchenko1@icloud.com>

* feat: added server notifications (#140)

* feat: added notifications

* fix: previous issues with notifications

* fix: lint issues

* feat: added ws support

* fix: lint

* feat: ✨ create sidebar (#114)

* add: 🍱 add unregistered user image to public

* add: 🍱 icons

* fix: git stash

* feat: ✨ add types for user, team, role, notification

* git stash

* git stash

* feat: ✨ add sidebar

* fix: 🩹 fix build

* fix: 🩹 fix build

* docs: 📝 add storybook for notification-item and notification-content

* docs: 📝 JSDoc for notification-content

* docs: 📝 JSDoc for notification-list, add stories, add tests for sort-notifications

* fix: save changes

* refactor: with new types `notification-item`

* refactor: with new types `notification-list`

* refactor: with new types `notification-modal`

* refactor: with new types `sidebar`

* refactor: with new types `sidebar-profile`

* fix save

* refactor(sidebar): 📦♻️ update typings to use `@teameights/types`

* refactor code

* save changes

* refactor: ♻️ replace hardcoded mock data with generateMockUser and other mock data generators in sidebar and notification components

* refactor(sidebar): 🎨 update styles and typography in sidebar components

* feat(icons): ✨ update burger-clo se icon in shared assets

* feat(sidebar): ✨ add user state and image loading skeleton in sidebar-profile

* feat(sidebar-profile): ✨ replace Image with ImageLoader in sidebar-profile component

* feat: merged develop

* fix: storybook

* feat: added server

* fix: linter

* fix: reading notifications issues

* fix: small issues

* feat: added websocket

* fix: socket issue

* fix: linter issue

* fix: sockets / timings issues

---------

Co-authored-by: Nikita Mashchenko <mashchenko1@icloud.com>

* feat: added main page and connected everything (#141)

* feat: added initial implementation

* Revert "feat: added initial implementation"

This reverts commit 83f6152.

* feat: added initial screen with issues

* feat: added server loading & filters, etc

* feat: final touches before merging

* feat: added multi-step signup (#138)

* feat: added new registration step - Account-Type

* feat: added new step

* fix: small fixes in styles

* fix: removed inline styles

* fix: added new step

* fix: added new step

* feat: added icons and updated the input-link

* fix: some fixes with icons

* feat: added new step Specialty

* feat: add step 4 of onboarding

* fix: minor lang selection update

* fix: minor issues & reusability

* fix: disable select if no empty cells

* feat: add recommended languages

* feat: add search to languages

* wip: implement form

* feat: bind speciality step to the form

* fix: update effect dependencies list

* feat: update next step logics

* feat: update select-fields layout

* refactor: apply Prettier

* fix: speciality to occupation conversion

* typo: update language label

* feat: add selected field component

* fix: remove step 1 recommendations on step 2

* feat: new approach wip

* feat: wip (need to fix errors)

* fix: handle key prop error

* fix: final client cleanup

* feat: add responsiveness to ActionSection

* feat: add responsiveness to AccountType

* feat: restyle Options

* feat: add responsiveness to steps

* fix: change recommended_icons height

* feat: refactor + illustrations

* fix: server stuff to support registration

* fix: minor issues

* feat: everything working now

* fix: mocks

* fix: lint issues

* fix: backend lint

* feat: add illustration resizing

* feat: add illustration resizing

* fix: update icons size

* fix: rename Javascript to JavaScript

* fix: styles

* feat: last touches

* fix: lint

* fix: lint part 2

* fix: seeds

* fix: small updates

* fix: remove console log

* fix: removed broken tests

---------

Co-authored-by: Romas Bitinas <93491714+pupixipup@users.noreply.github.com>
Co-authored-by: Nikita Mashchenko <mashchenko1@icloud.com>

* fix: heroku procfile

* fix: disable npm for heroku

* Feature/friends (#143)

* feat: create friendship system

* test: add e2e tests for friendship functionality

* wip: add basic profile layout

* feat: add profile list icons

* feat: add icons

* feat: add icons

* feat: add social links

* feat: add logo

* fix: layout behind aside menu

* feat: add back button

* feat: add age

* fix: add migration

* fix: remove profile id at the button link

* fix: toggle leader icon based on fetch data

* feat: add empty placeholder for about section

* update: add check friendship status

* feat: add [username] to the path

* Revert "feat: add [username] to the path"

This reverts commit 5027de5.

* fix: change route to the profile page

* feat: add empty state

* update: reworked notification update

* update: updated friendship delete

* fix: incorrect image reference

* fix: case when links are missing

* fix: minor ui changes

* refactor: run prettier

* feat: add skills (except projects & tournaments)

* feat: add friends button logics

* refactor: remove eslint errors

* fix: back icon position

* refactor: run Prettier

* fix: specialty field to match updated type

* fix: skills to match updated structure

* fix: replace useGetMe with useGetUser

* feat: add Friendship seed

* fix: remove nav placeholder shrinking

* fix: profile nav button path

* fix: full navbar size

* wip: add list of friends

* feat: add friends modal

* feat: add responsiveness

* refactor: move logics to page.tsx

* feat: add friend removal

* refactor: remove unused import

* fix: end -> flex-end

* refactor: split ui to folders

* fix: remove icon overlay

* fix: back icon position

* fix: small updates

* fix: prettier

* fix: backend lint

* update: added username check

* update: added username check

* update: updated username check

* feat: friend button states

* fix: display correct skills

* refactor: apply prettier

* feat: add friend button (at user modal)

* feat: add friend notification

* feat: add profile link to user modal

* refactor: add friend notification interface

* feat: add width prop to friend btn

* feat: add friend button to infoModal

* feat:

* fix: fixed friendship status receiving

* fix: cleanup

* fix: generation

---------

Co-authored-by: Romas Bitinas <93491714+pupixipup@users.noreply.github.com>
Co-authored-by: Nikita Mashchenko <mashchenko1@icloud.com>

* Fix/search bar (#144)

* fix: some search bar style fixes

* feat: add reducer and timer disabling for searchbar

* fix: fix bad setState inside render

* fix: style fixes for mobile filters

* fix: add portal for drawer

* fix: fixes for tags

* fix: filter opening

---------

Co-authored-by: Nikita Mashchenko <mashchenko1@icloud.com>

---------

Co-authored-by: Sivritkin Dmitriy <129217598+velenyx@users.noreply.github.com>
Co-authored-by: dmtrack <dmtrack.dev@gmail.com>
Co-authored-by: Nikita Mashchenko <52038455+exortme1ster@users.noreply.github.com>
Co-authored-by: Pikj [JReydman] Reyderman <58705342+jreydman@users.noreply.github.com>
Co-authored-by: LanselonX <101521725+LanselonX@users.noreply.github.com>
Co-authored-by: MelancholicCode <96338248+MelancholicCode@users.noreply.github.com>
Co-authored-by: “merankori” <skiselev@team.amocrm.com>
Co-authored-by: Michael Maliar <61254973+mikhail2404@users.noreply.github.com>
Co-authored-by: Berezhnev Vladimir <vova21473@gmail.com>
Co-authored-by: Sivritkin Dmitriy <dmitriysivritkin@gmail.com>
Co-authored-by: Romas Bitinas <93491714+pupixipup@users.noreply.github.com>
Co-authored-by: merankori <96338248+merankori@users.noreply.github.com>
Co-authored-by: Ivan Sai <46083400+Ivan-Sai@users.noreply.github.com>
  • Loading branch information
14 people committed Mar 23, 2024
1 parent b5eddd8 commit 7c801e8
Show file tree
Hide file tree
Showing 105 changed files with 3,024 additions and 342 deletions.
4 changes: 0 additions & 4 deletions client/.husky/commit-msg

This file was deleted.

4 changes: 0 additions & 4 deletions client/.husky/pre-commit

This file was deleted.

4 changes: 0 additions & 4 deletions client/.husky/pre-push

This file was deleted.

55 changes: 55 additions & 0 deletions client/src/app/(main)/[username]/profile/layout.module.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@

.container {
display: flex;
width: 100%;
height: 100%;
position: relative;
@media (max-width: 790px) {
position: unset;
}
.body {
width: 100%;
}
}

.back {
position: absolute;

left: 0;
display: flex;
align-items: center;
gap: 6px;
&:hover {
opacity: .7;
transition: .3s;
}

@media (max-width: 790px) {
top: 46px;
right: 15px;
left: unset;
}
}

.profile_row {
@media (max-width: 1045px) {
flex-direction: column;
width: 100%;
& > div {
width: 100%;
}
}
}

.sm_card {
width: 40%;
}

.lg_card {
width: 60%;
}

.list_card {
width: 40%;
gap: 18px;
}
24 changes: 24 additions & 0 deletions client/src/app/(main)/[username]/profile/layout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
'use client';
import styles from './layout.module.scss';
import { Flex, Typography } from '@/shared/ui';
import { ArrowLeftIcon, LogoBig } from '@/shared/assets';
import { useRouter } from 'next/navigation';

export default function Layout({ children }: { children: React.ReactNode }) {
const router = useRouter();

return (
<div className={styles.container}>
<Flex direction={'column'} width={'100%'} gap={'30px'}>
<button onClick={router.back} className={styles.back}>
<ArrowLeftIcon />
<Typography>Back</Typography>
</button>
<Flex justify='center'>
<LogoBig />
</Flex>
{children}
</Flex>
</div>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import { createContext } from 'react';

export const ProfileContext = createContext(false);
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { useGetUsers } from '@/entities/session';
import { IUserResponse } from '@teameights/types';

export const useGetUserByName = (username: string): { data: IUserResponse | undefined } => {
const users = useGetUsers(JSON.stringify({ username: username }));

return { data: users?.data?.pages[0]?.data[0] };
};
46 changes: 46 additions & 0 deletions client/src/app/(main)/[username]/profile/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
'use client';
import styles from './layout.module.scss';
import { useGetMe } from '@/entities/session';
import { Header } from './ui/header/header';
import { CardSkeleton, Flex } from '@/shared/ui';
import { List } from './ui/list/list';
import { About } from './ui/about/about';
import { useParams } from 'next/navigation';
import { Friends } from './ui/friends/friends';
import { Fields } from './ui/fields/fields';
import { useGetUserByName } from './lib/useGetUserByName';
import { ProfileContext } from './lib/profile-context';

export default function Page() {
const { data: me } = useGetMe();
const { username } = useParams();
const { data: user } = useGetUserByName(username as string);
const isMyProf = me?.username === username;

let body = (
<Flex direction='column' gap='30px'>
<CardSkeleton borderRadius={15} width={'100%'} height={'227px'} />
<CardSkeleton borderRadius={15} width={'100%'} height={'227px'} />
</Flex>
);

if (user) {
body = (
<>
<Header />
<Flex padding='0 0 48px 0' direction='column' gap='30px'>
<Flex className={styles.profile_row} gap='30px'>
<List />
<About />
</Flex>
<Flex className={styles.profile_row} gap='30px'>
<Friends />
<Fields />
</Flex>
</Flex>
</>
);
}

return <ProfileContext.Provider value={isMyProf}> {body} </ProfileContext.Provider>;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.container {

}
58 changes: 58 additions & 0 deletions client/src/app/(main)/[username]/profile/ui/about/about.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import { Card } from '../card/card';
import { Flex, Typography } from '@/shared/ui';
import { GithubIcon } from '@/shared/assets/icons/github-icon';
import { BehanceIcon } from '@/shared/assets/icons/behance';
import { TelegramIcon } from '@/shared/assets/icons/telegram';
import { LinkedinIcon } from '@/shared/assets/icons/linkedin';
import { useParams } from 'next/navigation';
import { useGetUserByName } from '../../lib/useGetUserByName';
import styles from '../../layout.module.scss';

export const About = () => {
const { username } = useParams();
const { data: user } = useGetUserByName(username as string);

const linksPresent = user?.links && Object.keys(user.links).length;
const descPresent = typeof user?.description === 'string';
return (
<Card className={styles.lg_card}>
<Flex direction='column' gap='24px' height='100%'>
<Typography size={'heading_s'} color={'greenBright'}>
About
</Typography>
{!descPresent && (
<Typography size={'body_s'} color={'greyNormal'}>
No description added.
</Typography>
)}
<Flex flex={1}>
{descPresent && <Typography size={'body_s'}>{user?.description}</Typography>}
</Flex>
{linksPresent && (
<Flex align={'center'} gap={24}>
{user?.links?.github && (
<a target='_blank' href={user.links.github}>
<GithubIcon width={28} />
</a>
)}
{user?.links?.behance && (
<a target='_blank' href={user.links.behance}>
<BehanceIcon width={28} />
</a>
)}
{user?.links?.telegram && (
<a target='_blank' href={user.links.telegram}>
<TelegramIcon width={28} />
</a>
)}
{user?.links?.linkedIn && (
<a target='_blank' href={user.links.linkedIn}>
<LinkedinIcon width={28} />
</a>
)}
</Flex>
)}
</Flex>
</Card>
);
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
.card {
background: rgba(26, 28, 34, 1);
border-radius: 15px;
overflow: hidden;
padding: 32px;
}
14 changes: 14 additions & 0 deletions client/src/app/(main)/[username]/profile/ui/card/card.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { ReactNode } from 'react';
import styles from './card.module.scss';
import clsx from 'clsx';

interface CardProps {
children: ReactNode;
className?: string;
borderRadius?: string;
}

export const Card = ({ children, className }: CardProps) => {
const cls = clsx(styles.card, className);
return <div className={cls}>{children}</div>;
};
35 changes: 35 additions & 0 deletions client/src/app/(main)/[username]/profile/ui/fields/education.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import { Flex, Typography } from '@/shared/ui';
import { useParams } from 'next/navigation';
import { useGetUserByName } from '../../lib/useGetUserByName';

export const Education = () => {
const { username } = useParams();
const { data: user } = useGetUserByName(username as string);
const universities = user?.universities;
if (!universities) return <Typography>No information</Typography>;
return (
<Flex gap='24px' direction='column'>
{universities.map((education, i) => {
const start = new Date(education.admissionDate).getFullYear();
const end = education.graduationDate
? new Date(education.graduationDate).getFullYear()
: 'Present';
return (
<Flex key={i} width={'100%'} justify={'space-between'}>
<Flex gap={'8px'} direction={'column'}>
<Typography size={'body_m'}>
{education.name ?? (education as unknown as { university: string }).university}
</Typography>
<Typography color={'greyNormal'} size={'body_s'}>
{education.degree} in {education.major}
</Typography>
</Flex>
<Typography>
{start} - {end}
</Typography>
</Flex>
);
})}
</Flex>
);
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
.selected {
border-bottom: 1px solid #5bd424;
}

.field_text {
transition: 0.3s;
transition-property: color;
}

.fields_container {
min-height: 150px;
}

.nav_bar {
overflow-x: auto;
}
46 changes: 46 additions & 0 deletions client/src/app/(main)/[username]/profile/ui/fields/fields.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import { Card } from '../card/card';
import { Flex, Typography } from '@/shared/ui';
import { useState } from 'react';
import styles from './fields.module.scss';
import { Skills } from './skills';
import { WorkExperience } from './work-experience';
import { Education } from './education';
import layoutStyles from '../../layout.module.scss';
export const Fields = () => {
const [field, setField] = useState<keyof typeof fields>('Skills');

const fields = {
Skills: <Skills />,
Projects: null,
'Work experience': <WorkExperience />,
Education: <Education />,
Tournaments: null,
};

return (
<Card className={layoutStyles.lg_card}>
<Flex direction='column' gap='24px' className={styles.fields_container}>
<Flex className={styles.nav_bar} gap='16px'>
{Object.keys(fields).map(key => {
const classProps = field === key ? { className: styles.selected } : {};
return (
<button
onClick={() => setField(key as keyof typeof fields)}
{...classProps}
key={key}
>
<Typography
className={styles.field_text}
color={field === key ? 'greenBright' : 'greyNormal'}
>
{key}
</Typography>
</button>
);
})}
</Flex>
{fields[field]}
</Flex>
</Card>
);
};
36 changes: 36 additions & 0 deletions client/src/app/(main)/[username]/profile/ui/fields/skills.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import { BadgeText, Flex, Typography } from '@/shared/ui';
import { useGetUserByName } from '../../lib/useGetUserByName';
import { useParams } from 'next/navigation';
import { BadgeIcon } from '@/shared/ui';

export const Skills = () => {
const { username } = useParams();
const { data: user } = useGetUserByName(username as string);
const skills = {
coreTools: {
badge: ({ data }: { data: string }) => <BadgeIcon data={data} isActive={true} />,
title: 'Core Tools',
},
additionalTools: {
badge: BadgeText,
title: 'Additional Tools',
},
};
return (
<Flex gap='24px' direction='column'>
{user!.skills &&
Object.entries(skills).map(skill => {
const skillName = skill[0] as keyof typeof skills;
const Badge = skills[skillName].badge;
return (
<Flex key={skillName} direction='column' gap='8px'>
<Typography>{skills[skillName].title}</Typography>
<Flex wrap='wrap' gap='8px'>
{user?.skills![skillName]?.map((lang: string) => <Badge key={lang} data={lang} />)}
</Flex>
</Flex>
);
})}
</Flex>
);
};
Loading

0 comments on commit 7c801e8

Please sign in to comment.