Skip to content

Commit

Permalink
Refactored various components based on ChatGPT suggestions. See detai…
Browse files Browse the repository at this point in the history 
…ls: https://chat.openai.com/share/13ce58f0-a37b-47d3-a50f-1b9b16278023
  • Loading branch information
@pbrudny
pbrudny committed Sep 10, 2023
1 parent f34f396 commit 608b384
Show file tree
Hide file tree
Showing 4 changed files with 196 additions and 211 deletions.
19 changes: 10 additions & 9 deletions src/common/AddMoreButton/AddMoreButton.js
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,24 @@
import React from 'react';

import style from './style.module.scss';

class AddMoreButton extends React.Component {
render() {
const classes = [style.AddMoreButton];
if(this.props.className) {

if (this.props.className) {
classes.push(this.props.className);
}
return(
<button

return (
<button
className={classes.join(' ')}
onClick={this.props.onClick}
onClick={this.props.onClick}
{...this.props.additionalProps}
>
{this.props.children}
</button>
>
{this.props.children}
</button>
);
}
}

export default AddMoreButton;
export default AddMoreButton;
207 changes: 102 additions & 105 deletions src/common/TechnologySlider/TechnologySlider.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import React from 'react';
import SwiperCore, {Navigation} from "swiper";
import {Swiper, SwiperSlide} from 'swiper/react';
import React, { useRef, useContext } from 'react';
import SwiperCore, { Navigation } from "swiper";
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/swiper.scss';

// ... [all your SVG imports] ...

import {ReactComponent as AngularIcon} from 'assets/img/icons-new-design/technology-icons/angular.svg';
import {ReactComponent as BlockChainIcon} from 'assets/img/icons-new-design/technology-icons/blockchain.svg';
import {ReactComponent as CLangIcon} from 'assets/img/icons-new-design/technology-icons/c.svg';
Expand All @@ -28,112 +30,107 @@ import {ReactComponent as TestingIcon} from 'assets/img/icons-new-design/technol
import {ReactComponent as UXIcon} from 'assets/img/icons-new-design/technology-icons/ux.svg';
import {ReactComponent as VueIcon} from 'assets/img/icons-new-design/technology-icons/vue.svg';


import style from './style.module.scss';
import {ThemeContext} from "../../themeContext";

class TechnologySlider extends React.Component {

prevButton = React.createRef();
nextButton = React.createRef();

technologyIcons = {
'JS': <JavaScriptIcon />,
'Angular': <AngularIcon />,
'Vue': <VueIcon />,
'React': <ReactIcon />,
'Node': <NodeIcon />,
'HTML': <HTMLIcon />,
'PHP': <PHPIcon />,
'Java': <JavaIcon />,
'Ruby': <RubyIcon />,
'Python': <PythonIcon />,
'C': <CLangIcon />,
'.Net': <DotNetIcon />,
'Scala': <ScalaIcon />,
'GO': <GoLangIcon />,
'Mobile': <MobileIcon />,
'Testing': <TestingIcon />,
'UX': <UXIcon />,
'DevOps': <DevOpsIcon />,
'Cloud': <CloudIcon />,
'Data': <DataIcon />,
'Game': <GameDevIcon />,
'PM/BA': <ProjectManagementIcon />,
'B-chain': <BlockChainIcon />,
'Other': <OtherIcon />
};

render() {

const themeContext = this.context;

SwiperCore.use([Navigation])

const technologies = this.props.technologies;

const classes = [style.TechnologySlider];

if(themeContext.theme === 'dark') {
classes.push(style.TechnologySlider_dark);
} else {
classes.push(style.TechnologySlider_light)
}
import { ThemeContext } from "../../themeContext";

const TechnologySlider = (props) => {

const prevButton = useRef(null);
const nextButton = useRef(null);

const technologyIcons = {
'JS': <JavaScriptIcon />,
'Angular': <AngularIcon />,
'Vue': <VueIcon />,
'React': <ReactIcon />,
'Node': <NodeIcon />,
'HTML': <HTMLIcon />,
'PHP': <PHPIcon />,
'Java': <JavaIcon />,
'Ruby': <RubyIcon />,
'Python': <PythonIcon />,
'C': <CLangIcon />,
'.Net': <DotNetIcon />,
'Scala': <ScalaIcon />,
'GO': <GoLangIcon />,
'Mobile': <MobileIcon />,
'Testing': <TestingIcon />,
'UX': <UXIcon />,
'DevOps': <DevOpsIcon />,
'Cloud': <CloudIcon />,
'Data': <DataIcon />,
'Game': <GameDevIcon />,
'PM/BA': <ProjectManagementIcon />,
'B-chain': <BlockChainIcon />,
'Other': <OtherIcon />
};


const themeContext = useContext(ThemeContext);

SwiperCore.use([Navigation]);

const technologies = props.technologies;

const classes = [style.TechnologySlider];

if (themeContext.theme === 'dark') {
classes.push(style.TechnologySlider_dark);
} else {
classes.push(style.TechnologySlider_light);
}

if(this.props.fullwidth) {
classes.push(style.TechnologySlider_fullwidth)
}
if (props.fullwidth) {
classes.push(style.TechnologySlider_fullwidth);
}

return (
<div className={classes.join(' ')}>
<Swiper
spaceBetween={16}
slidesPerView={'auto'}
preventClicks
allowTouchMove={false}
navigation={{
prevEl: this.prevButton.current,
nextEl: this.nextButton.current
}}
return (
<div className={classes.join(' ')}>
<Swiper
spaceBetween={16}
slidesPerView={'auto'}
preventClicks
allowTouchMove={false}
navigation={{
prevEl: prevButton.current,
nextEl: nextButton.current
}}
>
{technologies.map(technology => (
<SwiperSlide
className={style.TechnologySlider__slide}
key={technology.name}
>
{technologies.map(technology => (
<SwiperSlide
className={style.TechnologySlider__slide}
key={technology.name}
>
<button
className={style.TechnologySlider__slideButton}
onClick={this.props.onClick}
value={technology.name}
>
<div className={style.TechnologySlider__slideIconWrapper}
style={technology.buttonPressed ? {background: technology.background} : {}}>
<span className={[style.TechnologySlider__slideIcon].join(' ')}
style={technology.buttonPressed ? {color: 'white'} : {color: 'lightgray'}}>
{this.technologyIcons[technology.name]}
</span>
</div>
<span
className={technology.buttonPressed ? [style.TechnologySlider__slideName, style.TechnologySlider__slideName_active].join(' ') : style.TechnologySlider__slideName}>
{technology.name}
</span>
</button>
</SwiperSlide>
))}
</Swiper>
<button
className={[style.TechnologySlider__button, style.TechnologySlider__button_prev].join(' ')}
ref={this.prevButton}
/>
<button
className={[style.TechnologySlider__button, style.TechnologySlider__button_next].join(' ')}
ref={this.nextButton}
/>
</div>
)
}
<button
className={style.TechnologySlider__slideButton}
onClick={props.onClick}
value={technology.name}
>
<div className={style.TechnologySlider__slideIconWrapper}
style={technology.buttonPressed ? {background: technology.background} : {}}>
<span className={[style.TechnologySlider__slideIcon].join(' ')}
style={technology.buttonPressed ? {color: 'white'} : {color: 'lightgray'}}>
{technologyIcons[technology.name]}
</span>
</div>
<span
className={technology.buttonPressed ? [style.TechnologySlider__slideName, style.TechnologySlider__slideName_active].join(' ') : style.TechnologySlider__slideName}>
{technology.name}
</span>
</button>
</SwiperSlide>
))}
</Swiper>
<button
className={[style.TechnologySlider__button, style.TechnologySlider__button_prev].join(' ')}
ref={prevButton}
/>
<button
className={[style.TechnologySlider__button, style.TechnologySlider__button_next].join(' ')}
ref={nextButton}
/>
</div>
)
}

TechnologySlider.contextType = ThemeContext;

export default TechnologySlider;
Loading

0 comments on commit 608b384

Please sign in to comment.