diff --git a/static/js/app.tsx b/static/js/app.tsx index b59f05101..21ccc5298 100644 --- a/static/js/app.tsx +++ b/static/js/app.tsx @@ -1,9 +1,4 @@ -import * as React from "react"; -import * as angular from "angular"; - -import repoHeader from "./directives/components/component"; - -angular.module('quayPages').directive('repoHeader', function(reactDirective) { - return reactDirective(repoHeader); -}); +import {rpDirectives as repoPage} from "./directives/components/pages/repo-page/main"; +// Init for each page +repoPage(); diff --git a/static/js/directives/components/pages/repo-page/body.tsx b/static/js/directives/components/pages/repo-page/body.tsx new file mode 100644 index 000000000..6b145c0b1 --- /dev/null +++ b/static/js/directives/components/pages/repo-page/body.tsx @@ -0,0 +1,10 @@ +import * as React from "react"; + +class body extends React.Component<{}, {}> { + render () { + return
The component for the main content
; + } +} + +export default body; + diff --git a/static/js/directives/components/component.tsx b/static/js/directives/components/pages/repo-page/header.tsx similarity index 71% rename from static/js/directives/components/component.tsx rename to static/js/directives/components/pages/repo-page/header.tsx index 0c5b6919e..606345da8 100644 --- a/static/js/directives/components/component.tsx +++ b/static/js/directives/components/pages/repo-page/header.tsx @@ -2,7 +2,7 @@ import * as React from "react"; class repoHeader extends React.Component<{}, {}> { render () { - return

The component for the header

; + return
The component for the header
; } } diff --git a/static/js/directives/components/pages/repo-page/main.tsx b/static/js/directives/components/pages/repo-page/main.tsx new file mode 100644 index 000000000..9db546f49 --- /dev/null +++ b/static/js/directives/components/pages/repo-page/main.tsx @@ -0,0 +1,21 @@ +import * as angular from "angular"; + +import repoHeader from "./header"; +import repoSidebar from "./sidebar"; +import repoBody from "./body"; + +export function rpDirectives(){ + angular.module('quayPages').directive('rpHeader', function(reactDirective) { + return reactDirective(repoHeader); + }); + + angular.module('quayPages').directive('rpSidebar', function(reactDirective) { + return reactDirective(repoSidebar); + }); + + angular.module('quayPages').directive('rpBody', function(reactDirective) { + return reactDirective(repoBody); + }); +} + + \ No newline at end of file diff --git a/static/js/directives/components/pages/repo-page/sidebar.tsx b/static/js/directives/components/pages/repo-page/sidebar.tsx new file mode 100644 index 000000000..fe51ae950 --- /dev/null +++ b/static/js/directives/components/pages/repo-page/sidebar.tsx @@ -0,0 +1,10 @@ +import * as React from "react"; + +class repoSidebar extends React.Component<{}, {}> { + render () { + return
The component for the sidebar
; + } +} + +export default repoSidebar; + diff --git a/static/js/pages/repo-view.js b/static/js/pages/repo-view.js index 09beb7d3b..3810f294c 100644 --- a/static/js/pages/repo-view.js +++ b/static/js/pages/repo-view.js @@ -11,11 +11,6 @@ }]); function RepoViewCtrl($scope, $routeParams, $location, $timeout, ApiService, UserService, AngularPollChannel, ImageLoaderService, CookieService) { - $scope.reactProps = { - firstProp: 'Prop 1', - secondProp: 'Prop 2' - }; - $scope.namespace = $routeParams.namespace; $scope.name = $routeParams.name; diff --git a/static/partials/repo-view.html b/static/partials/repo-view.html index f3da86092..4a4a368c2 100644 --- a/static/partials/repo-view.html +++ b/static/partials/repo-view.html @@ -5,7 +5,9 @@
- + + +
diff --git a/tslint.json b/tslint.json new file mode 100644 index 000000000..10a4b36d3 --- /dev/null +++ b/tslint.json @@ -0,0 +1,5 @@ +{ + "rules": { + "no-default-export": true + } +} \ No newline at end of file