Vista de usuario

src/components/Nav.jsx

@@ -3,6 +3,7 @@ import {Link} from "react-router-dom";
 import './Nav.scss';
 import {useStateValue} from '../services/State'
 import {getUser} from "../services/user_service";
+import {capitalize} from "../services/utils";
 
 export const Nav = (props) => {
   const context = useStateValue()[0];
@@ -31,7 +32,7 @@ export const Nav = (props) => {
       </ul>
     } else {
       return <ul className='nav-links'>
-        <li><Link to={`/user/${user.id}`}>{user.username}</Link></li>
+        <li><Link to={`/user/${user.id}`}>{capitalize(user.username)}</Link></li>
         <li className='link'>
           <Link to='/logout'>Cerrar Sesión</Link>
         </li>

src/components/SocialNetworks.jsx

@@ -0,0 +1,67 @@
+import React, {Fragment, useState} from 'react';
+import {FaTwitter, FaFacebook, FaInstagram, FaYoutube, FaTwitch} from "react-icons/fa";
+import {getSocialNetworks} from "../services/user_service";
+
+import './SocialNetworks.scss';
+
+const SocialNetwork = (props) => {
+  if(!props.username){
+    return null;
+  }
+
+
+  let link = '';
+  let icon = null;
+
+  switch (props.source) {
+    case 'twitter':
+      link = `https://twitter.com/${props.username}`;
+      icon = <FaTwitter/>
+      break;
+    case 'facebook':
+      link = `https://facebook.com/${props.username}`;
+      icon = <FaFacebook/>
+      break;
+    case 'instagram':
+      link = `https://instagram.com/${props.username}`;
+      icon = <FaInstagram/>
+      break;
+    case 'youtube':
+      link = `https://youtube.com/channel/${props.username}`;
+      icon = <FaYoutube/>
+      break;
+    case 'twitch':
+      link = `https://twitch.com/${props.username}`;
+      icon = <FaTwitch/>
+      break;
+    default:
+      console.log('oh no');
+      return null;
+  }
+
+  return (
+    <a href={link} target={'_blank'} className={'social_network'}>{icon}</a>
+  )
+}
+
+export const SocialNetworks = (props) => {
+  const [socialNetworks, setSocialNetworks] = useState(null);
+
+  if (socialNetworks === null) {
+    getSocialNetworks(null, props.user).then(setSocialNetworks);
+  }
+
+  if (socialNetworks === null) {
+    return null;
+  }
+
+  return (
+    <Fragment>
+      <SocialNetwork source={'twitter'} username={socialNetworks.twitter}/>
+      <SocialNetwork source={'facebook'} username={socialNetworks.facebook}/>
+      <SocialNetwork source={'instagram'} username={socialNetworks.instagram}/>
+      <SocialNetwork source={'youtube'} username={socialNetworks.youtube}/>
+      <SocialNetwork source={'twitch'} username={socialNetworks.twitch}/>
+    </Fragment>
+  )
+}

src/components/SocialNetworks.scss

@@ -0,0 +1,9 @@
+
+.social_network {
+  margin-right: .5em;
+  svg {
+    display: inline-block;
+    height: 1.5em;
+    width: 1.5em;
+  }
+}

src/index.jsx

@@ -20,63 +20,65 @@ import {Recomended} from "./views/Recomended";
 import {SongView} from "./views/Song";
 import {Grid, RowCol} from './components/Grid';
 import {AuthMiddleware, AuthLogin, AuthLogout} from "./components/Auth";
+import {UserView} from "./views/User";
 
 const Main = (props) => {
-    const navigate = (query) => props.history.push(`/search?query=${query}`);
+  const navigate = (query) => props.history.push(`/search?query=${query}`);
 
-    return (
-        <Grid>
-            <RowCol><h1>Busca la musica que te gusta!</h1></RowCol>
-            <RowCol><SearchBar history={props.history} onQueryChanged={navigate}/></RowCol>
-            <RowCol><Recomended/></RowCol>
-        </Grid>
-    )
+  return (
+    <Grid>
+      <RowCol><h1>Busca la musica que te gusta!</h1></RowCol>
+      <RowCol><SearchBar history={props.history} onQueryChanged={navigate}/></RowCol>
+      <RowCol><Recomended/></RowCol>
+    </Grid>
+  )
 }
 
 const NoRoute = (props) => {
-    return (
-        <Grid>
-            <RowCol><h1>Esa pagina no existe</h1></RowCol>
-            <RowCol>
-                <button className='link' onClick={() => props.history.goBack()}>Volver</button>
-            </RowCol>
-        </Grid>
-    );
+  return (
+    <Grid>
+      <RowCol><h1>Esa pagina no existe</h1></RowCol>
+      <RowCol>
+        <button className='link' onClick={() => props.history.goBack()}>Volver</button>
+      </RowCol>
+    </Grid>
+  );
 }
 
 const App = () => (
-    <main>
-        <BrowserRouter>
-            <ScrollToTopRouter/>
-            <AuthMiddleware/>
-            <Nav/>
-            <Switch>
-                <Route path='/search/:who?' component={Search}/>
+  <main>
+    <BrowserRouter>
+      <ScrollToTopRouter/>
+      <AuthMiddleware/>
+      <Nav/>
+      <Switch>
+        <Route path='/search/:who?' component={Search}/>
 
-                <Route path='/artist/:mbid?' component={ArtistView}/>
-                <Route path='/disc/:mbid?' component={DiscView}/>
-                <Route path='/release/:mbid?' component={ReleaseView}/>
-                <Route path='/song/:mbid?' component={SongView}/>
+        <Route path='/artist/:mbid?' component={ArtistView}/>
+        <Route path='/disc/:mbid?' component={DiscView}/>
+        <Route path='/release/:mbid?' component={ReleaseView}/>
+        <Route path='/song/:mbid?' component={SongView}/>
 
-                <Route exact path='/login' component={AuthLogin}/>
-                <Route exact path='/logout' component={AuthLogout}/>
+        <Route exact path='/user/:id?' component={UserView}/>
+        <Route exact path='/login' component={AuthLogin}/>
+        <Route exact path='/logout' component={AuthLogout}/>
 
-                <Route exact path='/' component={Main}/>
-                <Route path='*' component={NoRoute}/>
-            </Switch>
-        </BrowserRouter>
-    </main>
+        <Route exact path='/' component={Main}/>
+        <Route path='*' component={NoRoute}/>
+      </Switch>
+    </BrowserRouter>
+  </main>
 );
 
 const AppWithState = () => {
-    return (
-        <StateProvider>
-            <App/>
-        </StateProvider>
-    );
+  return (
+    <StateProvider>
+      <App/>
+    </StateProvider>
+  );
 }
 
 ReactDOM.render(
-    <AppWithState/>,
-    document.getElementById('root')
+  <AppWithState/>,
+  document.getElementById('root')
 );

src/services/user_service.js

@@ -15,3 +15,10 @@ export const getUser = async (token, id) => {
   return response.data;
 }
 
+export const getSocialNetworks = async (token, id) => {
+  const url = `${baseUrl}/user/${id}/social_networks`
+  const response = await axios.get(url, {
+    headers: {'AUTHORIZATION': `Bearer ${token}`}
+  });
+  return response.data;
+}

src/views/User.jsx

@@ -0,0 +1,33 @@
+import React, {useEffect, useState} from 'react';
+import {Col, Grid, Row, RowCol} from "../components/Grid";
+import {useStateValue} from "../services/State";
+import {getSocialNetworks, getUser} from "../services/user_service";
+import {capitalize} from "../services/utils";
+import {SocialNetworks} from "../components/SocialNetworks";
+
+export const UserView = (props) => {
+  const context = useStateValue()[0];
+  const [user, setUser] = useState(null);
+
+  if (user === null) {
+    getUser(null, props.match.params.id).then(setUser)
+  }
+
+  if (user === null) {
+    return null;
+  }
+
+  return (
+    <Grid>
+      <RowCol>
+        <h1>{capitalize(user.username)}</h1>
+      </RowCol>
+      <RowCol>
+        <SocialNetworks user={user.id}/>
+      </RowCol>
+      <RowCol>
+        <h2>Lista</h2>
+      </RowCol>
+    </Grid>
+  )
+}