Add Grid Component Where Needed And Remove Store Folder

packages/app/package.json

@@ -66,13 +66,10 @@
     "react-docgen-typescript-loader": "^3.7.1",
     "react-dom": "^16.13.1",
     "react-player": "^2.2.0",
-    "react-redux": "^7.2.0",
     "react-scripts": "3.4.1",
     "react-spring": "^8.0.27",
-    "redux": "^4.0.5",
     "storybook-addon-jsx": "^7.1.15",
     "use-resize-observer": "^6.1.0",
-    "uuid": "^8.3.0",
     "video.js": "^7.8.3"
   },
   "browserslist": {

packages/app/src/App.tsx

@@ -1,17 +1,13 @@
 import React from 'react'
-import { Provider } from 'react-redux'
 import { ApolloProvider } from '@apollo/client'
 
-import store from './store'
 import { apolloClient } from '@/api'
 import { LayoutWithRouting } from '@/components'
 
 export default function App() {
   return (
-    <Provider store={store}>
-      <ApolloProvider client={apolloClient}>
-        <LayoutWithRouting />
-      </ApolloProvider>
-    </Provider>
+    <ApolloProvider client={apolloClient}>
+      <LayoutWithRouting />
+    </ApolloProvider>
   )
 }

packages/app/src/components/VideoGrid.tsx

@@ -16,7 +16,7 @@ type VideoGridProps = {
 }
 const VideoGrid: React.FC<VideoGridProps> = ({ videos }) => {
   return (
-    <Grid gap={spacing.xl} onResize={(siz) => console.log(siz)}>
+    <Grid gap={spacing.xl}>
       {videos.map((v, idx) => (
         <StyledVideoPreview
           key={idx}

packages/app/src/shared/components/InfiniteVideoGrid/InfiniteVideoGrid.tsx

@@ -75,6 +75,7 @@ const InfiniteVideoGrid: React.FC<InfiniteVideoGridProps> = ({
         <StyledVideoPreview
           title={v.title}
           channelName={v.channel.handle}
+          channelAvatarURL={v.channel.avatarPhotoURL}
           createdAt={v.publishedOnJoystreamAt}
           views={v.views}
           posterURL={v.thumbnailURL}

packages/app/src/store/actions/DummyAction.ts

@@ -1,13 +0,0 @@
-// This is just a placeholder. It should be used as a guideline and then deleted.
-
-import { ADD_DUMMY_ACTION, REMOVE_DUMMY_ACTION, Dummy, DummyActionTypes } from './../types/DummyTypes'
-
-export const AddDummy = (dummy: Dummy): DummyActionTypes => ({
-  type: ADD_DUMMY_ACTION,
-  dummy,
-})
-
-export const RemoveDummy = (id: string): DummyActionTypes => ({
-  type: REMOVE_DUMMY_ACTION,
-  id,
-})

packages/app/src/store/index.ts

@@ -1,9 +0,0 @@
-import { createStore } from 'redux'
-import rootReducer from './reducers'
-
-const store = createStore(
-  rootReducer,
-  (<any>window).__REDUX_DEVTOOLS_EXTENSION__ && (<any>window).__REDUX_DEVTOOLS_EXTENSION__()
-)
-
-export default store

packages/app/src/store/reducers/DummyReducer.ts

@@ -1,18 +0,0 @@
-// This is just a placeholder. It should be used as a guideline and then deleted.
-
-import { Dummy, DummyActionTypes, ADD_DUMMY_ACTION, REMOVE_DUMMY_ACTION } from './../types/DummyTypes'
-
-const initialState: Dummy[] = []
-
-const DummyReducer = (state = initialState, action: DummyActionTypes): Dummy[] => {
-  switch (action.type) {
-    case ADD_DUMMY_ACTION:
-      return [...state, action.dummy]
-    case REMOVE_DUMMY_ACTION:
-      return state.filter((dummy) => dummy.id !== action.id)
-    default:
-      return state
-  }
-}
-
-export default DummyReducer

packages/app/src/store/reducers/index.ts

@@ -1,6 +0,0 @@
-import { combineReducers } from 'redux'
-import DummyReducer from './DummyReducer'
-
-export default combineReducers({
-  DummyReducer,
-})

packages/app/src/store/types/DummyTypes.ts

@@ -1,21 +0,0 @@
-// This is just a placeholder. It should be used as a guideline and then deleted.
-
-export const ADD_DUMMY_ACTION = 'ADD_DUMMY_ACTION'
-export const REMOVE_DUMMY_ACTION = 'REMOVE_DUMMY_ACTION'
-
-export interface Dummy {
-  id: string
-  name: string
-}
-
-interface AddDummyAction {
-  type: typeof ADD_DUMMY_ACTION
-  dummy: Dummy
-}
-
-interface RemoveDummyAction {
-  type: typeof REMOVE_DUMMY_ACTION
-  id: string
-}
-
-export type DummyActionTypes = AddDummyAction | RemoveDummyAction

packages/app/src/views/ChannelView/ChannelView.style.tsx

@@ -35,12 +35,10 @@ export const VideoSectionHeader = styled.h5`
   font-size: ${theme.typography.sizes.h5};
 `
 
-export const VideoSectionGrid = styled.div`
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
-  grid-gap: ${theme.spacing.xl};
-`
 export const StyledAvatar = styled(Avatar)`
   max-width: 136px;
+  max-height: 136px;
+  width: 136px;
+  height: 136px;
   margin-right: ${theme.sizes.b6}px;
 `

packages/app/src/views/ChannelView/ChannelView.tsx

@@ -1,21 +1,12 @@
 import React from 'react'
-import { RouteComponentProps, useParams, navigate } from '@reach/router'
+import { RouteComponentProps, useParams } from '@reach/router'
 import { useQuery } from '@apollo/client'
 
-import routes from '@/config/routes'
 import { GET_CHANNEL } from '@/api/queries/channels'
 import { GetChannel, GetChannelVariables } from '@/api/queries/__generated__/GetChannel'
-import { VideoPreview } from '@/shared/components'
+import { VideoGrid } from '@/components'
 
-import {
-  Header,
-  VideoSection,
-  VideoSectionHeader,
-  VideoSectionGrid,
-  Title,
-  TitleSection,
-  StyledAvatar,
-} from './ChannelView.style'
+import { Header, VideoSection, VideoSectionHeader, Title, TitleSection, StyledAvatar } from './ChannelView.style'
 
 const ChannelView: React.FC<RouteComponentProps> = () => {
   const { id } = useParams()
@@ -28,10 +19,6 @@ const ChannelView: React.FC<RouteComponentProps> = () => {
   }
   const videos = data?.channel?.videos || []
 
-  const handleVideoClick = (id: string) => {
-    navigate(routes.video(id))
-  }
-
   return (
     <div>
       <Header coverPhotoURL={data.channel.coverPhotoURL}>
@@ -43,21 +30,7 @@ const ChannelView: React.FC<RouteComponentProps> = () => {
       {videos.length > 0 && (
         <VideoSection>
           <VideoSectionHeader>Videos</VideoSectionHeader>
-          <VideoSectionGrid>
-            {videos.map((video, idx) => (
-              <VideoPreview
-                key={idx}
-                title={video.title}
-                channelName={video.channel.handle}
-                channelAvatarURL={video.channel.avatarPhotoURL}
-                createdAt={video.publishedOnJoystreamAt}
-                duration={video.duration}
-                views={video.views}
-                posterURL={video.thumbnailURL}
-                onClick={() => handleVideoClick(video.id)}
-              />
-            ))}
-          </VideoSectionGrid>
+          <VideoGrid videos={videos} />
         </VideoSection>
       )}
     </div>

yarn.lock

@@ -16527,7 +16527,7 @@ react-inspector@^4.0.0:
     is-dom "^1.0.9"
     prop-types "^15.6.1"
 
-react-is@^16.12.0, react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6, react-is@^16.9.0:
+react-is@^16.12.0, react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -16569,17 +16569,6 @@ react-popper@^1.3.7:
     typed-styles "^0.0.7"
     warning "^4.0.2"
 
-react-redux@^7.2.0:
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.0.tgz#f970f62192b3981642fec46fd0db18a074fe879d"
-  integrity sha512-EvCAZYGfOLqwV7gh849xy9/pt55rJXPwmYvI4lilPM5rUT/1NxuuN59ipdBksRVSvz0KInbPnp4IfoXJXCqiDA==
-  dependencies:
-    "@babel/runtime" "^7.5.5"
-    hoist-non-react-statics "^3.3.0"
-    loose-envify "^1.4.0"
-    prop-types "^15.7.2"
-    react-is "^16.9.0"
-
 react-scripts@3.4.1:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-3.4.1.tgz#f551298b5c71985cc491b9acf3c8e8c0ae3ada0a"
@@ -16994,7 +16983,7 @@ redeyed@~2.1.0:
   dependencies:
     esprima "~4.0.0"
 
-redux@*, redux@^4.0.0, redux@^4.0.5:
+redux@*, redux@^4.0.0:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.5.tgz#4db5de5816e17891de8a80c424232d06f051d93f"
   integrity sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w==
@@ -19627,11 +19616,6 @@ uuid@^7.0.3:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-7.0.3.tgz#c5c9f2c8cf25dc0a372c4df1441c41f5bd0c680b"
   integrity sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg==
 
-uuid@^8.3.0:
-  version "8.3.0"
-  resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.0.tgz#ab738085ca22dc9a8c92725e459b1d507df5d6ea"
-  integrity sha512-fX6Z5o4m6XsXBdli9g7DtWgAx+osMsRRZFKma1mIUsLCz6vRvv+pz5VNbyu9UEDzpMWulZfvpgb/cmDXVulYFQ==
-
 v8-compile-cache@^2.0.3:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.1.1.tgz#54bc3cdd43317bca91e35dcaf305b1a7237de745"