From a64d5d238835da7a48ce8b17f989f1796009a42c Mon Sep 17 00:00:00 2001 From: Gideon Aryeetey Date: Tue, 9 Jul 2024 17:49:59 +0000 Subject: [PATCH 1/2] refactor: code clone component --- src/ui/views/RepoDetails/RepoDetails.jsx | 10 ++ .../RepoList/Components/RepoOverview.jsx | 116 +----------------- 2 files changed, 15 insertions(+), 111 deletions(-) diff --git a/src/ui/views/RepoDetails/RepoDetails.jsx b/src/ui/views/RepoDetails/RepoDetails.jsx index 0c5c9786..f1cc7f19 100644 --- a/src/ui/views/RepoDetails/RepoDetails.jsx +++ b/src/ui/views/RepoDetails/RepoDetails.jsx @@ -18,6 +18,8 @@ import AddUser from './Components/AddUser'; import { Code, Delete, RemoveCircle, Visibility } from '@material-ui/icons'; import { useNavigate, useParams } from 'react-router-dom'; import { UserContext } from '../../../context'; +import CodeActionButton from '../../components/CustomButtons/CodeActionButton'; +import { Box } from '@material-ui/core'; const useStyles = makeStyles((theme) => ({ root: { @@ -57,6 +59,9 @@ export default function RepoDetails() { if (isLoading) return
Loading...
; if (isError) return
Something went wrong ...
; + const { project: org, name } = data || {}; + const cloneURL = `${import.meta.env.VITE_SERVER_URI}/${org}/${name}.git`; + return ( @@ -73,6 +78,10 @@ export default function RepoDetails() { )} + + + +
@@ -117,6 +126,7 @@ export default function RepoDetails() {
+

diff --git a/src/ui/views/RepoList/Components/RepoOverview.jsx b/src/ui/views/RepoList/Components/RepoOverview.jsx index 772e8163..a25c4b40 100644 --- a/src/ui/views/RepoList/Components/RepoOverview.jsx +++ b/src/ui/views/RepoList/Components/RepoOverview.jsx @@ -5,16 +5,7 @@ import TableRow from '@material-ui/core/TableRow'; import Paper from '@material-ui/core/Paper'; import GridContainer from '../../../components/Grid/GridContainer'; import GridItem from '../../../components/Grid/GridItem'; -import { - CheckIcon, - ChevronDownIcon, - CodeIcon, - CodeReviewIcon, - CopyIcon, - LawIcon, - PeopleIcon, - TerminalIcon, -} from '@primer/octicons-react'; +import { CodeReviewIcon, LawIcon, PeopleIcon } from '@primer/octicons-react'; const colors = { '1C Enterprise': '#814CCC', @@ -578,13 +569,9 @@ const colors = { import axios from 'axios'; import moment from 'moment'; +import CodeActionButton from '../../../components/CustomButtons/CodeActionButton'; export default function Repositories(props) { - const [anchorEl, setAnchorEl] = React.useState(null); - const [open, setOpen] = React.useState(false); - const [placement, setPlacement] = React.useState(); - const [cloneURL, setCloneURL] = React.useState(null); - const [isCopied, setIsCopied] = React.useState(false); const [github, setGitHub] = React.useState({}); useEffect(() => { @@ -599,13 +586,8 @@ export default function Repositories(props) { }); }; - const handleClick = (newPlacement, org, name) => (event) => { - setIsCopied(false); - setAnchorEl(event.currentTarget); - setOpen((prev) => placement !== newPlacement || !prev); - setPlacement(newPlacement); - setCloneURL(`${import.meta.env.VITE_SERVER_URI}/${org}/${name}.git`); - }; + const { project: org, name } = props?.data || {}; + const cloneURL = `${import.meta.env.VITE_SERVER_URI}/${org}/${name}.git`; return ( @@ -686,95 +668,7 @@ export default function Repositories(props) {
- {' '} - - {' '} - Code - - - - -
- {' '} - - Clone - -
-
- - {cloneURL} - - - {!isCopied && ( - { - navigator.clipboard.writeText(`git clone ${cloneURL}`); - setIsCopied(true); - }} - > - - - )} - {isCopied && ( - - - - )} - -
-
-
- - Use Git and run this command in your IDE or Terminal 👍 - -
-
- - +
From c7cb51fdb2e54824a3fa76a2d53a6e329dd180c2 Mon Sep 17 00:00:00 2001 From: Gideon Aryeetey Date: Tue, 9 Jul 2024 17:51:28 +0000 Subject: [PATCH 2/2] refactor: code clone component --- .../CustomButtons/CodeActionButton.jsx | 117 ++++++++++++++++++ .../RepoList/Components/RepoOverview.jsx | 2 - 2 files changed, 117 insertions(+), 2 deletions(-) create mode 100644 src/ui/components/CustomButtons/CodeActionButton.jsx diff --git a/src/ui/components/CustomButtons/CodeActionButton.jsx b/src/ui/components/CustomButtons/CodeActionButton.jsx new file mode 100644 index 00000000..68c79631 --- /dev/null +++ b/src/ui/components/CustomButtons/CodeActionButton.jsx @@ -0,0 +1,117 @@ +import Popper from '@material-ui/core/Popper'; +import Paper from '@material-ui/core/Paper'; +import { + CheckIcon, + ChevronDownIcon, + CodeIcon, + CopyIcon, + TerminalIcon, +} from '@primer/octicons-react'; +import React, { useState } from 'react'; + +const CodeActionButton = ({ cloneURL }) => { + const [anchorEl, setAnchorEl] = useState(null); + const [open, setOpen] = useState(false); + const [placement, setPlacement] = useState(); + const [isCopied, setIsCopied] = useState(false); + + const handleClick = (newPlacement) => (event) => { + setIsCopied(false); + setAnchorEl(event.currentTarget); + setOpen((prev) => placement !== newPlacement || !prev); + setPlacement(newPlacement); + }; + + return ( + <> + + {' '} + Code + + + + +
+ {' '} + Clone +
+
+ + {cloneURL} + + + {!isCopied && ( + { + navigator.clipboard.writeText(`git clone ${cloneURL}`); + setIsCopied(true); + }} + > + + + )} + {isCopied && ( + + + + )} + +
+
+
+ + Use Git and run this command in your IDE or Terminal 👍 + +
+
+ + + + ); +}; + +export default CodeActionButton; diff --git a/src/ui/views/RepoList/Components/RepoOverview.jsx b/src/ui/views/RepoList/Components/RepoOverview.jsx index a25c4b40..ccf9ce2c 100644 --- a/src/ui/views/RepoList/Components/RepoOverview.jsx +++ b/src/ui/views/RepoList/Components/RepoOverview.jsx @@ -1,8 +1,6 @@ import React, { useEffect } from 'react'; import TableCell from '@material-ui/core/TableCell'; -import Popper from '@material-ui/core/Popper'; import TableRow from '@material-ui/core/TableRow'; -import Paper from '@material-ui/core/Paper'; import GridContainer from '../../../components/Grid/GridContainer'; import GridItem from '../../../components/Grid/GridItem'; import { CodeReviewIcon, LawIcon, PeopleIcon } from '@primer/octicons-react';