Creator detail beautiful next steps (ZcashFoundation#13)

## What

Make the creator detail beautiful

## Why

People will be proud to share and it will be a good place to learn about
someone.

py/dj/apps/g12f/migrations/0052_auto_20221116_0159.py

@@ -0,0 +1,33 @@
+# Generated by Django 3.2.12 on 2022-11-16 01:59
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('g12f', '0051_alter_creator_tuzis'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='creator',
+            name='avatar_url',
+            field=models.URLField(blank=True),
+        ),
+        migrations.AddField(
+            model_name='creator',
+            name='banner_url',
+            field=models.URLField(blank=True),
+        ),
+        migrations.AddField(
+            model_name='creator',
+            name='description',
+            field=models.TextField(blank=True, max_length=1024),
+        ),
+        migrations.AddField(
+            model_name='creator',
+            name='full_name',
+            field=models.CharField(blank=True, max_length=128),
+        ),
+    ]

py/dj/apps/g12f/models/creator.py

@@ -23,6 +23,12 @@ class Creator(AbstractUser):
         help_text="Creator's usable 2Z credits",
     )
 
+    # https://github.com/free2z/zuu/issues/33
+    avatar_url = models.URLField(blank=True)
+    banner_url = models.URLField(blank=True)
+    full_name = models.CharField(max_length=128, blank=True)
+    description = models.TextField(max_length=1024, blank=True)
+
     class Meta:
         verbose_name = "Creator"
         verbose_name_plural = "Creators"

py/dj/apps/g12f/serializers/creator.py

@@ -52,6 +52,10 @@ class Meta:
             'zpage_set', 'zpages',
             'updateAll',
             'tuzis',
+            'avatar_url',
+            'banner_url',
+            'full_name',
+            'description',
         ]
         read_only_fields = [
             'total', 'zpage_set', 'is_verified',
@@ -89,6 +93,12 @@ class Meta:
             'total',
             'is_verified',
             'zpages',
+            'avatar_url',
+            'banner_url',
+            'full_name',
+            # TODO: maybe strip markdown and/or truncate?
+            # dont need for now
+            # 'description',
         ]
         # read_only_fields = ['total', 'zpage_set']
         model = Creator
@@ -109,7 +119,16 @@ class Meta:
             'username',
             'total',
             'is_verified',
+            # TODO: refactor to get zpages from zpages API and
+            # have this only be a complete list of slugs?
+            # maybe we think about how this scales. I could see someone
+            # having 1000 zpages some day. I think list of slugs would
+            # work indefinitely? ...
             'zpages',
+            'avatar_url',
+            'banner_url',
+            'full_name',
+            'description',
         ]
         model = Creator
         extra_fields = []

py/dj/apps/g12f/views/zpage.py

@@ -79,14 +79,14 @@ class zPageView(
     def get_queryset(self):
         request = self.request
 
-        is_funder = False
-        has_auth = request.user.is_authenticated
-        if has_auth:
-            is_funder = (request.user.total >= 0.01)
+        # is_funder = False
+        # has_auth = request.user.is_authenticated
+        # if has_auth:
+        #     is_funder = (request.user.total >= 0.01)
 
-        published = Q(is_published=True)
-        published_and_funded = Q(is_published=True, is_funded=True)
         is_owner = Q(creator=request.user)
+        published = Q(is_published=True) | is_owner
+        published_and_funded = Q(is_published=True, is_funded=True) | is_owner
         in_search = published_and_funded
 
         if self.action == "create":
@@ -99,20 +99,23 @@ def get_queryset(self):
                 q = zPage.objects.filter(category__in=cats.upper().split(','))
             else:
                 q = zPage.objects.all()
-            # Can see anything published, whether funded or not
-            if is_funder:
-                q = q.filter(published | is_owner)
-            # unprivileged to see the non-funded
-            elif has_auth:
-                q = q.filter(in_search | is_owner)
-            # unauthenticated
-            else:
-                q = q.filter(in_search)
+            # Letting everyone see everything for now
+            # # Can see anything published, whether funded or not
+            # if is_funder:
+            #     q = q.filter(published | is_owner)
+            # # unprivileged to see the non-funded
+            # elif has_auth:
+            #     q = q.filter(in_search | is_owner)
+            # # unauthenticated
+            # else:
+            # print("before filter", q)
+            q = q.filter(in_search)
+            # print("after", q)
 
             if self.request.query_params.get('mine'):
                 if self.request.user.is_anonymous:
                     raise exceptions.NotAuthenticated
-                q = q.filter(creator=self.request.user)
+                q = q.filter(is_owner)
                 q = q.order_by('-updated_at')
             else:
                 # Only ever include vanity="" in list when they are mine
@@ -123,29 +126,37 @@ def get_queryset(self):
                 ).exclude(
                     vanity__isnull=True
                 )
+            # print("after mine", q)
 
             if self.request.query_params.get('funded') == "0":
+                # print("exclude unfunded")
                 q = q.exclude(is_funded=True)
 
             if self.request.query_params.get('unfunded') == "0":
+                # print("exclude funded")
                 q = q.exclude(is_funded=False)
 
             if self.request.query_params.get('unverified') == "0":
+                # print("exclude unverified")
                 q = q.exclude(is_verified=False)
 
             return q
 
         if self.action == 'retrieve':
+            # Now we are giving away 13 2Z that a new user could use
+            # to fund a page. So, let's let everyone see everything that
+            # is published.
+            # TODO: cleanup
             # For retrieve, people can see more than list
             # a funded, published page without a vanity, for example
             # funder - can see anything published + the ones they own
             # authd - can see anything publshed *and funded* + os
-            if is_funder:
-                return zPage.objects.filter(published | is_owner)
-            if has_auth:
-                return zPage.objects.filter(published_and_funded | is_owner)
-            else:
-                return zPage.objects.filter(published_and_funded)
+            # if is_funder:
+            return zPage.objects.filter(published | is_owner)
+            # if has_auth:
+            #     return zPage.objects.filter(published_and_funded | is_owner)
+            # else:
+            #     return zPage.objects.filter(published_and_funded)
 
         if self.action in ['update', 'partial_update', 'destroy']:
             if request.user.is_anonymous:

ts/react/free2z/src/App.tsx

@@ -14,12 +14,13 @@ import EditPage from "./EditPage"
 import Begin from "./Begin"
 import PageDetail from "./PageDetail"
 import Profile from "./Profile"
-import Find from "./Find"
+import Find from "./components/Find"
 import CreatorDetail from "./CreatorDetail"
 import Footer from "./components/Footer"
 import SimpleText from "./components/SimpleText"
 import Terms from "./components/Terms"
 import Privacy from "./components/Privacy"
+import FindzPagesPage from "./FindzPagesPage"
 
 function App() {
     const prefersDark = useMediaQuery("(prefers-color-scheme: dark)")
@@ -30,15 +31,31 @@ function App() {
 
     const [darkMode, setDarkMode] = React.useState(dmode)
 
-    const theme = React.useMemo(
-        () =>
-            createTheme({
-                palette: {
-                    mode: darkMode ? "dark" : "light",
-                },
-            }),
-        [darkMode]
-    )
+    const theme = React.useMemo(() =>
+        createTheme({
+            palette: {
+                mode: darkMode ? "dark" : "light",
+            },
+        }), [darkMode])
+
+    // TODO:
+    // https://mui.com/material-ui/customization/typography/#responsive-font-sizes
+    // more work on typography is needed
+    theme.typography.h3 = {
+        fontSize: '1.8rem',
+        [theme.breakpoints.up('sm')]: {
+            fontSize: '2.0rem',
+        },
+        [theme.breakpoints.up('md')]: {
+            fontSize: '2.4rem',
+        },
+        [theme.breakpoints.up('lg')]: {
+            fontSize: '2.6rem',
+        },
+        [theme.breakpoints.up('xl')]: {
+            fontSize: '2.8rem',
+        },
+    };
 
     return (
         <ThemeProvider theme={theme}>
@@ -53,10 +70,9 @@ function App() {
                 <Route
                     path="/find"
                     element={
-                        <Find
+                        <FindzPagesPage
                             darkMode={darkMode}
                             setDarkMode={setDarkMode}
-                            mine={false}
                         />
                     }
                 />

ts/react/free2z/src/Begin.tsx

@@ -6,17 +6,22 @@ import { Grid } from "@mui/material"
 import CreatorLoginModal from "./CreatorLoginModal"
 import LoadingBackdrop from "./components/LoadingBackdrop"
 import { getRandom } from "./Constants"
+import { PublicCreator } from "./CreatorDetail"
 
-export interface Creator {
+export interface Creator extends PublicCreator {
     username: string
     email: string
     p2paddr: string
     first_name: string
     last_name: string
     total: number
-    zpages: number
+    // zpages: number
     updateAll: boolean
     tuzis: string
+    avatar_url: string
+    banner_url: string
+    full_name: string
+    description: string
 }
 
 function Begin() {
@@ -28,7 +33,7 @@ function Begin() {
         first_name: "",
         last_name: "",
         total: 0,
-        zpages: 0,
+        // zpages: 0,
     } as Creator | null)
     const navigate = useNavigate()
 
@@ -43,13 +48,7 @@ function Begin() {
                 setCreator(res.data)
                 setAuth(true)
                 setLoading(false)
-                // not so efficient ... maybe we put the count in the auth user
-                // console.log("creator BEGIN", creator)
-                if (creator && creator.zpages > 1) {
-                    navigate("/profile")
-                } else {
-                    navigate("/edit/new")
-                }
+                navigate("/profile")
             })
             .catch((res) => {
                 // console.log('fail', res);

ts/react/free2z/src/CreatorDetail.tsx

@@ -16,6 +16,11 @@ export interface PublicCreator {
     username: string
     is_verified: boolean
     total: number
+    full_name: string
+    avatar_url: string
+    banner_url: string
+    description: string
+    // TODO: get zpages from api .. hrm ...
     zpages: PageInterface[]
 }