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