noti

src/ts/@overflow/app/views/layout/LogoBar.tsx

@@ -35,7 +35,7 @@ export class LogoBar extends React.Component<any, any> {
             position='right'
             icon='bell'
           />}
-            on='click' basic wide >
+            on='click' wide >
             <Notification />
           </Popup>
 

src/ts/@overflow/commons/react/component/Notification.tsx

@@ -9,7 +9,7 @@ export interface Props {
 }
 
 export interface State {
-
+    list: object[];
 }
 
 export class Notification extends React.Component<Props, State> {
@@ -17,36 +17,54 @@ export class Notification extends React.Component<Props, State> {
     constructor(props: Props, context: State) {
         super(props, context);
         this.state = {
+            list: null,
         };
     }
+    public componentWillMount(): void {
+        let tempData = [
+            {
+                'icon': 'github',
+                'header': 'Notification title1',
+                'content': 'Notification content blahblahblahblahblah',
+            },
+            {
+                'icon': 'github',
+                'header': 'Notification title2',
+                'content': 'Notification content2 blahblahblahblahblah',
+            },
+            {
+                'icon': 'github',
+                'header': 'Notification title3',
+                'content': 'Notification content3 blahblahblahblahblahblahblahblahblahblahblahblahblah',
+            },
+        ];
+        this.setState({
+            list: tempData,
+        });
+    }
+
+    public renderItems(): (JSX.Element | JSX.Element[]) {
+        if (this.state.list === null || this.state.list.length === 0) {
+            return <div>No user notifications found. </div>;
+        }
+        return this.state.list.map((item: any, index: number) => (
+            <List.Item key={index}>
+                <List.Icon name={item.icon} size='large' verticalAlign='middle' />
+                <List.Content>
+                    <List.Header as='a'>{item.header}</List.Header>
+                    <List.Description as='a'>{item.content}</List.Description>
+                </List.Content>
+            </List.Item>
+        ));
+    }
 
     public render(): JSX.Element {
 
         return (
             <Container fluid>
-                <Header as='h4' content='User Notifications'/>
+                <Header as='h4' content='User Notifications' />
                 <List divided relaxed>
-                    <List.Item>
+                    {this.renderItems()}
-                        <List.Icon name='github' size='large' verticalAlign='middle' />
-                        <List.Content>
-                            <List.Header as='a'>Semantic-Org/Semantic-UI</List.Header>
-                            <List.Description as='a'>Updated 10 mins ago</List.Description>
-                        </List.Content>
-                    </List.Item>
-                    <List.Item>
-                        <List.Icon name='github' size='large' verticalAlign='middle' />
-                        <List.Content>
-                            <List.Header as='a'>Semantic-Org/Semantic-UI-Docs</List.Header>
-                            <List.Description as='a'>Updated 22 mins ago</List.Description>
-                        </List.Content>
-                    </List.Item>
-                    <List.Item>
-                        <List.Icon name='github' size='large' verticalAlign='middle' />
-                        <List.Content>
-                            <List.Header as='a'>Semantic-Org/Semantic-UI-Meteor</List.Header>
-                            <List.Description as='a'>Updated 34 mins ago</List.Description>
-                        </List.Content>
-                    </List.Item>
                 </List>
             </Container>
         );