Skip to content

Commit

Permalink
feat: migration to typescript (#30)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ropali
ropali authored Dec 21, 2024
1 parent c0a5cfd commit db1a1a0
Show file tree
Hide file tree
Showing 73 changed files with 1,846 additions and 1,165 deletions.
4 changes: 2 additions & 2 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tauri + React</title>
<title>Dockyard</title>
</head>

<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
8 changes: 6 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"build": "tsc",
"preview": "vite preview",
"tauri": "tauri"
},
Expand All @@ -14,24 +14,28 @@
"@patternfly/react-log-viewer": "^5.2.0",
"@sweetalert2/theme-dark": "^5.0.18",
"@tauri-apps/api": "^1",
"@types/node": "^22.10.1",
"@types/react": "^18.3.12",
"@types/react-dom": "^18.3.1",
"chart.js": "^4.4.4",
"react": "^18.2.0",
"react-chartjs-2": "^5.2.0",
"react-dom": "^18.2.0",
"react-icons": "^5.2.1",
"react-router-dom": "^6.25.1",
"react-syntax-highlighter": "^15.5.0",
"react-table": "^7.8.0",
"sweetalert2": "^11.14.0",
"tauri-plugin-store-api": "https://github.com/tauri-apps/tauri-plugin-store#v1"
},
"devDependencies": {
"@tauri-apps/cli": "^1",
"@types/react-syntax-highlighter": "^15.5.13",
"@vitejs/plugin-react": "^4.2.1",
"autoprefixer": "^10.4.19",
"daisyui": "^4.12.10",
"postcss": "^8.4.39",
"tailwindcss": "^3.4.4",
"typescript": "^5.7.2",
"vite": "^5.3.1"
}
}
30 changes: 15 additions & 15 deletions src/App.jsx → src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,31 @@
import React, {useEffect, useRef} from 'react';
import {Route, Routes, useLocation, useNavigate} from 'react-router-dom';
import Sidebar from './components/Sidebar';
import ContainersScreen from './components/Screens/ContainersScreen';
import ImagesScreen from './components/Screens/ImagesScreen';
import VolumesScreen from './components/Screens/VolumesScreen';
import NetworkScreen from './components/Screens/NetworkScreen';
import SettingsScreen from './components/Screens/SettingsScreen';
import {useSettings} from './state/SettingsContext';
import {DEFAULT_THEME, DOCKER_SERVICE_PING_INTERVAL} from './constants';
import {invoke} from "@tauri-apps/api/tauri";
import ErrorScreen from "./components/Screens/ErrorScreen.jsx";
import ErrorScreen from "./components/Screens/ErrorScreen";
import ContainersScreen from './components/Screens/ContainersScreen';
import ImagesScreen from "./components/Screens/ImagesScreen";
import VolumesScreen from "./components/Screens/VolumesScreen";
import NetworkScreen from "./components/Screens/NetworkScreen";
import SettingsScreen from "./components/Screens/SettingsScreen";

function App() {
const App: React.FC = () => {
const {settings} = useSettings();
const navigate = useNavigate();
const location = useLocation();
const intervalRef = useRef(null);
const intervalRef = useRef<NodeJS.Timeout | null>(null);

const loadTheme = () => {
const loadTheme = (): void => {
document.documentElement.setAttribute('data-theme', settings?.theme || DEFAULT_THEME);
}

const ping = () => {
invoke("ping").then(_ => {
const ping = (): void => {
invoke("ping").then((_: unknown) => {
// DO NOTHING
}).catch((e) => {
console.log(e)
}).catch((e: Error) => {
console.log(e);
navigate("/error", {state: {message: "Docker API not reachable.\nMake sure Docker API is running at unix:///var/run/docker.sock"}});
});
}
Expand All @@ -51,7 +51,7 @@ function App() {

return (
<div className="flex h-screen w-screen overflow-hidden bg-base-100">
<Sidebar className="w-64 flex-shrink-0"/>
<Sidebar />
<div className="flex-1 flex flex-col overflow-hidden">
<main className="flex p-5 bg-base-200 flex-1 overflow-hidden mb-2">
<Routes>
Expand All @@ -60,7 +60,7 @@ function App() {
<Route path="/volumes" element={<VolumesScreen/>}/>
<Route path="/networks" element={<NetworkScreen/>}/>
<Route path="/settings" element={<SettingsScreen/>}/>
<Route path="/error" element={<ErrorScreen/>}/>
<Route path="/error" element={<ErrorScreen location={{state: {message: "An unexpected error occurred"}}}/>}/>
</Routes>
</main>
</div>
Expand Down
46 changes: 24 additions & 22 deletions src/Icons/index.jsx → src/Icons/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import * as React from "react";

export function IconBxsTachometer(props) {
interface IconProps extends React.SVGProps<SVGSVGElement> {}

export function IconBxsTachometer(props: IconProps) {
return (
<svg
viewBox="0 0 24 24"
Expand All @@ -16,7 +18,7 @@ export function IconBxsTachometer(props) {
}


export function IconContainerTwentyFour(props) {
export function IconContainerTwentyFour(props: IconProps) {
return (
<svg
viewBox="0 0 24 24"
Expand All @@ -34,7 +36,7 @@ export function IconContainerTwentyFour(props) {
}


export function IconStack2(props) {
export function IconStack2(props: IconProps) {
return (
<svg
fill="none"
Expand All @@ -53,7 +55,7 @@ export function IconStack2(props) {
);
}

export function IconDatabaseCheckOutline(props) {
export function IconDatabaseCheckOutline(props: IconProps) {
return (
<svg
viewBox="0 0 24 24"
Expand All @@ -69,7 +71,7 @@ export function IconDatabaseCheckOutline(props) {
}


export function IconServerNetworkAlt(props) {
export function IconServerNetworkAlt(props: IconProps) {
return (
<svg
data-name="Layer 1"
Expand All @@ -85,7 +87,7 @@ export function IconServerNetworkAlt(props) {
);
}

export function IconDocker(props) {
export function IconDocker(props: IconProps) {
return (
<svg
viewBox="0 0 640 512"
Expand All @@ -100,7 +102,7 @@ export function IconDocker(props) {
}


export function IconBxCog(props) {
export function IconBxCog(props: IconProps) {
return (
<svg
viewBox="0 0 24 24"
Expand All @@ -118,7 +120,7 @@ export function IconBxCog(props) {
}


export function IconTextWrap(props) {
export function IconTextWrap(props: IconProps) {
return (
<svg
viewBox="0 0 24 24"
Expand All @@ -134,7 +136,7 @@ export function IconTextWrap(props) {
);
}

export function IconArrowDownCircleFill(props) {
export function IconArrowDownCircleFill(props: IconProps) {
return (
<svg
fill="currentColor"
Expand All @@ -150,7 +152,7 @@ export function IconArrowDownCircleFill(props) {
}


export function IconArrowUpCircleFill(props) {
export function IconArrowUpCircleFill(props: IconProps) {
return (
<svg
fill="currentColor"
Expand All @@ -165,7 +167,7 @@ export function IconArrowUpCircleFill(props) {
);
}

export function IconBxTrashAlt(props) {
export function IconBxTrashAlt(props: IconProps) {
return (
<svg
viewBox="0 0 24 24"
Expand All @@ -180,7 +182,7 @@ export function IconBxTrashAlt(props) {
);
}

export function IconRestart(props) {
export function IconRestart(props: IconProps) {
return (
<svg
viewBox="0 0 24 24"
Expand All @@ -196,7 +198,7 @@ export function IconRestart(props) {
}


export function IconBxTerminal(props) {
export function IconBxTerminal(props: IconProps) {
return (
<svg
viewBox="0 0 24 24"
Expand All @@ -213,7 +215,7 @@ export function IconBxTerminal(props) {
}


export function IconWeb(props) {
export function IconWeb(props: IconProps) {
return (
<svg
viewBox="0 0 24 24"
Expand All @@ -228,7 +230,7 @@ export function IconWeb(props) {
);
}

export function IconPlayCircle(props) {
export function IconPlayCircle(props: IconProps) {
return (
<svg
viewBox="0 0 1024 1024"
Expand All @@ -245,7 +247,7 @@ export function IconPlayCircle(props) {
);
}

export function IconCircleStop(props) {
export function IconCircleStop(props: IconProps) {
return (
<svg
viewBox="0 0 512 512"
Expand All @@ -261,7 +263,7 @@ export function IconCircleStop(props) {
}


export function IconTag(props) {
export function IconTag(props: IconProps) {
return (
<svg
viewBox="0 0 1024 1024"
Expand All @@ -277,7 +279,7 @@ export function IconTag(props) {
}


export function IconDownload(props) {
export function IconDownload(props: IconProps) {
return (
<svg fill="none" viewBox="0 0 24 24" height="1em" width="1em" {...props}>
<path
Expand All @@ -292,7 +294,7 @@ export function IconDownload(props) {
);
}

export function IconHistory(props) {
export function IconHistory(props: IconProps) {
return (
<svg
viewBox="0 0 24 24"
Expand All @@ -308,7 +310,7 @@ export function IconHistory(props) {
}


export function IconSearch(props) {
export function IconSearch(props: IconProps) {
return (
<svg
viewBox="0 0 1024 1024"
Expand All @@ -323,7 +325,7 @@ export function IconSearch(props) {
);
}

export function IconCopy(props) {
export function IconCopy(props: IconProps) {
return (
<svg
viewBox="0 0 24 24"
Expand All @@ -338,7 +340,7 @@ export function IconCopy(props) {
);
}

export function IconDatabase(props) {
export function IconDatabase(props: IconProps) {
return (
<svg
viewBox="0 0 32 32"
Expand Down
16 changes: 13 additions & 3 deletions src/components/Containers/ContainerCard.jsx → src/components/Containers/ContainerCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,15 @@
const ContainerCard = ({ container, onClick, isSelected }) => {
const statusColor = container.Status.includes("Exited") ? 'bg-red-500' : 'bg-green-500';
import React from 'react';

import { Container } from '../../models/Container';

interface ContainerCardProps {
container: Container;
onClick: () => void;
isSelected: boolean;
}

const ContainerCard = ({ container, onClick, isSelected }: ContainerCardProps) => {
const statusColor = !container.isRunning() ? 'bg-red-500' : 'bg-green-500';

return (
<div
Expand All @@ -11,7 +21,7 @@ const ContainerCard = ({ container, onClick, isSelected }) => {
>
<div className="flex items-center mb-1">
<div className={`w-3 h-3 rounded-full ${statusColor} mr-2`}></div>
<h1 className="text-sm font-semibold">{container.Names[0].slice(1)}</h1>
<h1 className="text-sm font-semibold">{container.getName()}</h1>
</div>
<div className="mb-1">
<p className="text-xs ">
Expand Down
Loading

0 comments on commit db1a1a0

Please sign in to comment.